Tag Archives: css

Conditions for CSS Calculations

In CSS we have feature queries (@supports) available to create if–else-like structs. What if we could extend our means of using conditions in CSS? Roman Komarov provides us with a clever technique – which involves using CSS Variables, calc(), and … Continue reading

Elsewhere , , Leave a comment

Using Object.assign() to quickly set multiple inline styles

Since an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects. The result is that all keys from those extra … Continue reading

Elsewhere , , Leave a comment

Front-end Style Guides – Creating and Maintaining Style Guides for Websites

Anna Debbenham – creator of styleguides.io – wrote a book on … Style Guides: Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have … Continue reading

Elsewhere , , , Leave a comment

Harry Roberts: Refactoring CSS Without Losing Your Mind

Working with CSS is tricky enough as it is; working with legacy CSS can be nightmarish. In this talk, we’ll look at how we decide what to refactor and when; how we can refactor code whilst still shipping features; how … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , , , Leave a comment

Working with Print Stylesheets

Often forgotten, but no less important: print styles. This post provides a nice summary of some simple things you can do to give your print layout some love. A small collection of useful CSS techniques and a quick reminder that … Continue reading

Elsewhere , , Leave a comment

CSS pseudo-classes

Great and visual explanation of CSS pseudo-classes such as :only-of-type, :first-of-type, :last-of-type, :nth-of-type(number/an + b/even/odd), … Embedded above is the visual for the selector: a:nth-last-of-type(1) { border: 2px solid black; } How CSS pseudo-classes work, explained with code and lots … Continue reading

Elsewhere , , Leave a comment