Don’t Overthink It Grids

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a …

(Updated on )

Crazy Town Selectors

I recently used this selector as an example in a blog post:

.article #comments ul > li > a.button {
  /* Crazy town */
}

There was a few comments to the effect that this seemed perfectly reasonable. I …

HTML for Icon Font Usage

Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best.…

(Updated on )

Using the CSS :target Selector

The CSS :target pseudo selector in CSS is both pretty cool and pretty limited in what it can do. In this article, we discuss some things it can be helpful with, its limitations, and some work arounds.
(Updated on )

Minimum Paragraph Widths in Fluid Layouts

In fluid width environments, the text that wraps around floated elements can get awkwardly narrow and trap bits of text orphaned away from the rest of the paragraph. This article explains that problem in more details and offers a few solutions.
(Updated on )

(Better) Tabs with Round Out Borders

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images.
(Updated on )

Columns and the Greatest Common Divisor

I was recently putting together some CSS for columns. There was a few pre-determined widths that the columns needed to accommodate. For whatever reason (maybe because every grid framework in the world is this way) my mind went right to …

Full Browser Width Bars

Yet another useful thing that pseudo elements can do for us: allow us to create full browser width header bars without using internal non-semantic wrappers.
(Updated on )