The following is a guest post by Jon Yablonski. Jon is going to show us an example of how we might approach markup such that one component is particularly versatile. It works as-is, and has a standardized way of making variations (adding a single class) that allow the design to be altered to fit the… continue reading
In this article, we will share techniques to minimize this content shifting. Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page, images load or dimensions of elements change.
Talks on the subject of modern CSS Layout, including Grid, Flexbox and Box Alignment.
In this article I’ll share some tips and advice about HTML code. Some of this guidance will be best suited for beginners – how to properly build paragraphs, use headings, or improve forms, but we will also discuss SVG sprites for icons, a somewhat more advanced topic. Text Paragraphs Most of our writing is structured… continue reading
A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) Ther
How a little BEM and cleverness can make extensive use of EMs worth doing, and how it can up your game.
The following is a guest post by Jeremy Wagner, a web developer, author, and speaker living in the Twin Cities. He’s got a new book on web performance. Her
Many techniques for cropping image thumbnails on the front-end require explicit dimensions, which is less than ideal for responsive design.
CSS frameworks can help streamline your development process by giving you a modular base foundation. In this post, we compare Bootstrap vs Foundation.
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS. Behold, the @supports rule. Also known as Feature Queries. With @supports, you can write a small test in your CSS to see… continue reading
There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let’s delve into some of the technical details of color on the web.
Drop Caps Cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat… continue reading
The negation pseudo-class, :not, can be incredibly useful. It allows us to target elements based on what attributes they don’t have, rather than what they do. This helps us avoid writing extra, increasingly specific, rules in an attempt to override previous ones. A common example of this is when we want to apply a style… continue reading
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.