Responsive layout and semantic grids

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.