Rachel Andrew’s presentation was all about CSS Grid. It was fantastic, very enlightening, and let’s be honest here, I only captured really about a third of it in the notes because otherwise I would have had to screen capture like every side and by that point you have no reason to go see it yourself.
Go see it yourself.
Oh and you’ll notice that Rachel’s one of those speakers who is so well-rehearsed she can set up tweets on a timer to go out during her presentation, which she did, so they’re in here too.
Meantime, here’s what we’ve got.
An Event Apart 2017 New CSS Layout Meets the Real World by Rachel Andrew (pdf)
Almost 16 years ago people were complaining how boring websites were becoming #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
In a few moments @rachelandrew is going to show this slide at #aeasea any guesses as to the year of this quote? pic.twitter.com/4pIy4niBB9
— A Brave New (@abravenew) April 4, 2017
I'm at #aeasea today. Here come the links! My collection of grid code examples and video tutorials is at https://t.co/IfHHRMfVTd
— Rachel Andrew (@rachelandrew) April 4, 2017
Almost 16 years ago people were complaining how boring websites were becoming #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
An awful lot of things we call web design now came from technical limitations from CSS years ago #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We were doing the same “use someone else’s code” back in 2001 #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
When @rachelandrew saw grid layout in IE 10 years ago, she knew this would help… #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Last month CSS grid shipped into every major browser except Edge #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
I wrote comprehensive Grid Layout documentation for @MozDevNet which starts here https://t.co/I3aBSlwHYp #aeasea
— Rachel Andrew (@rachelandrew) April 4, 2017
the older IE spec is totally usable (just not up to spec) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
CSS Grid support #aeasea pic.twitter.com/lNknVRGDWE
— Anne Gibson (@perpendicularme) April 4, 2017
But what about the old browser!? Even @rachelandrew has to support IE 9 #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We don’t not-use media queries because sites look different on a phone, we shouldn’t not-use CSS grid #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Flexbox
CSS Grid Layout
Box Alignment
CSS Shapes
CSS Feature QueriesAll new layout tools #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
.@rachelandrew has been working with Fractal by Clearleft to work on design patterns and components, mini-responsive-designs #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
the media object:
Photo, title, blurb, footer.
we see this all over the place#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Contains an image plus content
Is flexible
Should stack on mobile
Box should clear contents
Image can be left or right#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Avoid pre-emptying the need for markup as styling hooks. Just use divs because we don’t know content yet #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Don’t add too many extra divs “just in case”. New layout elements often show you don’t need them #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
At #aeasea I mentioned Fractal you can find a write-up of how we used it for @grabaperch here https://t.co/FnL1jbTRoQ
— Rachel Andrew (@rachelandrew) April 4, 2017
Grid is a good choice for this object because we’re controlling layout in two dimensions. It has 3 rows and 2 columns #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Grid layout kicks in when layout is >600px wide. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
(This talk is code-heavy so if you have access to the slides, you want to access the slides.) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
As we move to new layouts, we probably don't need so many divs. Don't put markup in your component for the sake of markup. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 4, 2017
Goodness, @rachelandrew takes something as complex as grid and explains it in such an elegant and intuitve way. #aeasea
— Greg Whitworth (@gregwhitworth) April 4, 2017
CSS Grid stacks things if you don’t tell them what the positions are #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Start with the minimum markup you need and if you need to add more later, it's not the end of the world. #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 4, 2017
Grid template areas method – assign names to elements, then put them in the grid-template-areas property #aeasea
— Anne Gibson (@perpendicularme) April 4, 2017
Grid automatically adds implicit rows #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The value “auto” is a very useful value, and highly misunderstood. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
In flexbox, if you set a basis of “auto” if nothing has a width becomes the size of the element #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
When creating fallbacks and sizing things, auto is special and important #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Grid-template-areas makes it easy to understand what the layout looks like #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
You can mix fr units with absolute values and they grab whatever’s left after assigned space #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
fr stands for “fraction” – if you have a row that contains two cells and each of them is sized at 1 fr, they’ll split the space as 50% each.
Demo of CSS Grid value auto for flex-basis: https://t.co/8OR6Y7rm33@rachelandrew #aeasea
— zeldman (@zeldman) April 4, 2017
There is no need to clear or use a clearfix with CSS Grid. Huzzah! #aeasea
— Stephanie 🔮 Web Witch (@seaotta) April 4, 2017
Flipping the image from the left to the right is redefining the grid-template-areas and that’s pretty much it #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
If we’re nesting one media object inside another, we’d get everything in the first cell…. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A quick change to the CSS by putting a media object in a media object and it’s fixed. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Line-based methods respect the reading order of the language, so keep in mind when laying out for multiple languages #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Another element we might want to create: magazine-style layout #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Sometimes we don’t get gorgeous large photos. Mixing them together can be quite nice #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A half-border box (border on top, border halfway down the left) uses minmax() #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Minmax allows a minimum and a maximum
Minmax(400px, 1fr)
To make sure things don’t collapse too far#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Adding border to top left cell of a grid. Can’t do that directly to the grid cells, so use a ::before of content: “” to do it #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We want the content in row one as well as the line, so define the .inner element to pull up over the first row #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
There’s a lot of stuff you can do by stacking things – you can use z-index, etc. similar to absolute positioning #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
If you want to use the grid implementation in IE10, 11 and current Edge, you'll find this post helpful https://t.co/rmmaWM4dcn #aeasea
— Rachel Andrew (@rachelandrew) April 4, 2017
Row tracks look complicated when we use minmax, but we’ll get used to it (@rachelandrew is still working on best way herself #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Because things can be stacked, we can have images overlap, etc. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
All sorts of things can be done with CSS grid that look fancy and cool #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
.@rachelandrew shows us how to build a magazine-inspired, responsive layout with #cssgrid. Powerful stuff! #aeasea pic.twitter.com/XX8arMpOVu
— Josh “Yoshi” Vickerson (@joshvickerson) April 4, 2017
Fancy headers with circles #aeasea pic.twitter.com/d8eLr7o2i3
— Anne Gibson (@perpendicularme) April 4, 2017
A cheatsheet to help with Grid fallbacks and overrides plus other resources #aeasea https://t.co/nzzKMXKQKF
— Rachel Andrew (@rachelandrew) April 4, 2017
On small devices, the fancy layout would be a bit cramped, so @rachelandrew started there #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Display for smallest screens #aeasea pic.twitter.com/qdKLDftYTM
— Anne Gibson (@perpendicularme) April 4, 2017
CSS Shapes are wonderful and add some very nice touches to floated elements #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Old internet explorer is still steamrolling layouts #aeasea pic.twitter.com/9tet8J2TwT
— Anne Gibson (@perpendicularme) April 4, 2017
Design for the extreme edges of the experience: start with solid markup, then best experience, *then* worst #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Don’t limit creativity by IE 9. The middle between best and worst is constantly changing. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The shape-outside property fails really well, so use it and don’t worry #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
CSS has backwards compatibility built in. Browsers ignore CSS they don’t understand #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
It’s always an option to do nothing for support. They’ll fall back to simpler experience #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Things do not need to look the same in all browsers #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
CSS Feature Queries will become your new best friend #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Feature queries have fantastic browser support. You don’t have to worry about what happens if they’re not supported #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
If you don’t have shapes, you can set one design, and use feature query to say if you do have shapes, do this other thing #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Write CSS for browsers without support
Override those with feature queries
Component-based approach helps to keep in check#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
For the magazine layout, we really don’t want the fallback to go to nothing #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Wrap the half-border in @supports (display: grid)
And above that give it a full border #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
To keep up to date with news and tutorials on CSS Layout, subscribe to my CSS Layout News #aeasea https://t.co/aJUhXCliGc
— Rachel Andrew (@rachelandrew) April 4, 2017
Guidance for grid and flex #aeasea pic.twitter.com/fURPmcpraf
— Anne Gibson (@perpendicularme) April 4, 2017
A cheat sheet by @rachelandrew for grid and flex https://t.co/Drnov5Z4MV #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
You have to look at your browser stats to make decisions on what you support #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
What your browser stats look like today is not what they’ll look like in a year’s time #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
If you’re separating source and display you need to be very careful not to harm the end users #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Got grid questions? Look at the answered ones and post yours at my Grid AMA https://t.co/r4R5OKZwpP #aeasea
— Rachel Andrew (@rachelandrew) April 4, 2017
What happened to vendor prefixes? They’re going away #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
CanIUse will tell you what you need prefixes for. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Just enhance a few little things with Grid – components – not full pages yet, until support and experience are better #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Most things are pretty simple in isolation – small components are very very simple, and you can build up from there #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Your component is already a reduced test case. Easier to debug, easier to report bugs #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
This is not twice the work – that was back when we wrote one site for IE and one for Netscape #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
This is about creating experiences for different devices, not about fallback support #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
we can make good experiences for people wherever they are. And what they experience today may change tomorrow #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Evergreen design enhances itself as the platform it lives on improves #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Have fun with it, see what you can do, and let @rachelandrew know what you can’t do so they can move the platform forward #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
So many interesting layouts are possible with Grid! Thanks for the great talk @rachelandrew & for advocating for browser adoption. #aeasea pic.twitter.com/ZsasAq494v
— Rebecca Watson (@RVivusArtDesign) April 4, 2017