79107 cri Fahrradcomputer GB-IE-DK · gb/ie gb/ie gb/ie emc brug!.. ... -+ emc owim gmbh & co. kg
GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE...
Transcript of GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE...
![Page 1: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/1.jpg)
GET ON THE GRIDUsing CSS Grid in the Real World
Brenda Storer@brendamarienyc
Generate NYC – April 26, 2018
© Disney
![Page 2: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/2.jpg)
Me@brendamarienyc Designer at thoughtbot (Front-End Dev too!)
![Page 3: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/3.jpg)
You?
![Page 4: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/4.jpg)
Emotional Reaction to new CSS SpecsThe minute when browser compatibility is mentioned 😧😢😡
![Page 5: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/5.jpg)
Why can’t we have nice things? 😭
![Page 6: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/6.jpg)
GRID IS NICE
![Page 7: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/7.jpg)
Why?Bye Bye Vendor Prefixes 😮
Hello Feature Flags 🤗
![Page 8: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/8.jpg)
January 27, 2017
![Page 9: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/9.jpg)
Today
![Page 10: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/10.jpg)
…with one exception. IE.Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid
![Page 11: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/11.jpg)
![Page 12: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/12.jpg)
Step by Step Guide to writing CSS Grid
![Page 13: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/13.jpg)
Step 1: Identify a Good Use Case
![Page 14: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/14.jpg)
Flexbox vs. Grid
![Page 15: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/15.jpg)
Flexbox is great for laying out items in one direction. In rows….
![Page 16: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/16.jpg)
…or columns
![Page 17: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/17.jpg)
Uh oh.
![Page 18: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/18.jpg)
Grid allows you to lay out elements in two directions, rows & columns
![Page 19: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/19.jpg)
![Page 20: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/20.jpg)
![Page 21: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/21.jpg)
![Page 22: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/22.jpg)
When normally reaching for a layout property like Flexbox, floats, or positioning,
consider Grid. '
![Page 23: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/23.jpg)
A good use case
![Page 24: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/24.jpg)
Step 2: Write Grid Code
![Page 25: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/25.jpg)
<ul class="search-results"> <li class="search-results__result"> <img class="search-results__photo" src="path-to-image.jpg"> </li> <li class="search-results__result"> <img class="search-results__photo" src="path-to-image.jpg"> </li> … more <li>s </ul>
The Markup (simplified)
![Page 26: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/26.jpg)
The CSS 🍾.search-results { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); padding: 10px; }
![Page 27: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/27.jpg)
Step 3: Fallback gracefully with feature queries
![Page 28: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/28.jpg)
@supports
@supports (display: grid) { .search-results { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); padding: 10px; } }
![Page 29: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/29.jpg)
@supports Support
![Page 30: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/30.jpg)
.search-results {
display: flex; flex-wrap: wrap; padding: 5px; }
.search-results__result { margin: 5px; }
@media only screen and (min-width: 500px) {
.search-results__result { width: calc(50% - 10px); } }
@media only screen and (min-width: 800px) { .search-results__result { width: calc(33.3333% - 10px); } }
@media only screen and (min-width: 1200px) { .search-results__result { width: calc(25% - 10px); }
}
Fallin’ back with Flexbox
![Page 31: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/31.jpg)
.search-results {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
@supports (display: grid) { .search-results {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
padding: 10px
}
}
![Page 32: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/32.jpg)
.search-results__result { margin: 5px;
}
@media only screen and (min-width: 500px) {
.search-results__result {
width: calc(50% - 10px); }
}
@media only screen and (min-width: 800px) {
.search-results__result {
width: calc(33.3333% - 10px);
} }
@media only screen and (min-width: 1200px) {
.search-results__result {
width: calc(25% - 10px);
} }
@supports (display: grid) {
.search-results__result {
margin: 0;
width: auto;
} }
![Page 33: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/33.jpg)
.search-results {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
@supports (display: grid) {
.search-results {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
padding: 10px
}
}
.search-results__result {
margin: 5px;
}
@media only screen and (min-width: 500px) {
.search-results__result {
width: calc(50% - 10px);
}
}
@media only screen and (min-width: 800px) {
.search-results__result {
width: calc(33.3333% - 10px);
}
}
@media only screen and (min-width: 1200px) {
.search-results__result {
width: calc(25% - 10px);
}
}
@supports (display: grid) {
.search-results__result {
margin: 0;
width: auto;
}
}
Grid code with a Flexbox fallback: Ready for production!
![Page 34: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/34.jpg)
Order mattersFallback first as the default Grid code last, so it can override the default styles
![Page 35: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/35.jpg)
A few considerations…Disable Grid in Autoprefixer – This is the default for Autoprefixer v7.0 and greater
Some syntax not supported in Sass until v3.5 – Sass-rails only running Sass v3.1
![Page 36: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/36.jpg)
Step 4: Ship it
![Page 37: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/37.jpg)
Everyday examples!*
![Page 38: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/38.jpg)
“It’s ok that when I look back at my old code I sometimes say, ‘Whatever was I thinking?!!’ That means I’m still learning & growing.”
*disclaimer
– Brenda Storer
![Page 39: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/39.jpg)
Beyond media queriesResponsive based on content size
rather than screen size
![Page 40: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/40.jpg)
What things can CSS Grid do that CSS couldn’t do before?
Control placement around unknowns. Using media queries with grid.
![Page 41: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/41.jpg)
Graceful DegradationWho made the rules that web pages must
look the same in every browser?
![Page 43: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/43.jpg)
RESOURCES
![Page 44: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/44.jpg)
Layout Land - Jen Simmons
– Basics of CSS Grid: The Big Picture
Labs - Jen Simmons
Grid By Example - Rachel Andrew
– Get Started Guide
– Flexible Sized Grids with auto-fill and minmax
– The fr unit
From Bootstrap to CSS Grid - Natalya Shelburne
![Page 45: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/45.jpg)
Grid + IEShould I try to use the IE implementation of CSS Grid Layout? — Rachel Andrew
Internet Explorer + CSS Grid???? — Jen Simmons
![Page 46: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/46.jpg)
Resources from MeCodepen Collection of CSS Grid Examples
A Fearless Guide to Using CSS Grid Today
![Page 47: GET ON THE GRID - brendastorer.com · …with one exception. IE. Prefixed version of Grid in IE only -ms Early, not fully baked version of Grid](https://reader035.fdocuments.us/reader035/viewer/2022063002/5f47d3e26dd7602678631d3d/html5/thumbnails/47.jpg)
Thank you!@brendamarienyc http://brendastorer.com
http://brendastorer.com/presentations/2018-04-GenerateNYC.pdf