CSS Gird

Great web design starts with the grid

Transcript

1. 1.61803398875
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Order and creativity
   

   View Slide

8. The Anatomy of
   the Grid
   

   View Slide

9. Units
   Smallest vertical division
   

   View Slide

10. View Slide

11. Columns
    Groups of units
    

    View Slide

12. View Slide

13. Regions
    Groups of columns of any number
    

    View Slide

14. View Slide

15. Fields
    Horizontal divisions
    

    View Slide

16. View Slide

17. Gutters
    Empty spaces between units and columns
    

    View Slide

18. View Slide

19. Margins and Padding
    Margins are space outside. Padding is space inside
    Elements
    Headlines, buttons, images, etc.
    Modules
    Groups of elements
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Grid
    Is Epic In Every Way
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. CSS Floats
    Have always been awesome
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. 
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    
    
    .col-md-8
    .col-md-4
    
    
    .col-md-4
    .col-md-4
    .col-md-4
    
    
    .col-md-6
    .col-md-6
    
    

    View Slide

36. .left {
    width: 26%;
    box-sizing: border-box;
    float: left;
    }
    .right {
    box-sizing: border-box;
    margin-left: calc(26% + 20px);
    }
    .float {
    margin: auto;
    width: 960px;
    background: transparent url(float.png) repeat-y 0 25%;
    }
    .float:after {
    content: '';
    display: block;
    clear: both;
    }
    
    
    left
    
    
    right
    
    
    

    View Slide

37. Floats are evil
    There must be a better way
    

    View Slide

38. CSS Grid
    

    View Slide

39. 
    header
    sidebar
    content
    info
    footer
    
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. 
    header
    sidebar
    content
    info
    footer
    
    .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    max-width: 600px;
    margin: 100px auto;
    }
    

    View Slide

46. View Slide

47. 
    header
    sidebar
    content
    info
    footer
    
    header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background: #fddf58;
    }
    

    View Slide

48. 
    header
    sidebar
    content
    info
    footer
    
    .sidebar {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #e68930;
    }
    

    View Slide

49. 
    header
    sidebar
    content
    info
    footer
    
    .content {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    background: #1a98f9;
    }
    

    View Slide

50. 
    header
    sidebar
    content
    info
    footer
    
    .info {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #fff;
    }
    

    View Slide

51. 
    header
    sidebar
    content
    info
    footer
    
    footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #fddf58;
    }
    

    View Slide

52. View Slide

53. .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    max-width: 600px;
    margin: 100px auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    }
    

    View Slide

54. View Slide

55. 
    header
    sidebar
    content
    info
    footer
    Extra section
    
    .extra {
    background: #fff;
    }
    

    View Slide

56. View Slide

57. Implicit and Explicit
    Grid
    

    View Slide

58. .grid {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 120px 120px auto 120px;
    }
    

    View Slide

59. View Slide

60. Complex Layouts
    

    View Slide

61. View Slide

62. Do you need a framework?
    

    View Slide

63. Nope
    

    View Slide

64. Ascii Art
    \`\ /`/
    \ V /
    /. .\
    =\ T /=
    / ^ \
    /\\ //\
    __\ " " /__
    (____/^\____)
    

    View Slide

65. View Slide

66. .grid {
    grid-template-areas:
    "header header"
    "sidebar content"
    "info content"
    "footer footer";
    }
    header { grid-area: header; background: #fddf58; }
    .sidebar { grid-area: sidebar; background: #e68930; }
    .content { grid-area: content; background: #1a98f9; }
    .info { grid-area: info; background: #fff; }
    footer { grid-area: footer; background: #fddf58; }
    

    View Slide

67. View Slide

68. .grid {
    grid-template-areas:
    "header header"
    "sidebar ."
    "info content"
    "footer footer";
    }
    

    View Slide

69. View Slide

70. .grid {
    grid-template-areas:
    "header content"
    "sidebar content"
    "info content"
    "footer footer";
    }
    

    View Slide

71. View Slide

72. .grid {
    grid-template-areas:
    "header header info"
    "sidebar content info"
    ". content info"
    "footer footer footer";
    }
    .grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 120px 120px 120px 120px;
    }
    

    View Slide

73. View Slide

74. .grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 120px 120px 120px 120px;
    }
    .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 120px 120px 120px 120px;
    }
    

    View Slide

75. .grid {
    max-width: 640px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
    grid-template-rows: auto;
    }
    header { background: #fddf58; }
    .sidebar { background: #e68930; }
    .content { background: #1a98f9; }
    .info { background: #fff; }
    footer { background: #fddf58; }
    

    View Slide

76. View Slide

77. Browser Support
    

    View Slide

78. IE
    Created CSS Grid!
    

    View Slide

79. View Slide

80. View Slide

81. Are we back to browser sniffing?
    

    View Slide

82. View Slide

83. @supports (display: grid) {
    .grid {
    grid-template-areas:
    "header content"
    "sidebar content"
    "info content"
    "footer footer";
    }
    }
    

    View Slide

84. Fallbacks
    

    View Slide

85. Flexbox
    

    View Slide

86. Accessability
    

    View Slide

87. 
    footer
    header
    sidebar
    content
    info
    
    

    View Slide

88. Rachel Andrews - Grid by Design
    

    View Slide

89. Rachel Andrews - Talk
    

    View Slide

90. “Great web design
    starts with the
    grid”
    

    View Slide