From Pages to Patterns

Video of Charlotte Jackson’s talk at Beyond Tellerrand on how to adopt pattern thinking to developing a pattern library/styleguide: This talk will look at how we can help everyone in the team adopt pattern thinking. This includes anyone with a decision to make—not just designers and developers. The whole team can start developing a shared …

10 principles for smooth web animations

Don’t change any properties besides opacity or transform! Hide content in plain sight with opacity: 0; and pointer-events: none; Don’t animate everything at the same time Slightly increasing transition delays makes it easy to choreograph motion Use a global multiplier to design in slow motion (and then speed everything up later) Take videos of your …

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Time to ramp up your CSS Grid Layout skills, as it’s now enabled by default in Chrome Canary: Boom! There it is. Latest Chrome Canary now has Grid Layout enabled by default. It’s on the way. pic.twitter.com/sUNOZKVUlH — Rachel Andrew (@rachelandrew) November 25, 2016 It’ll also land in Firefox 52. Speaking of, Firefox also sports …

Minimize FOUT with Font Style Matcher

Great tool by Monica Dinculescu (@notwaldorf): If you’re using a web font, you’re bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To …

CSS Variables: var(--subtitle);

As per usual, great talk by Lea Verou: The key takeaway about CSS Custom Properties to me is the very first one Lea mentioned: they’re just properties like the other CSS properties we already know. This means that the normal behavior of inheritance is in place, you can manipulate them from within media queries, and …

CSS Architecture for Design Systems

Excellent post by Brad Frost in which he explains how they’ve combined class prefixes with BEM. In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing. Here’s what class prefixes we landed on: c- for UI components, such as .cn-c-card or .cn-c-header …

The flex-grow: 9999; hack

Imagine a flex container (display: flex) with two flex items in a row (flex-direction: row). Item A on the left, and item B on the right. I would like the flex items to be stacked on top of each other when necessary. Item B has to jump onto the second line, if there’s not enough …

CSS attribute value less than / greater than / equals selectors

Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic: CSS attribute selector wish:[data-code>2][data-code<19] { /* styles */ }[data-code>=19][data-code<65] { /* other styles */ }and so on… — Ana Tudor (@anatudor) October 12, 2016 Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling …