KSS is intended to help automate the creation of a living styleguide. A styleguide serves as a place to publish KSS documentation and visualize different states of UI elements defined in your CSS.

We’re going to create a background like this in pure CSS:

A proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.

One big new method for making your website fast is called
Accelerated Mobile Pages (AMP), a project spearheaded by Google. Mobile data is unlike our home WiFi connections. It’s slow. AMP aims to help fix that, in a rigidly prescribed way, by ridding sites of their most inefficient parts.
AMP has very rigid rules for the source in order to get the big speed gains it’s going for.

A pure CSS Masonry with flexbox+CSS columns (demo here https://jsbin.com/loronibali/2/edit?css,output).

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the process. Here's how it's done:

list of css hacks for IE up to Edge

Use rock-solid background images in your HTML email with some help from VML and CSS.

the last carousel you'll ever need

Styling for range inputs has improved dramatically since the release of IE10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS.

На Хабре уже было немало материалов о том, как проводить качество вёрстки веб-проектов (вот отличная статья на эту тему) — как правило, речь в таких топиках идёт о коммерческих сайтах. В ходе развития образовательного проекта HTML Academy мы также столкнулись с необходимостью выработки критериев для оценки работ учеников.

For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean.

Pattern Lab is a collection of tools to help you create atomic design systems.

Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web.

A good starting point for design that takes device resolution out of the equation

A collection of 850 free CSS and HTML5 site templates, designed & built by Cherry + AJ and released under the Creative Commons.

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

Styling CSS without losing your sanity

Smooth parallax effect on vertical page scrolling