Chapter 5. Integrating Less in Your Own Projects

Now, it's time to integrate Less in your workflow and projects. In this chapter, you will learn how to migrate your current projects to using Less instead of plain CSS or start a new project from scratch using Less. We will discuss the techniques and tools to convert your CSS code into the Less code, and finally, you will learn how to build and use responsive grids using Less.

In this chapter, we will cover the following topics:

• Importing CSS into Less

• Migrating your projects to Less

• Starting a project from scratch

• Media queries and responsive design

• Using grids in your projects and designs

While working with Less and seeing how it addresses the problems of duplicate code and the inability to reuse your CSS, you would have wondered when you would be able to start using Less for your projects. Although this may be the most important question of this book, the answer is quite simple. You will have to start now! If you don't start now, you probably...

Importing CSS into Less

As you already know now, a valid CSS code is also a valid Less code. The CSS code can be imported into Less. There are different ways to do this. After importing your CSS, you can run the result through the compiler. This offers you an easy way to start using Less in your current project.

Consider creating a style guide before you start to import your CSS code. Style guides help you to test your code, as described in Chapter 4, Testing Your Code and Using Prebuilt Mixins Libraries. In addition, you must remember that Less is a CSS preprocessor. This means that you have to compile your Less code into CSS before taking it into production. Client-side compiling with less.js should only be used for test purposes! This is because client-side compiling may result in performance degradation and compiling the style sheets will take time. You will have to repeat the compiling process for every page request.

Only importing your CSS code, and then compiling it back into CSS again...

Migrating your project to Less

With the different import rules, you can start using Less in your project without having to change your code. After importing your CSS code, you can start defining variables and using mixins step by step. Always check the output of your new code before you start using it for production.

Tip

Remember that style guides can help you to manage the migration of your project, and you have to compile your Less code on the server side into the CSS code before you can use it in production.

Organizing your files

Try to organize your files in the same way as the preceding examples. Create separate files for your project's variables and mixins. If your project defined a style sheet in project.css earlier, your main Less file may look, for instance, like the following code:

@import "reset.less";
@import "variables.less";
@import "mixins.less";
@import (less) "project.css";

The content for the project.less file has been discussed already in the Preventing cross-browser issues...

Media queries and responsive design

Media queries is a CSS3 module and a W3C candidate recommendation since June 2012. The media queries module add the possibility to apply a style sheet to CSS only when a media query is evaluated as true. So, a media query has a condition that will be evaluated by the browser; you can compare this evaluation with an if…then statement.

A media query evaluates device's types and its features. Device's types are screen, speech, and print, among others, and its features are width, device-width, and resolution, among others.

Nowadays, the screen type and device's width play an important role in responsive web design. With the use of media queries, someone can restrict the CSS rules to a specified screen width, and thus, change the representation of a website with varying screen resolutions.

A typical media query will look like the following line of code:

@media  condition { ... }

For instance, the following media query sets the font color to black when viewport's...

Using grids in your designs and workflow

The preceding media query example did not use a grid. You may be wondering what a grid is and why you should use it. Grid-based layouts divide your design into a collection of rows with equal-sized columns. Content and graphical elements can be organized according to this layout. Grids help in creating a logical and formal structure for designs. This prevents inconsistencies between the original design and the final implementation in HTML as designers and developers work with the same grid.

Grids are also helpful in responsive design because grid's columns can easily be rearranged to fit different screen widths.

In the previous chapters, you already read about the CSS modules that defined layout structures. Flexboxes and columns can be used to define the CSS layouts and grids. Although these layouts are responsive by default or can be easily defined as responsive, they are not the common way to define your CSS layouts yet. As mentioned earlier, most...

Building your project with a responsive grid

In the preceding examples, only the grid columns were defined. This should give you a good and realistic idea of how grids work and how you can use them. A complete grid code will also define responsive containers and row classes. Most grids will also have the so-called gutters between their columns. A gutter (which is mostly fixed) is a space that separates the columns of the grid. This also means that a width spanning two columns includes one gutter. Gutters are mostly constructed with the padding or margin property. If you use the box-sizing: border-box setting, which was discussed in Chapter 1, Improving Web Development with Less, padding should be preferred.

In Chapter 4, Testing Your Code and Using Prebuilt Mixins Libraries, you learned how to reuse the Less and prebuilt mixins; you can do the same for grids. It won't be necessary to write the complete code yourself. Frameworks such as Twitter's Bootstrap, Cardinal, flexbox grid, and flexible...

Using the grid mixins to build a semantic layout

In the preceding section, you used Preboot's grid mixins to build grid classes. In the final section of this chapter, you will use these mixins to build a semantic layout.

You can use the same example that we used earlier. Before you start, you should undo the changes made in the examples with media queries. You don't need these media queries here because the grid is responsive by default.

Note

You can watch the result by visiting http://localhost/semanticgrid.html, and you will find the Less files of this example in /less/semanticgrid/.

In the current example layout, the container styles are applied to the body element. Nowadays, there seems to be no reason to add an extra div container (or wrapper). All modern browsers handle the body element as a normal block-level element. If you prefer to add an extra wrapper for some reason, please do so. A plausible reason to do so would be, for instance, to add copyrights under your layout; of course,...

Extending your grids

In the examples in the preceding section, you used one grid with one break point. Below the break point, your rows simply stack. This seems to work in many cases, but sometimes, it would be useful to have a grid for small screens as well. Imagine you build a photo gallery. On large screens, there will be four photos in a row. But for smaller screens, you don't want the photos to stack; they should be visible as two photos instead of four in a row.

Again, you can resolve this situation by using the grid classes or mixins for a more semantic solution.

In both situations, you should also make your photos responsive. You can do this by adding styles for your images. Setting max-width to 100% and height to auto does the trick in most cases. The max-width variable prevents images from being displayed wider than their original size, and it also ensures that they get 100 percent of their parent's width in other situations. On small screens, these images will get 100 percent width...

Summary

You have arrived at the end of this chapter. Hopefully, you feel that you will be able to start your own project with Less. In this chapter, you learned how to use Less for your projects. You also learned how to use media queries and grids to build responsive websites. Now, you are ready to start using Less in your projects. Finally, you will have more time for your real design tasks.

In the next chapter, you will be introduced to Bootstrap. Bootstrap is a popular frontend framework that is commonly used to implement the mobile-first and responsive designs. Bootstrap's CSS code is compiled from Less. You will learn how to use, customize, and extend Bootstrap by using Less for your own projects.