Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!
Wednesday, August 23rd, 2017
Saturday, August 12th, 2017
Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:
As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.
Wednesday, August 9th, 2017
Thursday, August 3rd, 2017
At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.
Monday, July 31st, 2017
A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.
For when you don’t need the whole boot.
I approve this message!
Saturday, July 29th, 2017
Jina invented an entirely new genre for her Patterns Day talk—autobiographical fantasy.
Friday, July 21st, 2017
Tuesday, July 11th, 2017
Patterns Day videos
Eleven days have passed since Patterns Day. I think I’m starting to go into withdrawal.
Fortunately there’s a way to re-live the glory. Video!
And remember, the audio is already online as a podcast.
The videos are coming! The videos are coming!
Here’s the first one: Laura Elizabeth opening the show at Patterns Day.
Thursday, July 6th, 2017
What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons
Ah, the age-old question!
The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.
Monday, July 3rd, 2017
Paul has published the slides and transcript of his knock-out talk at Patterns Day. This a must-read: superb stuff!
Design systems are an attempt to add a layer of logic and reasoning over a series decisions made by complex, irrational, emotional human beings. As such, they are subject to individual perspectives, biases, and aspirations.
How does the culture in which they are made effect the resulting design?
Tuesday, June 27th, 2017
Alla’s book is going to be a must-have (I know because I’ve been reviewing it as she’s been writing it). Pre-order it now. It’s out in September.
Thursday, June 22nd, 2017
Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem) | CSS-Tricks
I think Chris is on to something here when he identifies one of the biggest issues with CSS growing out of control:
The developers are afraid of the CSS.
Tuesday, June 20th, 2017
Beautifully designed and typeset eBooks of royalty-free works—yours for the taking and reading.
There’s a styleguide if you want to get involved on the production side too.
Tuesday, June 6th, 2017
A style guide for voice interfaces.
Thursday, May 18th, 2017
Friday, May 5th, 2017
Patterns Day speakers
Ticket sales for Patterns Day are going quite, quite briskly. If you’d like to come along, but you don’t yet have a ticket, you might want to remedy that. Especially when you hear about who else is going to be speaking…
Sareh Heidari works at the BBC building websites for a global audience, in as many as twenty different languages. If you want to know about strategies for using CSS at scale, you definitely want to hear this talk. She just stepped off stage at the excellent CSSconf EU in Berlin, and I’m so happy that Sareh’s coming to Brighton!
Patterns Day isn’t the first conference about design systems and pattern libraries on the web. That honour goes to the Clarity conference, organised by the brilliant Jina Anne. I was gutted I couldn’t make it to Clarity last year. By all accounts, it was excellent. When I started to form the vague idea of putting on an event here in the UK, I immediately contacted Jina to make sure she was okay with it—I didn’t want to step on her toes. Not only was she okay with it, but she really wanted to come along to attend. Well, never mind attending, I said, how about speaking?
I couldn’t be happier that Jina agreed to speak. She has had such a huge impact on the world of pattern libraries through her work with the Lightning design system, Clarity, and the Design Systems Slack channel.
The line-up is now complete. Looking at the speakers, I find myself grinning from ear to ear—it’s going to be an honour to introduce each and every one of them.
This is going to be such an excellent day of fun and knowledge. I can’t wait for June 30th!
Tuesday, May 2nd, 2017
A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.
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.
Monday, May 1st, 2017