Collection - CSS

We have covered print stylesheets in the past here on Smashing Magazine. In this article, Rachel Andrew takes a look at the state of printing from the browser today.

From Smashing Magazine.

From CSS Duotone.

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.

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).

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.

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.

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.

CSS is changing fast. Here’s our guide to the most exciting updates.

From Creative Bloq.

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.

A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.

From Inclusive Components .

CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.

From Mozilla.

What designers need to know about these transformational layout tools.

From Medium: Jon Yablonski.

From Sassmeister (via @CSSWizardry).

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.

BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers.

From CSS Wizardry.

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.

Level BEM up a notch. This extended BEM syntax has been dubbed BEMIT, as it borrows some paradigms and patterns from the (as yet unpublished) Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT.

From CSS Wizardry.