background preloader

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

Responsive Web Design just got Easier with the Responsive Grid System 960 Grid System Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .

Adapt.js - Adaptive CSS 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.

Less Framework 4 Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins. The three sets of typography pre­sets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Technically The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code seve­ral child layouts: 768, 480, and 320 px. If you think of Mobile First as progressive enhancement, Less Framework will feel more like graceful degradation; old desktop and mobile browsers will only use the default 992 px layout. To break it down, recent versions of Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as Internet Explorer 9, Android Webkit, and Mobile Safari (all iPhones, iPads and iPod Touches) will use the layout most appropriate to them. Philosophically Less Framework is simple.

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 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. Why? 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 In this short tutorial, I'll provide both a basic review (or introduction) to the basic concepts of responsive design while building a handy CSS3 Media Query Reporter which you may find handy in your future design projects. 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 2: A CSS3 Media Query Reporter 3: Toward a Fluid Grid

Related: