A rather geeky/technical weblog, est. 2001, by Bramus
Object.assign() to quickly set multiple inline stylesSince 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 objects will be merged as CSS properties along with their values on the currently applied …
Continue reading “Using Object.assign() to quickly set multiple inline styles”
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 used them. It’s packed with practical tips, whether you’re starting from scratch or assembling one …
Continue reading “Front-end Style Guides – Creating and Maintaining Style Guides for Websites”
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 …
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 …
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 …
Continue reading “CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout”
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 …
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 print style sheets are still a thing. I totally forgot about print style sheets →
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 of diagrams →
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 …