Any typesetter, who faced the next task of imposing an adaptive layout, needs grids. In most cases, the good old bootstrap is taken, and in html-ke divs begin to appear with classes of the form col-xs-6 col-sm-4 col-md-3 . And everything seems to be good and fast, but in this approach there are often a lot of pitfalls. In this article we will look at these pitfalls, and we throw rotten tomatoes on our work for trouble-free nets.

Problems

Custom mesh

So, our typesetter has very little time, the layout is on fire, everything must be done yesterday. Therefore, it takes for the base a popular css-framework bootstrap, and begins its work. And here, in the middle of work, he suddenly stumbles upon a block of banners "5 in a row." Anyone who has worked with bootstrap knows that his default grid is 12-fold, so you can’t make 5 columns in a row with a standard bootstrap mesh. Yes, of course, in the bootstrap, you can assemble an arbitrary grid, but it’s time to lose, download dependencies, collect less (and we, say, write to sass).

Can connect any library for custom grids? In general, this is a good way out, the only disadvantage of this approach is that almost all of them are designed either for a long and tedious writing of @media(min-width:){} , or generate their own set of classes, with lots of col15-xs-offset-3 , which fall into the final css-ku.

Therefore, with high probability, the layout designer will simply register all styles manually (there, in principle, there is not much to write).

The need for a set of breakpoints

Very often, the standard bootstrap grid lacks additional breakpoints, i.e., there are xs, sm, md, lg - all of them up to 1200px width. But what about the big monitors? Any breakpoint xl at 1600px and ask in the standard set. But again it does not exist, and the same solutions arise as in the previous paragraph. But there can be a lot of control points - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Redundancy and verbosity

And here we smoothly approach the next problem. Imagine that you need to register your block size for each grid, then you will get something like this:

 <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div> 

Is it too much? Add to this the possible pull / push and visible / hidden and then you can safely begin to go crazy. But all these classes are written in css, imagine how many classes you need to register in css for all combinations of the 60-fold grid!

Separation of styles from markup

Any typesetter knows that inline styles are bad. So why do we write styles to the markup classes? col-xs-6 , visible-sm and god forbid text-right are all styles, and if you need to make changes to the layout that is already stretched on the layout, you will have a problem that the coder will have to ask the backend-changer to change col-sm- 6 on col-sm-4.

Overlapping unnecessary styles

Often, the css-framework connects all just for the sake of grids and a couple of small functions, which ensues later in an excessive reset of styles and the double size of the resulting css. For example, the entire bootstrap.min.css is connected, and then the shadows and the rounded corners of .btn, .form-control and the like are fun and defiantly removed, including :hover, :focus, :first-child .btn, .form-control :hover, :focus, :first-child . As a result, instead of helping, the framework begins to interfere. Not to mention the often unnecessary features, like .glyphicon . Of course, again you can collect bootstrap from what you need, but this is again time.

Other standards and code-style

Suppose a coder studied BEM and began to apply it. But the need to use bootstrap dictates its exceptions - in it all classes are written with a hyphen, not following the principles of BEM. And then there is the problem of choice - either to put up with a mess in the class names ( btn-block disabled component__btn component__btn_disabled ), or still throw out the bootstrap.

Outdated methods

As you know, the mesh in the bootstrap 3 is based on float-ah. What often causes problems, one of the most frequent is the different height of the blocks, as a result of which a beautiful grid "breaks". Stop using floats for other purposes, all browsers that don't know how to flexbox are almost extinct!

Susy! Is this the way out?

In search of a solution to all the problems listed above, I came across a wonderful Susy grid framework ! , overall very good. But I did not have enough speed, because Susy! offered to describe the columns for each breakpoint separately:

 .col { @media (min-width: 768px) { @include gallery(4 of 12); } @media (min-width: 1200px) { @include gallery(3 of 12); } } 

That is susy! assumes that you will be engaged in break-points independently. Also susy! He does not write for you display: flex for the lines, you need to remember to prescribe them yourself. Indents between columns in it are set only relative (to make fixed in pixels will not work). Also, he recently learned flex, and before that he built grids on float and :nth-child() . In general, susy! This is good, but I would like the speed and ease of describing the grids for all breakpoint, as was the case with bootstrap.

The search for other grid systems also did not give much result - all either follow the susy! Path, forgetting about breakpoints, or go along the bootstrap path, providing a set of generated classes for taxiing with grids in html.

Cycling

So, it was decided to write something of their own, as a result a fast-grid was born. It also, like susy, is built on sass. What are the main advantages it provides in comparison with other solutions, in particular, with susy !? First of all, the speed due to the smaller amount of code, take the standard bootstrap example:

 <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div> </div> 

Using fast-grid, such a grid is very easy to describe:

 @import "~fast-grid/fast-grid"; .row { @include grid-row(); } .col { @include grid-col(6 4 3 2); } 

https://codepen.io/PaulZi/pen/EvPbWK

Let's now go over our shortcomings and see how fast-grid solves all these problems.

Custom mesh

Easy:

 @import "~fast-grid/fast-grid"; .cols { $grid: ( gap: 5px ); @include grid-row($grid); &__item { @include grid-col(12 6 null (1 of 5), $grid); } } 

https://codepen.io/PaulZi/pen/gxPXJq

The need for a set of breakpoints

 @import "~fast-grid/fast-grid"; .cols { $grid: ( breakpoints: ( xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px ), columns: 60 ); @include grid-row($grid); &__item { @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); } } 

https://codepen.io/PaulZi/pen/XaXVmg

Redundancy and verbosity / Separation of styles from markup

fast-grid is a grid framework for use in css, and not in html based on generic sets of classes. Due to this, the markup becomes separated from the styles, which has a beneficial effect on further support. Also because of this, there is no need to generate a bunch of helper classes ( .col-xs-push-4 , etc.) that are not used for the most part.

Overlapping unnecessary styles

Since fast-grid is a set of mixins, it does not generate any rules in css itself. Therefore, here you will not encounter the fact that the framework stylizes elements as you do not need. Anyway, these are only meshes, and nothing more.

Other standards and code-style

fast-grids are mixins that you should use inside your classes, with names that you prefer. Do you like BEM? No problem!

Outdated methods

The default is flexbox, which opens up many possibilities and solves the problems of classic float. For example, you can easily change the order of the columns.

In the example below, we display the sidebar below the main content for the mobile version, and make it the first block on large screens .

Of course, this could be achieved with the help of pull / push for float, but it is very crutch.

Conclusion

In general, the task set for me was completed - now the grids for me no longer cause any problems, and the layout is quick and easy. You can read more about fast-grid features in the repository and see examples:

Github
Examples

Are you still using bootstrap? Then we go to you!