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 grid-row and grid-column declarations.

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 display:grid applied.

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 b elements.

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.

Have you published a response to this? :


1 Like

# Liked by Gunnar Bittersmann on Tuesday, May 2nd, 2017 at 6:33am

Previously on this day

5 years ago I wrote 100 words 041

Day forty one.

7 years ago I wrote dConstruct 2013

Put the date in your calendar.

8 years ago I wrote Questions for Mobilism

I’m going to be moderating two panel discussions. What should I ask the panelists?

9 years ago I wrote Jared Spool: The Secret Lives of Links

Liveblogging Jared’s talk at An Event Apart in Boston.

9 years ago I wrote Ethan Marcotte: The Responsive Designer’s Workflow

Liveblogging Ethan’s talk at An Event Apart in Boston.

9 years ago I wrote Luke Wroblewski: Mobile Web Design Moves

Liveblogging Luke’s talk at An Event Apart in Boston.

9 years ago I wrote Veerle Pieters: The Experimental Zone

Liveblogging Veerle’s talk at An Event Apart in Boston.

9 years ago I wrote Whitney Hess: Design Principles — The Philosophy of UX

Liveblogging Whitney’s presentation at An Event Apart in Boston.

9 years ago I wrote Jeffrey Zeldman: What Every Web Designer Should Know — A Better You At What You Do

Liveblogging Jeffrey’s opening talk at An Event Apart in Boston.

10 years ago I wrote Understanding

Read what Ben Ward has written.

15 years ago I wrote Weekend in Seattle

Seattle is my kind of town. Whenever I’m here visiting, I always find myself thinking about what it would be like to live here. I think I could get used to the lifestyle.

16 years ago I wrote Now with even fewer wires

Brighton has some new wireless hotspots thanks to the good folks at Loose Connection.

17 years ago I wrote Leopold Kraus

Jessica came across the website of a surf-rock band that I used to play with when we were both still living in Freiburg, Germany.

18 years ago I wrote No Macs need apply

Jessica and I have thinking about getting some of our stuff insured (the computers, musical intruments, etc.). Jessica spent some time today comparing insurance policies online.