Collection - CSS

Our recent articles

CSS resources »

On Designing and Building Toggle Switches »

Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa. I liked, and was inspired, by the theme switch in the Medium app.

From Sara Soueidan.

Detecting autofilled fields in Javascript »

One of my colleagues is transitioning to the front-end team that I used to be a part of. To prepare him mentally for his journey into front-end development, I’ve been sending him a newsletter I call Front-End Hack of the Day. I’m posting them to Medium now for the world to enjoy.

From Tommy Brunn (Medium).

A11Y Style Guide »

The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.

From A11y Style Guide.

How I remember CSS Grid properties »

The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid. To wield CSS Grid effectively, you need to remember its properties and values.

From Zell WK.

17 top CSS animation examples »

You’ve probably noticed the number of CSS animation examples featuring on websites has been on the rise lately. Animation is one of the key web design trends of 2018. All over the web, designers are getting creative and using CSS animations to bring personality to their sites, explain complex ideas quickly and easily, and guide their users’ actions.

From Creative Bloq.

Responsive, accessible tables »

This approach is different from others you may have seen in that it uses a valid <table> (and child elements) and acknowledges that screen readers no longer consider <table>s to be tables when you start messing with their display properties.

From Adrian Roselli.

The Specificity Graph »

As we all (should) probably know by now, specificity is is one of CSS’ most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don’t use IDs in CSS, and we don’t nest selectors unless absolutely necessary.

From CSS Wizardry.

Naming UI components in OOCSS »

One of the biggest—if not most common—complaints about OOCSS is its use of ‘insemantic classes’. Unfortunately, the idea that classes are semantic (in the HTML sense of the term) is something of a fallacy.

From CSS Wizardry.

Popular topics

On development

On best practice

On content strategy