Always mark-up first. Regardless of what the kids are doing these days, I stick by my guns and start with mark-up first. A fun experiment (maybe not for you, but definitely for me) is to see how your site reads on Lynx. It does serve as a good gauge of whether the content on the site is structured properly or not.
Monday, February 12th, 2018
Sunday, January 28th, 2018
A clever little hack to preserve an aspect ratio for any HTML element.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
Thursday, November 16th, 2017
Yes! I’ve wanted this forever!
Wednesday, November 1st, 2017
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Thursday, October 19th, 2017
It must be the day for documenting the history of CSS. Here’s an article by Aaron on the extraordinary success story of CSS Grid. A lot of the credit for that quite rightly goes to Rachel and Jen:
Starting with Rachel Andrew coming in and creating a ton of demos and excitement around CSS Grid with Grid by Example and starting to really champion it and show it to web developers and what it was capable of and the problems that it solves.
Then, a little bit later, Jen Simmons created something called Labs where she put a lot of demos that she created for CSS Grid up on the web and, again, continued that momentum and that wave of enthusiasm for CSS Grid with web developers in the community.
Wednesday, October 4th, 2017
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.
The lessons learned make for good design principles:
- Talk to the people
- Look for duplication of efforts
- Know your values
- Empower your team
- Start small and iterate
- Don’t work in a vacuum
- Reuse and specialize
- Promote your system
- Be flexible
Tuesday, October 3rd, 2017
A ten-part tutorial on CSS Grid from Mozilla.
Saturday, September 30th, 2017
A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.
Thursday, September 14th, 2017
A really nice example of progressive enhancement: creating a layout with
inline-block, then flexbox, then Grid.
Friday, September 8th, 2017
A deep dive into the CSS declaration that Jen told me she wants on a T-shirt.
Friday, August 4th, 2017
Oh, how I wish I could’ve been at Web Directions Code in Melbourne to see this amazing presentation by Charlotte. I can’t quite get over how many amazing knowledge bombs she managed to drop in just 20 minutes!
Monday, July 31st, 2017
Rachel is maintaining this (short) list of browser bugs with CSS Grid, inspired by the excellent Flexbugs.
Grid shipped into browsers](https://gridbyexample.com/browsers) in a highly interoperable state, however there are a few issues - let’s document any we find here.
Tuesday, July 25th, 2017
A great example of progressive enhancement in action.
You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.
Wednesday, July 5th, 2017
Rachel uncovers a great phrase for dealing with older browsers:
It isn’t your fault, but it is your problem.
She points to multiple ways of using CSS Grid today while still providing a decent experience for older browsers.
Crucially, there’s one message that hasn’t changed in fifteen years:
Websites do not need to look the same in every browser.
It’s crazy that there are still designers and developers who haven’t internalised this. And before anyone starts claiming that the problem is with the clients and the bosses, Rachel has plenty of advice for talking with them too.
Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making.
Tuesday, June 6th, 2017
A great description of one of the most powerful features in CSS Grid.
This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
Tuesday, May 30th, 2017
Charlotte has caught the CSS Grid bug. I absolutely love her step-by-step explanation—it’s really clear, and manages to be brief but thorough at the same time.
It’s time to be more experimental and push the boundaries with layouts.
Tuesday, May 23rd, 2017
A quick visual guide to CSS Grid properties and values.
Tuesday, May 2nd, 2017
Styling the Patterns Day site
Once I had a design direction for the Patterns Day site, I started combining my marked-up content with some CSS. Ironically for an event that’s all about maintainability and reusability, I wrote the styles for this one-page site with no mind for future use. I treated the page as a one-shot document. I even used ID selectors—gasp! (the IDs were in the HTML anyway as fragment identifiers).
The truth is I didn’t have much of a plan. I just started hacking away in a
style element in the
head of the document, playing around with colour, typography, and layout.
I started with the small-screen styles. That wasn’t a conscious decision so much as just the way I do things automatically now. When it came time to add some layout for wider viewports, I used a sprinkling of old-fashioned
display: inline-block so that things looked so-so. I knew I wanted to play around with Grid layout so the
inline-block styles were there as fallback for non-supporting browsers. Once things looked good enough, the fun really started.
I was building the site while I was in Seattle for An Event Apart. CSS Grid layout was definitely a hot topic there. Best of all, I was surrounded by experts: Jen, Rachel, and Eric. It was the perfect environment for me to dip my toes into the waters of grid.
Jen was very patient in talking me through the concepts, syntax, and tools for using CSS grids. Top tip: open Firefox’s inspector, select the element with the
display:grid declaration, and click the “waffle” icon—instant grid overlay!
For the header of the Patterns Day site, I started by using named areas. That’s the ASCII-art approach. I got my head around it and it worked okay, but it didn’t give me quite the precision I wanted. I switched over to using explicit
It’s definitely a new way of thinking about layout: first you define the grid, then you place the items on it (rather than previous CSS layout systems where each element interacted with the elements before and after). It was fun to move things around and not have to worry about the source order of the elements …as long as they were direct children of the element with
Without any support for sub-grids, I ended up having to nest two separate grids within one another. The logo is a grid parent, which is inside the header, also a grid parent. I managed to get things to line up okay, but I think this might be a good use case for sub-grids.
The logo grid threw up some interesting challenges. I wanted each letter of the words “Patterns Day” to be styleable, but CSS doesn’t give us any way to target individual letters other than
:first-letter. I wrapped each letter in a
b element, made sure that they were all wrapped in an element with an
aria-hidden attribute (so that the letters wouldn’t be spelled out), and then wrapped that in an element with an
aria-label of “Patterns Day.” Now I could target those
For a while, I also had a
br element (between “Patterns” and “Day”). That created some interesting side effects. If a
br element becomes a grid item, it starts to behave very oddly: you can apply certain styles but not others. Jen and Eric then started to test other interesting elements, like
hr. There was much funkiness and gnashing of specs.
It was a total nerdfest, and I loved every minute of it. This is definitely the most excitement I’ve felt around CSS for a while. It feels like a renaissance of zen gardens and layout reservoirs (kids, ask your parents).
After a couple of days playing around with grid, I had the Patterns Day site looking decent enough to launch. I dabbled with some other fun CSS stuff in there too, like gratuitous clip paths and filters when hovering over the speaker images, and applying
shape-outside with an image mask.
Go ahead and view source on the Patterns Day page if you want—I ended up keeping all the CSS in the
head of the document. That turned out to be pretty good for performance …for first-time visits anyway. But after launching the site, I couldn’t resist applying some more performance tweaks.
Tuesday, April 11th, 2017
A handy GUI for experimenting with CSS Grid Layout without having to recall the syntax.
Monday, April 10th, 2017
Getting griddy with it
I had the great pleasure of attending An Event Apart Seattle last week. It was, as always, excellent.
It’s always interesting to see themes emerge during an event, especially when those thematic overlaps haven’t been planned in advance. Jen noticed this one:
The theme of this year’s AEA (ideas emerging across talks) — do not just do a thing on your project because others do on theirs. #aeasea— Jen Simmons (@jensimmons) April 3, 2017
I remember that being a theme at An Event Apart San Francisco too, when it seemed like every speaker had words to say about ill-judged use of Bootstrap. That theme was certainly in my presentation when I talked about “the fallacy of assumed competency”:
- large company X uses technology Y,
- company X must know what they are doing because they are large,
- therefore technology Y must be good.
Perhaps “the fallacy of assumed suitability” would be a better term. Heydon calls it “the ‘made at Facebook’ fallacy.” But I also made sure to contrast it with the opposite extreme: “Not Invented Here syndrome”.
As well as over-arching themes, it was also interesting to see which technologies were hot topics at An Event Apart. There was one clear winner here—CSS Grid Layout.
Microsoft—a sponsor of the event—used An Event Apart as the place to announce that Grid is officially moving into development for Edge. Jen talked about Grid (of course). Rachel talked about Grid (of course). And while Eric and Una didn’t talk about it on stage, they’ve both been writing about the fun they’ve been having having with Grid. Una wrote about 3 CSS Grid Features That Make My Heart Flutter. Eric is documenting the overall of his site with Grid. So when we were all gathered together, that’s what we were nerding out about.
There are some great resources out there for levelling up in Grid-fu:
- Jen’s experimental layout lab shows what’s possible.
- Her exercises in Codepen are a great way to test your knowledge of Grid.
- So is CSS Grid Garden.
- Rachel’s extensive Grid by Example is the perfect way to find the Grid solution to your layout scenario.
With Jen’s help, I’ve been playing with CSS Grid on a little site that I’m planning to launch tomorrow (he said, foreshadowingly). I took me a while to get my head around it, but once it clicked I started to have a lot of fun. “Fun” seems to be the overall feeling around this technology. There’s something infectious about the excitement and enthusiasm that’s returning to the world of layout on the web. And now that the browser support is great pretty much across the board, we can start putting that fun into production.