CSS media queries make it possible to only apply style rules when a certain condition is true. For responsive designs, the screen width can be used as a condition to evaluate the media queries. A typical media query looks like the following:
@media (min-width: 768px) { //style rules }
The style rules inside the preceding media query will be only applied when the screen's width is equal to or greater than 768 pixels.
In this recipe, you will have to use the code from the Building a grid with grid classes recipe of this chapter. You will use the command-line lessc
compiler to create the CSS grid classes for a mobile-first responsive grid.
Perform the following steps:
Copy the
grid.less
file from the first step of the Building a grid with grid classes recipe of this chapter into a new.less
file. Set the@grid-columns
variable to4
and change the.make-cols()
and.make-column()
mixins by adding a@grid
parameter. Finally, the.make-cols()
and...