This is not only a really good explanation of CSS grid layout, it’s also a practical walkthrough, recreating the layout of the Financial Times. I think if I followed along at home, writing the markup and CSS outlined here, it would me to get this stuff “clicking” in my brain.
Jen tackles six aspects of web design that were true …but no longer.
- Everything must be a floating bar of soap
- Rectangles; only rectangles
- We can’t control the fold
- 12 columns is best
- We have to use a layout framework
- We are stuck in a rut because of RWD
Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.
Rachel takes a look back at twenty years of building on the web. Her conclusion: we’ve internalised constraints that are no longer relevant, and that’s holding us back from exploring new design possibilities:
Somehow the tables have turned. As the web moves on, as we get CSS that gives us the ability to implement designs impossible a few years ago, the web looks more and more like something we could have build with rudimentary CSS for layout. We’ve settled on our constraints and we are staying there, defined by not being print.
Some nifty layout tricks using the writing-mode property in CSS.
A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.
An attempt to crack the element query nut. It relies on executing JavaScript at runtime so it doesn’t feel production-ready to me unless you’re already relying on JavaScript to render or style your content. Still, there’s a lot of good thinking has gone into the syntax—it’s worth investigating for that reason alone.
The markup here (with proprietary inline attributes for styling) is a terrible idea but the demo that accompanies is great at showing how flexbox works …I just wish it didn’t try to abstract away the CSS. This is so close to being a really good learning tool for flexbox.
This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.
If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.
Rachel compares two CSS layout modules; Grid and Flexbox. This distinction is crucial:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
If Flexbox Froggy was too easy for you, take it to the next level with this tower defence game.
Grid frameworks don’t get much more minimal than this—eleven lines of CSS:
.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
.row { flex-direction: column; }
.col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }
Should’ve been a gist really.
Ethan demonstrates progressive enhancement at the pattern level using flexbox.
I’ve found that thinking about my design as existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.
Great tips from Heydon on building a real design system using flexbox. Perfect for those times when you can’t predict the amount of content that will be in layout …so, pretty much always.
There’s even a trick in here that kinda sorta gives us element queries.
I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.
Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.
Remember this, future self!
Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.
Rachel outlines the history of the CSS Grid Layout spec so far:
The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.
A deceptively simple but powerful use of flexbox.
Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.
Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.
I am really looking forward to hearing Heydon’s talk at Responsive Day Out.
Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.
Superb. Absolutely superb.
A magnificent tour-de-force by Frank on the web’s edgelessness.
Read. Absorb. Read again. This is the essence of responsive web design, distilled.
More flexbox!
This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.
Four different techniques for vertical centring in CSS, courtesy of Jake.
Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.
As David points out, it really needn’t be so complicated.
A handy step-by-step guide to all the ways you can use CSS for layout.
Vasilis examines the multitude of factors that could influence an ideal measure.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
A really nice piece on scale, ratio and rhythms in web design.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Josh writes about the importance of using rules and systems as tools without being bound by them.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.
See now, this is why liquid layouts are the way to go.
When I linked to the Toast framework the other day, I mentioned that I was intrigued by its use of inline-block for layout. Here’s a more detailed analysis of how display: inline-block works, along with some caveats.
This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.
Andy points one of the potential pitfalls in linearising your content for small screens.
An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
A sweet little meditation on the nature of the web and responsive design.
Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.
Luke catalogues layout patterns in responsive designs.
A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.
Stephen gives an excellent run-down of flexbox and how you can use it today.
Some more thoughts on the challenges of combining advertising with responsive design.
A responsively designed comic. Yeah, you heard me right. Responsive. Comic!
Rob documents how he approached his first responsive design.
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
The process behind a responsive realignment …and the end result is very nice indeed.
A set of default styles to get started on a mobile-first responsive design.
In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.
In a break with tradition, Paul posts something sensible and smart (I kid, I kid): using media queries to detect height rather than just width and adjust content accordingly to make sure that your most important content is visible in the viewport.
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
On the importance of using fluid grids as part of responsive web design:
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.
More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.
Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
37 Signals document their experiments with responsive web design. Looking good.
A fluid grid that linearises at smaller viewport widths.
Jon gets flexible. This is the mark of a true web designer.
This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.
Good points, well made.
Gorgeous visual design for an interestingly eclectic site.
A nice rundown of media queries and multiple columns in CSS3.
Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.
A handy tool for planning grids. Limited, alas, to pixels.
Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.
Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.
Here's a very handy CSS technique for floating a group of objects edge to edge. I've been in this situation quite a few times in the past.
Here's another CSS framework for grids. It could prove to be very useful for wireframing.
Good typography + stylish grid + liquid layout = WIN!
An interesting CSS technique that uses table-layout instead of float.
Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!
A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.
Mark has launched his business site. Lovely grids and typography, as you'd expect.
The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.
Roger hits the nail on the head: "fixed widths are used for the wrong reason - designer vanity. Come on, you’re designing for the Web, which means it’s your job to let things be flexible when you can."
Jon redesigns too. It's lovely, but a bit wide for my taste.
Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.
This is something I always meant to do but never got around to: a gallery site for good liquid design.
Using JavaScript to serve up fixed or liquid layout based on browser width.
I've been suckered into another debate on fixed width layouts: "Discussing whether 800 is better than 1024 is like discussing whether Coke is better than Pepsi when all you really want is a nice drink of water."
Roger Johansson details his elastic design.