Book Image

Less Web Development Essentials

By : Bass Jobsen
Book Image

Less Web Development Essentials

By: Bass Jobsen

Overview of this book

Less is a CSS preprocessor that essentially improves the functionality of simple CSS with the addition of several features. The book begins by teaching you how Less facilitates the process of web development. You will quickly then move on to actually creating your first layout using Less and compiling your very first Less code. Next, you will learn about variables and mixins and how they will help in building robust CSS code. In addition, you'll learn how to keep your code clean and test it by using style guides. We will then move on to the concept of Bootstrapping and the strength of using Less with Twitter Bootstrap. Going one step further, you will be able to customize Twitter's Bootstrap 3 using Less. Finally, you will learn how to integrate Less into your WordPress themes and explore other web apps that use Less. By leveraging this powerful CSS preprocessor, you will be able to consistently produce amazing web applications while making CSS code development an enjoyable experience.
Table of Contents (15 chapters)
Less Web Development Essentials
About the Author
About the Reviewers

Other frameworks to build your grid with Less

In the preceding section, you learned how to use Bootstrap and Semantic UI to build complete frontends. In practice for many projects, only a grid will be enough to start. You have seen that Semantic's grid can be compiled easily as a single component. Also, Bootstrap's grid can be compiled as a single component using the following code snippet:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "grid.less";

Alternatively, you could also use another grid system. Some of them are discussed in brief in the following sections.

Using the Golden Grid System to build your grids

The Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid; this leaves 16 columns for your design. More details about this grid system can be found at

GGS comes with a Less file to compile the required...