A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter) Responsive web design is here to stay. Jeffrey Zeldman's press, A Book Apart, has published a book by the name. The HTML5 Boilerplate has responsive elements built into its code base. Everybody and their uncle is promoting their new responsive web template. Why? Because responsive design allows us to address the needs of many (and conceivably all) screen sizes -- from small handhelds to tablets to desktops to giant widescreen monitors -- all with one code base.
The Magic is in the Media Query With the advent of CSS3 Media Queries, we have the ability to create CSS rules designed specifically for a variety of screen sizes. Load assets and layout styles progressively and only as they’re needed Thus, it becomes possible to produce a single "device agnostic, one web boilerplate" for your designs. It's a Beautiful Thing Then, using that reporter, we will take a first step toward converting a fixed-width grid system into a fluid and responsive grid system. What we'll do here: 1: Introduction. Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together. Adapt.js - Adaptive CSS.
Gridpak - The Responsive grid generator. Golden Grid System. GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used.
GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. Later on I developed Frameless, the last entry in my early CSS grid system saga.