Craig Buckler reviews the art of creating printer-friendly web pages with CSS, showing how to retrofit them to any site, at minimal cost, without affecting or breaking existing functionality — delighting users and raising your site above competitor sites.
Diogo Souza walks through how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox & Grid — while discussing graceful degradation and progressive enhancement along the way.
Craig Buckler discusses 20 ways to optimize your CSS so that it’s faster-loading, easier to work with and more efficient, covering analysis tools, CDNs, HTTP/2, CSS3, animations and transitions, fonts, concatenation and minifying, build tools, flexbox, grid, SVG, critical CSS, and more.
Craig Buckler discusses form layout in the age of CSS Grid, discussing the difficulties of laying out forms with floats and flexbox, and demonstrating the benefits of grid in terms of form layout, the possibilities it offers, and how and why to take a progressive enhancement approach to form layout.
In this article on CSS and PWAs, David Attard discusses a number of techniques that can be used when creating the CSS required for the development of PWAs.
Ilya Bodrov explains how CSS transforms can be used in the real world to solve various tasks and achieve interesting results — showing how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.
Ahmed Bouchefra shows how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties.
Giulio Mainardi shows how to retrofit a popular, card-based Tumblr layout with CSS grid, demonstrating how to plan for responsive behavior and utilize other cutting edge CSS features such as object-fit: cover, @supports and the :focus-within pseudo-class.
Ahmed Bouchefra introduces key Bootstrap CSS classes for building layouts with the Bootstrap grid system, along with a quick introduction to using Flexbox.
Giulio Mainardi shows you how to build a Trello layout using CSS's new Grid Layout Module features and Flexbox, along with some Sass for efficiency.
Gajendar Singh shows how to create conic gradients in CSS, a new standard championed by Lea Verou which lets you build pie charts and more without images.
Maria Antonietta Perna discusses CSS as being on the critical rendering path and points out a few solutions you can try out in your development work.
Baljeet Rathi explains the use of CSS margins vs padding, the box model, bleeding and collapsing margins, and concludes with some cool layout tricks.
Nitish Kumar shows seven ways in which CSS Grid Layout lets front-end developers quickly and intuitively place content on the web.
George Martsoukos shows how to build a simple Flexbox and jQuery plugin which sorts elements based on the values of their custom data attributes.
CSS also provides selectors for matching elements based on their position in the document subtree. These are known as child–indexed pseudo-classes.