Responsive layout and semantic grids

2013-02-27    Filed under programming, Tags css web responsive compass sass

Responsive layout is a technique to display web pages properly in all display sizes, (desktop, tablets, mobile phones,...). As the screen size goes changing, the size of fonts, layout of text, images and everything changes to adapt to the device.

Although you could write responsive CSS code directly using media queries doing so is very hard because of the different implementations of CSS in different browsers.

The best approach is to use a CSS framework that is capable of responsive layout. They make it easy to produce consistent results among browsers and with much less effort. Most of the times a grid of columns is used to simplify distribution of contents over the page.

The only problem with this approach is that it forces you to introduce classes in the HTML code that assign the width or number of columns for each content piece. The number of columns is embedded in the name of the CSS classes assigned, so the HTML ends up being not non-semantic but including presentation information too.

This is a very bad practice, just imagine you change your mind afterwards and want a different layout. You would have to edit the HTML or modify the code that generates it. It would be much better to just assign meaningful names to the classes (semantic names like title, article, aside,...).

Then , you can assign in the CSS the properties for each class name. For example you could assign the width for the aside class. But instead of written the CSS code directly, you write this description in a preprocessor language like Sass or Less and compile it to generate the real CSS.

This languages are higher level than CSS and the description of presentation becomes much simpler, cleaner and shorter. It is easier to maintain and modify also. The generated CSS code can be quite complicated to write by hand and works well across all browsers.

Compass is an open-source CSS Authoring Framework. It is the software that compiles the sass code into CSS. It provides many mixins (snippets of reusable code that allow more powerful use of CSS) for Sass. Many CSS frameworks also include plugins that make it possible to use them from Compass.

This way you have it all: the best of CSS frameworks (fast, easy to use, good appearance) but keeping a semantic approach, separating content from presentation.

Compass and Sass

To install Compass in Archlinux use the command (it is in the AUR):

Some Compass references:

Blueprint

Blueprint is a CSS framework that is part Compass (it is included as a module). It can be responsive using the blueprint grid and also have a liquid layout that adapts to the screen width. It can be combined with all the mixins included with Compass.

See the Compass's documentation for Blueprint module. Here you can fin more Blueprint resources or a Blueprint manual in spanish.

Foundation

Foundation is a complete CSS framework with focus on responsive layout. It can be used by itself, without Compass, but it has a set of Compass mixins. See the Compass gem for Foundation, the sass modules and the Foundation mixins.

Bootstrap

Bootstrap is the CSS framework of Twiter. Its focus isn't in responsive layout but in general presentation, but it has a grid that can be configured to be "responsive".

Bootstrap is built with Less, not with Sass. But versions exists that implement it with sass and make it possible to use it from Compass. See:

Some more info on Bootstrap:

Susy

Susy is a responsive grid for Compass more than a complete CSS framework. There is an interesting feature called off-canvas that allows to show or hide side panels and can be useful for mobile devices.

To install Susy run the command (as the same user that will be using Compass):

And check that compass and compass-susy-plugin are installed.

The create a new project with:

More info:

HTML5 Boilerplate

HTML5 Boilerplate also has responsive layout, but is fixed CSS, no semantic grid possible. However, there are some project forks implementing the library with LESS:

Initializr

Initializr isn't a framework but a web page to create a customized CSS project from scratch using some frameworks or templates. The templates that can be used are HTML5 Boilerplate, Bootstrap and a responsive-template.