A rather geeky/technical weblog, est. 2001, by Bramus
With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you: …
Continue reading “Why You Should Be Excited About Native CSS Variables”
nth-of-m-child(n,m) Selector. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector: /** * :nth-of-m-child selector * This selector will select the …
In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content. Internally it looks like this: Note …
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 Custom Properties, calc(), and some binary logic – to implementing this type of conditions on a per CSS …
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 …