CSS Debugging and Optimization: Code-quality Tools
HTML & CSS
By Tiffany Brown,
In this series on troubleshooting and optimizing your CSS, Tiffany Brown introduces UnCSS and stylelint, two code-quality tools for analyzing the quality of your CSS.
CSS: Learn CSS, CSS3, Bootstrap, Sass, LESS & more — SitePoint
Recent
Creating Flexible Layouts with Flexbox
HTML & CSS
By Tiffany Brown,
Tiffany Brown introduces Flexbox, explaining the basic principles behind flex layout, with examples of laying out a basic media object, flexible form components, vertical centering, and creating grid-like layouts, as well as explaining when to use Flexbox over CSS Grid.
Creating Layouts with CSS Grid
HTML & CSS
By Tiffany Brown,
Tiffany Brown introduces the basics of CSS Grid, covering the grid formatting context, defining a grid layout, explicit versus implicit grids, specifying track size for an implicit grid, creating flexible grids with flex units, using the grid-template shorthand property, and repeating rows and columns.
Using SVG with Media Queries
HTML & CSS
By Tiffany Brown,
With HTML documents, we might show, hide, or rearrange parts of the page based on the conditions of the viewport. If the browser window is 480 pixels wide, for example, we might shift our navigation from a horizontal one to a vertical, collapsible list. We can do something similar with media queries and SVG documents.
Scroll Snap in CSS: Controlling Scroll Action
HTML & CSS
By Tiffany Brown,
Scroll snap lets developers define the distance an interface should travel during a scroll action. You might use it to build slide shows or paged interfaces―features that currently require JavaScript and expensive DOM operations.
How to Use 2D Transformation Functions in CSS
HTML & CSS
By Tiffany Brown,
Transforms allow us to create effects and interactions that are otherwise impossible. When combined with transitions and animations, we can create elements and interfaces that rotate, dance, and zoom. In this piece, we'll look at 2D transform functions.
How to Get Started with CSS Animation
HTML & CSS
By Tiffany Brown,
Think of CSS animation as the more sophisticated sister to CSS transitions. Animations differ from transforms in a few key ways, which we'll explore in this article
CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS
HTML & CSS
By Tiffany Brown,
We’ll now look at two methodologies for naming things in CSS: Block-Element-Modifier (better known as BEM) and Atomic CSS.
Variables in CSS: Custom Properties
HTML & CSS
By Tiffany Brown,
Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.
How to Use Gulp.js to Automate Your CSS Tasks
HTML & CSS
By Craig Buckler,
Craig Buckler demonstrates how use Gulp.js to automate CSS tasks, such as optimizing images, compiling Sass files, handling and inlining assets, automatically appending vendor prefixes, removing unused CSS selectors, minifying CSS, reporting file sizes, outputting sourcemaps and more.
Advanced CSS Theming with Custom Properties and JavaScript
HTML & CSS
By Ahmed Bouchefra,
Ahmed Bouchefra dives into CSS theming, explaining how to use CSS custom properties to create themes and switch dynamically between them with JavaScript, using an HSL color scheme and CSS filters to create a dark version of a light theme.
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid
HTML & CSS
By Diogo Souza,
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.
The Benefits of Using CSS Grid for Web Form Layout
HTML & CSS
By Craig Buckler,
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.
CSS Optimization Tools for Boosting PWA Performance
HTML & CSS
By Ahmed Bouchefra,
Ahmed Bouchefra shows how to use various tools and related techniques to help build a better PWA by focusing on CSS optimization — demonstrating how to remove unused CSS, inline the critical path CSS, and minify the resulting code.
CSS and PWAs: Some Tips for Building Progressive Web Apps
HTML & CSS
By David Attard,
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.
Using CSS Transforms in the Real World
HTML & CSS
By Ilya Bodrov-Krukowski,
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.