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

Extending your grids

In the preceding examples, 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 will be useful to have a grid for small screens as well. Imagine that you build a photo gallery. On large screens, there will be four photos in a row. For smaller screens, the photos shouldn't stack but show up with two instead of four in a row.

Again, you can solve this situation using 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 ensures that they get 100 percent of their parent's width in other situations. On small screens, these images will get 100 percent width of the viewport.

To make your images responsive by default...