Responsive Web Design and CSS Preprocessors

As we are planning to build a mobile application using web technologies, we need to build a solid foundation of tools that would help to create a design that looks great at any size.

Even though our main focus is to design the application for iPad Air, we want to build a responsive design that adapts to any screen size and delivers on great user experience across a wide range of devices (from desktop monitors to mobile phones).

“Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.”[41]

As Ethan Marcotte explains in his book Responsive Web Design [41], it takes the following core ingredients to create a responsive design:

• a flexible, grid-based layout;

• flexible images and media;

• media queries, a module from the CSS3 specification.

I do not intend to get deeper into responsive web design, but I believe it is important to keep in mind the preceding ingredients when deciding on the technologies and tools we

4. DESIGN

want to use. Based on my previous experience, creating a responsive web design for a large application can be a very challenging task resulting in complex CSS styles that grow in size and are hard to maintain. Therefore, we plan to use a CSS preprocessor and frameworks that ease the process of implementing web design in CSS.

A CSS preprocessor is a layer between the stylesheet that one authors and the^.cssfile that is provided to the server. It extends the CSS language by adding features that make the development process easier and the CSS code maintainable. [42]

Figure 4.5: Compilation of styles from preprocessor syntax to plain CSS

Sass

Sass⁶(Syntactically Awesome Style Sheets) is a meta-language on top of CSS that offers more power than is allowed by flat CSS. It comes with a simple and elegant syntax and features that are useful for creating manageable stylesheets. Moreover, Sass’ syntax is a superset of CSS3, meaning any valid CSS3 document is also a valid Sass document.

The Sass preprocessor runs on Ruby and uses a command-line program to compile Sass files, that usually use the^.scssfile extension, into CSS. Following is the list of features with example code snippets: [42, 43]

• variables – Variables are used to store any CSS value that could be reused throughout the stylesheets.

1 $primary-color: #333;

2 body { color: $primary-color; }

• nesting – CSS does not support nesting, Sass lets one nest CSS selectors in a way that follows the same visual hierarchy of HTML.

1 nav ul {

11 }

12 }

13 }

14 }

• partials and import – Partials are files that contain CSS styles that one wants to include in other Sass files. This allows stylesheets to be modularized. See Figure 4.6 for an example.

Figure 4.6: Example of Sass partials

• mixins – Mixins are reusable blocks of styles that come in very handy when it comes to vendor prefixes. They allow one to declare styles such as box-shadows or gradients once and reuse them anywhere else in the code.

1 @mixin border-radius($radius) {

2 -webkit-border-radius: $radius;

3 -moz-border-radius: $radius;

4 -ms-border-radius: $radius;

5 border-radius: $radius;

6 }

7 .box { @include border-radius(10px); }

• extend/inheritance – Extend allows one to share a set of CSS properties between one selector and another, reducing the amount of repetitive code.

1 .message {

2 border: 1px solid #ccc;

3 padding: 10px;

4 color: #333;

5 }

6

7 .success {

4. DESIGN

Sass is a powerful tool that can make complex stylesheets manageable and can significantly reduce duplicate code. Mixins, variables, and partials allow to build CSS frameworks that tend to abstract away the complexity of difficult CSS3 stacks and provide a codebase for often-repeated patterns.

Compass⁷is one such framework built on top of Sass. “Compass offers many pre-written CSS patterns, which will be updated as the properties evolve and vendor prefixes can be stripped away. Compass also makes image sprites and typographic systems easier to han-dle.” [42] For example, Compass includes a box-shadow mixin that takes four arguments and generates CSS properties with appropriate vendor prefixes. If the vendor prefixes change in the future, updating Compass handles the situation.

For example, the^box-shadowmixin provided by Compass:

1 #box-shadow-custom {

2 @include box-shadow(red 2px 2px 10px);

3 }

generates the following vendor-prefixed stylesheets:

1 #box-shadow-custom {

2 -moz-box-shadow: red 2px 2px 10px;

3 -webkit-box-shadow: red 2px 2px 10px;

4 box-shadow: red 2px 2px 10px;

5 }

Bourbon⁸ is a lightweight mixin library that offers better performance than Compass.

[44] Similar to Compass, Bourbon helps one to forget about vendor prefixes as mixins auto-matically take care of them. On the other hand, Compass is a much larger set of tools with a larger user base offering a set of helper mixins and support for CSS sprites, and comes with several extensions such as grid frameworks Susy and Singularity, or a breakpoint-slicer that eases the process of writing media queries.

7. http://compass-style.org/

8. http://bourbon.io

LESS

LESS⁹is another popular CSS preprocessor that is very similar to Sass. It supports the same set of features such as variables, nesting, mixins, and others. The main difference between LESS and Sass is how they compile documents. LESS is a JavaScript library and, therefore, it compiles documents on the client-side. This can be very handy during development, as no command line is needed to compile the documents. Like Sass, LESS document can also be compiled with a command-line program. [45]

Both LESS and Sass offer almost identical features; however, Sass has one big advantage – the Compass framework mentioned before. LESS does not provide any viable alternative to Compass, making it less robust in its functionality.

Conclusion

While CSS preprocessors are not required for development, they can save a lot of time and make the development of complex applications much easier and more maintainable. I briefly described the two most common CSS preprocessors – Sass and LESS. Although they both offer similar functionality, Sass can be extended by the Compass framework, which provides many useful features. Therefore, we decided to use Sass with the Compass framework for our project.