We’ll now look at two methodologies for naming things in CSS: Block-Element-Modifier (better known as BEM) and Atomic CSS.
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.
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 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.
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.
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.
In this article, Cláudio Ribeiro looks at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.
Craig Buckler shows how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS, covering transform, translate, rotations, scaling, perspective and more, along with z-index, browser gotchas, and ideal use cases.
Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.
Christian Krammer walks you through the basics of Flexbox, showing how you can use flexbox to lay out specific page elements, and also how flexbox can serve as a handy fallback method in browsers that don't yet support CSS Grids.
Ahmed Bouchefra introduces key Bootstrap CSS classes for building layouts with the Bootstrap grid system, along with a quick introduction to using Flexbox.
Zeeshan Chawdhary demonstrates how to use Bootstrap with Vue.js, using Bootstrap-Vue to replace Bootstrap’s dynamic components' reliance on jQuery.
Manjunath M. shows how to combine Bootstrap with React, exploring tools for building a UI with Bootstrap’s look and feel in a React-powered web application.
Ahmed Bouchefra shows how to bring together Bootstrap and WordPress, creating a simple WordPress theme that integrates the latest version of Bootstrap.
Ilya Bodrov explains the purpose and usage of Bootstrap utility classes, digging into some of the best of them and where you’ll find them most useful.
Craig Watson explains how to set up a responsive type scale with Bootstrap, so that your site’s typography will scale responsively on all devices.
Maria Antonietta Perna uses some jQuery and the Animate.css animations library to add some extra subtle visuals to the slides in the Bootstrap carousel.