Tags: style

161

sparkline

Friday, July 21st, 2017

Patterns Day 2017: Rachel Andrew on Vimeo

Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.

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!

The first video is online now: Laura Elizabeth’s excellent opener. More videos will follow. Keep an eye on this page.

And remember, the audio is already online as a podcast.

Patterns Day 2017: Laura Elizabeth on Vimeo

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

Fantasies of the Future / Paul Robert Lloyd

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

Meet “Design Systems”, A New Smashing Book (Pre-Release) – Smashing Magazine

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

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

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

Amazon Alexa Voice Design Guide

A style guide for voice interfaces.

Thursday, May 18th, 2017

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

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

Creating a pattern library in Sketch, Roobottom.com

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

Monday, May 1st, 2017

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

Thursday, April 20th, 2017

There are maps for these territories | Clearleft

A great piece from Danielle on the different mental models needed for different languages. When someone describes a language—like CSS—as “broken”, it may well be that there’s a mismatch in mental models.

CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.

I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.

Tuesday, April 18th, 2017

The Elements of Bureaucratic Style

I’m currently reading The Sense of Style by Steven Pinker, and it resonates nicely with this article on the numbing effect of the bureaucratic style exemplified in phrases like “officer-involved shooting.”

Watching the cell phone videos of the assault has, for most people, the immediate effect of provoking outrage and awakening a desire for justice. The purpose of bureaucratic speech is to dull these responses. It suggests your outrage is not worth it, that it’s fine to go back to what you were doing, that it’s best to move along and mind your own business.

Tuesday, April 4th, 2017

Jeremy Keith Interview

I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.

Monday, April 3rd, 2017

Cascading HTML Style Sheets — A Proposal

It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:

A one-statement style sheet that sets the font size of the h1 element:

h1.font.size = 24pt 100%

The percentage at the end of the line indicates what degree of influence that is requested (here 100%).

Friday, March 24th, 2017

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

Wednesday, March 1st, 2017

The Unexpected Power of Viewport Units in CSS | Lullabot

A nice rundown of some of the fun you can have with viewport units.

I’m very glad the problems with vh units I wrote about a little while back is getting fixed in Chrome for mobile.