CSS Gird

Great web design starts with the grid

Transcript

1. 1.61803398875
7. Order and creativity
8. The Anatomy of the Grid
9. Units Smallest vertical division
11. Columns Groups of units
13. Regions Groups of columns of any number
15. Fields Horizontal divisions
17. Gutters Empty spaces between units and columns
19. Margins and Padding Margins are space outside. Padding is space inside Elements Headlines, buttons, images, etc. Modules Groups of elements
25. Grid Is Epic In Every Way
30. CSS Floats Have always been awesome
35. <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
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; } <section class="float"> <div class="left"> left </div> <div class="right"> right </div> </section>
37. Floats are evil There must be a better way
38. CSS Grid
39. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div>
45. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> .grid { display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto; max-width: 600px; margin: 100px auto; }
47. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background: #fddf58; }
48. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; background: #e68930; }
49. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; background: #1a98f9; }
50. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> .info { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; background: #fff; }
51. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> </div> footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; background: #fddf58; }
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; }
55. <div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer> <div class="extra">Extra section</div> </div> .extra { background: #fff; }
57. Implicit and Explicit Grid
58. .grid { grid-template-columns: 1fr 3fr; grid-template-rows: 120px 120px auto 120px; }
60. Complex Layouts
62. Do you need a framework?
63. Nope
64. Ascii Art \`\ /`/ \ V / /. .\ =\ T /= / ^ \ /\\ //\ __\ " " /__ (____/^\____)
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; }
68. .grid { grid-template-areas: "header header" "sidebar ." "info content" "footer footer"; }
70. .grid { grid-template-areas: "header content" "sidebar content" "info content" "footer footer"; }
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; }
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; }
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; }
77. Browser Support
78. IE Created CSS Grid!
81. Are we back to browser sniffing?
83. @supports (display: grid) { .grid { grid-template-areas: "header content" "sidebar content" "info content" "footer footer"; } }
84. Fallbacks
85. Flexbox
86. Accessability
87. <div class="grid"> <footer>footer</footer> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> </div>
88. Rachel Andrews - Grid by Design
89. Rachel Andrews - Talk
90. “Great web design starts with the grid”