CSS

Home » NewsBlog » CSS

“a more visually-pleasing focus”

2017-11-09T03:01:00+00:00

There is a JavaScript library, Focusingly, that says: With Focusingly, focus styling adapts to match and fit individual elements. No configuration required, Focusingly figures it out. The result is a pleasingly tailored effect that subtly draws the eye. The idea is that if a link color (or whatever focusable element) is red, the outline will [...]

“a more visually-pleasing focus” 2017-11-09T03:01:00+00:00

Building Flexible Design Systems

2017-11-08T03:01:59+00:00

Yesenia Perez-Cruz talks about design systems that aren't just, as she puts it, Lego bricks for piecing layouts together. Yesenia is Design Director at Vox, which is a parent to many very visually different brands, so you can see how a single inflexible design system might fall over. Successful design patterns don't exist in a [...]

Building Flexible Design Systems 2017-11-08T03:01:59+00:00

The Contrast Swap Technique: Improved Image Performance with CSS Filters

2017-11-08T03:01:54+00:00

With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters to indicate hover state, hide passwords, and now—for web performance. While playing with profiling performance wins of using blend [...]

The Contrast Swap Technique: Improved Image Performance with CSS Filters 2017-11-08T03:01:54+00:00

Designing Tables to be Read, Not Looked At

2017-11-08T03:01:49+00:00

Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here's a good one: You might consider making all the columns an even width. This too does nothing for the readability of the contents. Some table cells will be too wide, leaving the data lost and [...]

Designing Tables to be Read, Not Looked At 2017-11-08T03:01:49+00:00

Flexbox and Grids, your layout’s best friends

2017-11-07T03:01:45+00:00

Eva Ferreira smacks down a few myths about CSS grid before going on to demonstrate some of the concepts of each: ❌ Grids arrived to kill Flexbox. ❌ Flexbox is Grid’s fallback. Some more good advice about prototyping: The best way to begin thinking about a grid structure is to draw it on paper; you’ll [...]

Flexbox and Grids, your layout’s best friends 2017-11-07T03:01:45+00:00

input type=’country’

2017-11-07T03:01:43+00:00

Terence Eden looks into the complexity behind adding a new type of HTML input that would allow users to select a country from a list, as per a suggestion from Lea Verou. Lea suggested it could be as simple as this: And then, voilà! An input with a list of all countries would appear in [...]

input type=’country’ 2017-11-07T03:01:43+00:00

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

2017-11-07T03:01:36+00:00

In my previous article, I've shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I'll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse [...]

Creating a Star to Heart Animation with SVG and Vanilla JavaScript 2017-11-07T03:01:36+00:00

Apple’s Proposal for HTML Template Instantiation

2017-11-07T03:01:34+00:00

I'm sure I don't have the expertise to understand the finer nuances of this, but I like the spirit: The HTML5 specification defines the template element but doesn't provide a native mechanism to instantiate it with some parts of it substituted, conditionally included, or repeated based on JavaScript values — as popular JavaScript frameworks such [...]

Apple’s Proposal for HTML Template Instantiation 2017-11-07T03:01:34+00:00