Hello everyone! Today we will talk about that what is Grid Systems (grid system) or simply flexible mesh in adaptive layout.
First, we will give the definition of what is Grid System.
Grid System - Collection of classes based on classes that allow the user to control the page layout using a row and speaker system.
Imagine that we have a blog page. It is divided into 2 columns: on the left the main part, and on the right - sidbar. Let's try to create a flexible grid for such a page.
Well, for beginnings, we must do though elementary, but hTML. markup.
Here we have a block that contains the entire page, it lies a block with a blog in which 2 blocks are lying: the main part of the page and Saydbar.
So, our whole page will be the size 960px. The entire grid is divided into 12 columns 69px. Each. Part for blog will be width 900px. The main part of the page will be 566px, Sidebar - 331px.
That's what we get in the end
#page (
Margin: 36px auto;
width: 960px;
}
Blog (
Margin: 0 AUTO 53PX;
width: 900px;
}
Blog.main (
Float: Left;
width: 566px;
}
Blog.sidebar (
Float: Right;
width: 331px;
}
Everything is good, but as you can see, all this is static, set in pixels. We want our grid to change their dimensions depending on what screen the page is visible, therefore, we need to set everything in percent. Let's do it.
For this there is still the same formula as for fonts
target / context \u003d result
We translate the block of the entire page from pixels percent.
#page (
Margin: 36px auto;
width: 90%;
}
90% It is chosen by the fact that in this case we will also have indents on the edges of 5% . However, you can choose another value.
We use our formula: 900 / 960 = 0.9357
I will multiply the result 100 to get interest and wept in our cSS..
Blog (
Margin: 0 AUTO 53PX;
Width: 93.75%;
}
The same needs to be done with columns, but note that the context has changed. Because columns are inside a class block .blog, it will be a context. Let's consider.
566 ÷ 900 \u003d .628888889
331 ÷ 900 \u003d .367777778
We translate everything into interest and write to the style sheet.
Blog.main (
Float: Left;
Width: 62.8888889%;
}
Blog.sidebar (
Float: Right;
Width: 36.7777778%;
}
That's all! Now we got a flexible grid and can use it when laying.
As you can see, everything is very simple. At the heart of the flexible grid, like a flexible font, is all the same formula, remembering which you can easily disperse adaptive sites.
The note! As you can see, we have quite long percentages. Some can advise you to round them, but this is not necessary for this! Remember!
And I have everything on it, thanks for your attention and successful adaptive layout!
We continue the topic adaptive layout. Today we will talk about one of the three whales of adaptive layout - mesh-based layout Flexible gridbased layout). Two others are flexible images (Flexible images).
In the middle of the 20th century, graphic designers popularized the concept typographic, or modular, grid - rational system of columns and rows in which modules can be placed with content. It looked is fresh and very harmonious.
However, graphic design and web design is, as they say in Odessa, two big differences. Key moment Here is the page size. In the printing version it is fixed, and the web page can stretch and shrink depending on what is viewed on.
To apply a modular grid to a web page, use a simple proportionality formula:
tARGET / CONTEXT \u003d RESULT
Understand this formula is the easiest way on a visual example. Suppose we have a drawn site layout in two columns - the content part and Sidebar:
We chase it "Rubber". But here is the problem: how to set the width of both blocks? After all, if they prescribe it in pixels, they will not be rubber. So you need to use interest, not pixels. But let me, what values \u200b\u200bto write something? Anyway, you need to repel from something.
You can, of course, figure out: The content occupies about 70% of the total width of the page, and Saydbar is 30%. But the right benchman never and does not pretend to the eye. We need accurate size.
That is for this and serves the very formula of proportionality. We just take the width of the internal blocks and divide it on the overall width of the page. Here the whole page is context., and each of the internal blocks, respectively, target. From the above formula.
660 / 960 = 0,6875
300 / 960 = 0,3125
It remains only to translate this data into interest. Not very bothering, just shifting the comma on two signs to the right. We get:
68,75%
31,25%
That's just just. However, let's complicate the task. Suppose we have the content part are still divided into two unequal parts. For example, on the left, the narrow column with the date of the article and the social buttons located vertically, and the right column is wide, and we have the text of the article.
From the design layout, we know that the width of this narrow column is 120 pixels, and a wide 520. How to translate these numbers in%? Again, apply the proportion formula. But this time we use the entire width of the page as context, and the width of that block, which includes these two columns, that is, the content width, which we have 660 pixels. We divide:
120 / 660 = 0,1818
520 / 660 = 0,7878
In percent, we obtain, respectively, 18.18% and 78.78%
By the way, in modern style files that use adaptive layouts, the correct verses add similar calculations as comments. For better visibility. This is how it usually looks like:
Content (
Width: 68.75%; / * 660px / 960px * /
}
I hope there was no difficulty with this. Let's go further!
Mesh-based
The examples discussed above are, of course, not yet a grid. Well, what is the mesh of two columns? The real modular grid is designed to help and designers and cameras to create complex sites with a variety of columns and individual blocks.
Therefore, there was a lot of convenient services and tools that implement this method easily and simply. For example, 960.gs. Here you can not only clearly explore the principle of markup based on the modular grid, but also download templates and use them.
In fact, such services are now a pond of a pride! They are also called frameworks. Choose what will like it. Here is an excellent selection of 30 CSS frameworks for adaptive web design.
Why do you need these modular grids?
First of all, modular grids are needed in order to visually streamline content on the site page. This not only from aesthetic point of view is beautiful and pleases the eye of the user, but also convenient to the developers themselves. Especially if the site is really complex in structure and content.
In addition, such modular grids are much easier to make adaptive than randomly scattered blocks of different sizes.
Well, of course, the speed of development of such sites is much higher. You do not need to fool and reinvent the bike from scratch. It is enough to choose the appropriate framework and brack the site.
I hope now you know what adaptive layout is based on the modular grid.
Next time let's talk about flexible images in the adaptive layout. Very important and not unambiguous theme. I recommend it too to learn good things so as not to get to come. Stay in touch! And even better to subscribe to the newsletter of the webcose blog.
When it comes to choosing a grid, many options appear. Below are (and not only) that you can freely use in your projects. These CSS grids will help you quickly create a wonderful responsive site. At the end of the article, a table is given in which the grids described below are compared.
1. Skeleton.
Skeleton. It is a set of CSS files, plus a PSD template for web designers. These files, by the plan of the authors of Skeleton, will help you create a responsive layout. Skeleton also has a discharge of styles, which is convenient. By default, the skeleton is based on a 960px grid (under 980px width monitors), the skeleton blocks have a fixed width; Blocks adjust to the browser due to space around the site; When changing the browser window, the horizontal scroll does not appear.
Since the blocks of fixed width, then such a grid can be called adaptive, not responsive. I can hardly use it.
2. Simple Grid.
If you are minimalist, then this grid will be suitable for you. The default grid width exceeds 1140px. According to the authors of the grid, make a website with a smaller maximum width incorrectly. Unlike Skeleton simpleGrid behaves responsive and satisfies the concepts of responsive design. As already mentioned, the maximum width of the mesh is 1140px, but it is not possible to change this value, since all the grid blocks are asked as a percentage: that's what a responsive design means! In the CSS file itself, the media register is only one:
@Mediahandheld, OnlyScreenand (max-width: 767px), which can be noted as a flaw.
In principle, the thing is convenient, but when developing, most likely, it will have to refine.
Simple Grid is the basis for a light grid, while simple grid is not a CSS framework. The simple grid has no styles for buttons, tables, fonts, etc. SIMPLE Grid works with two various types Grids. There is a mesh for content that looks like
and a mesh for a layout that looks like . Simple Grid also supports responsive layouts. The grid has rubber speakers, also the grid changes its dimensions depending on the size of the browser window. For mobile devices The grid builds its own columns in the form of a stack, one for another.Settings Simple Grid.
The main SIMPLE GRID settings are similar to any other grid. First you need to wrap your grid in DIV with the GRID class. If you want the grid to indent (Padding) in 20px, add the GRID-PAD class. Then, based on your mesh preferences, add the desired classes. For example, if you want a grid with a left column and the main unit (for content), use the following code:
HTML.
If you want to get with 4 columns (for content), you can use such a code:
HTML.
The first column (for content) in our mesh is always made by floating relative to the left edge of the wrap block. If you want to make a column of floating relative to the right edge, add a Push-Right class.
Based on Simple Grid, for example, CSS-Tricks ...
Articles in the topic:
- translation of the article "DON'T OVERTHINK IT Grids" on Habhara.ru - mesh without problems
3. PROFOUND GRID.
Profound Grid. Allows you to accurately display the layout in most browsers. How could they achieve such progress for a responsive layout? Profound Grid uses negative fields when calculating columns.
4. Griddle
Griddle (GitHub.com/necolas/Griddle) is a grid for web designers oriented to modern browsers (IE8 +). The CSS file is generated using SASS functions and impurities. The use of inline-block and box-sizing properties provide a layout of new features compared to layouts based on floating blocks. Disadvantages: the grid does not have a CSS file, only SASS; Download an example is impossible; Sass only.
5. EXTRA STRENGTH RESPONSIVE GRIDS
If you feel that other CSS grids limit you if your priority is complete control of how your responsive layout is adapted to various screens, if you are concerned about the names of classes in your CSS, you may be useful. Extra Strength RESPONSIVE Grids.
6. Proportional Grids.
This CSS solution solves the problem, very often occurring when the scaling of our layout, namely, the disproportionate size of the grooves for various viewing areas. Proportional grids allow you to use fixed sizes for your gutters, while at the same time leaving the ability to use rubber columns (columns).
The author's idea is as follows: the author uses the Box-Sizing property, which allows you to create fixed gaps together with columns. The distance between the columns is the same for each specific point of the stop and depends on the base size of the font.
7. Neat.
Description will appear later
8. CSSWizardry-Grids
Description will appear later
9. Dead Simple Grid
Description will appear later
10. Responsive Grid System
Description will appear later
Nowadays, there are frameworks for everything, and it seems that only you figure it out with one, as another will be replaced by another. This is especially true for CSS frameworks for an adaptive grid, and everyone calls themselves "best." Such an excess of information introduces confusion.
Let's go back to a step back, we will take a deep breath, and ask yourself: Are we going to use all the 24 options, and a million of their combinations that we provide "This Bigheel Freasonwork"? Often, we need a simple, flexible solution, with a limited number of variations, with a code base, which we can expand at any time. I want to tell about four techniques for implementing CSS grids, each of which is easily expanding. These are these four ways:
- Adaptive grid markup number 1 (using negative indents)
- Adaptive grid markup number 2 (using BOX-SIZing: Border-Box)
- Adaptive grid markup based on tabular display
- Adaptive mesh markup based on FlexBox
I simplify the description of these methods, and I will use the minimum number of simple and understandable CSS. For each method, a demonstration on CodePen will be presented.
General CSS.
Before deepening in the description of each method, let's take a look at the common styles that we will use in all examples. I will use the ad Box-Sizing: Border-Box for all document items, as well as add a class.clearfix to clean the floating blocks. Here are our basic CSS:
/ * Reset properties * / *, *: Before, *: After (BOX-Sizing: Border-Box;) .clearfix: After (Content: ""; Display: Table; Clear: Both;)
Method 1: We use negative indents
This method is based on the use of negative indents to create a fixed indent grid blocks between blocks. The size of the negative retirement varies from the position of the block in the grid, and the distance between the blocks remains constant. Let's look at the markup:
/ * Mesh * / (Margin-Bottom: 20px;): Last-Child (Margin-Bottom: 0;) () @media all and (min-width: 768px) (/ * All Cols Margin * / (Margin-Right : 20px;): Last-Child (Margin-Right: 0;) / * We make the speakers adaptive * / .col-1-2 (float: left; width: 50%;) .col-1-4 (float: left ; width: 25%;) .col-1-8 (float: left; width: 25%;) / * 2 span rows * / .row-2 (Padding-Left: 20px;) .row-2: first- Child (margin-left: -20px;) / * 4 span rows * / .row-4 (Padding-left: 60px;) .row-4: First-Child (Margin-Left: -60px;) / * 8 span Rows * / .row-8 (Padding-Left: 60px;) .row-8: NTH-Child (4N + 1) (Margin-left: -60px;) .row-8: NTH-Child (5N-1) (Margin-Right: 0;) .row-8: NTH-Child (6N-1) (Clear: Both;)) @Media All and (min-width: 1200px) (/ * adjust width * / .col-1 -8 (float: left; width: 12.5%;) / * 8 span rows * / .row-8 (Padding-Left: 140px;) / * Reset These ... * / .row-8: NTH-Child ( 4n + 1) (margin-left: 0;) .row-8: NTH-CHI LD (5N-1) (Margin-Right: 20px; ) .Row-8: NTH-Child (6N-1) (Clear: none;) / * and add this * / .row-8: NTH-Child (1) (margin-left: -140px;))
As can be seen, within the framework of media register conditions, the fixed value of the retardation (call it x) is multiplied by the number of columns in the line minus 1 (N-1), and this indent is applied to the line on the left. Each column, besides the latter, a fixed retreat of the right (X) is set. A first column in the string is given a negative indent (N-1) * x
Disadvantages and mistakes
The need for some calculations, besides, the method becomes impracticious with increasing the number of columns. In addition, with an increase in the number of steps (the number of gradations of media registers, for example, 1 column on a string, 4, 8 ...), we need to reset CSS, and you have to use many mathematical calculations.
Another interesting mistake pops up when we have a lot of floating elements. The total amount of indents at some point can be combined, and the elements will be transferred to new string. This can be seen in the case of 8 columns. If you change the condition of the last media request to a minimum width, less than 1200px, then this bug can be observed in action. Remember this. But this method has its advantages.
Advantages and use in practice
The present charm of this method is to create a fixed / alternating grid combinations. As an example, let's imagine the area of \u200b\u200bthe main content of the width variable, and the additional sidebar area of \u200b\u200bthe fixed width. Our HTML code may look something like this:
Primary.
Lorem Ipsum Dolor ...SECONDARY.
Lorem Ipsum Dolor ...And CSS - like this:
/ * Marking * / .primary (Margin-Bottom: 20px;) @Media All and (MIN-WIDTH: 600px) (.container (Padding-Right: 300px;) .primary (Float: Left; Padding-Right: 60px; width: 100%;) .secondary (Float: Right; margin-right: -300px; width: 300px;))
And here is the demonstration of code in action on Codepen:
Method 2: Use Box-Sizing: Border-Box
This method uses the power of Box-Sizing: Border-Box. Since this property allows you to add an element to the field without influenced by the value of the total width of the element, we can still achieve a flexible grid with fixed "retreats". But here instead of using the Margin property, we will use internal fields that will play the role of indents between the grid elements.
Marking:
Here we will bypass without dizzying mathematics, so our CSS will be really simple. And here he, with the possibility of marking up to 8 columns:
/ * Mesh * / .row (Margin: 0 -10px; Margin-Bottom: 20px;) .row: Last-Child (Margin-Bottom: 0;) (Padding: 10px;) @media all and (min-width: 600px) (.col-2-3 (float: left; width: 66.66%;) .col-1-2 (float: left; width: 50%;) .col-1-3 (Float: left; width: 33.33%;) .col-1-4 (float: left; width: 25%;) .col-1-8 (Float: Left; Width: 12.5%;))
Negative right and left indents each string is needed to compensate for column fields. On the specified media request, the minimum width of our grid elements take their own width, and become floating inside their containers. You can change this width at your own discretion, or specify other media requests for various groups of grid elements.
Expand this method:
Let's say, you would like to make items. COL-8 first embarked in 4 per line, and then 8. It is quite easy to implement if you think about a little. For the above marking, our CSS will look like this:
@Media All and (MIN-WIDTH: 600px) (.col-1-8 (float: left; width: 25%;) .col-1-8: NTH-Child (4N + 1) (Clear: Both;) ) @Media All and (min-width: 960px) (.col-1-8 (width: 12.5%;) .col-1-8: NTH-Child (4N + 1) (Clear: None;))
Method 3: Use a tabular display
This method implements an old-good table behavior, but does not break the semantics or structure. In this method, visible items are displayed as default as blocks. But with certain sizes of the row of the grid become tables, and the columns become table cells. Let's take a look at the markup - it looks like a similar one of the second way, but here we do not need .Clearfix:
And, accordingly, CSS:
/ * Mesh * / .row (Margin: 0 -10px; Margin-Bottom: 10px;) .row: Last-Child (Margin-Bottom: 0;) (Padding: 10px;) @media all and (min-width: 600px) (.Row (Display: Table; Table-Layout: Fixed; width: 100%;) (Display: Table-Cell;) / * SET COL WIDTHS * / .col-2-3 (Width: 66.66%;) .col-1-2 (width: 50%;) .col-1-3 (Width: 33.33%;) .col-1-4 (width: 25%;) .col-1-8 (Width: 12.5% ;))
This method may seem confusing, but it has advantages. To begin with, we do not break the semantics using traditional tables, and we do not need to clean the floating blocks. The columns of the same height are easy. Combination of fixed columns and columns of a variable width? No problems. The table of display brings its problems, and from all four ways he is my most unloved. Despite the fact that in some cases it is a good option.
Method 4: FlexBox
The last way I will describe uses the FlexBox module. According to MDN:
CSS3 Flexible Box, or FlexBox - layout mode that allows you to place items on the page so that they behave predictably on various screen sizes and various devices.
Flexbox offers many different features that give us a powerful arsenal of various layout options for elements. Make the Flexbox module adaptive easier than simple. As before, our markup looks like this:
And now let's look at our new CSS:
/ * Grid * / .row (Display: Flex; Flex-Flow: Row Wrap; Margin: 0 -10px; Margin-Bottom: 10px;) .row: Last-Child (Margin-Bottom: 0;) (Padding: 10px ; width: 100%;) @media all and (min-width: 600px) (/ * SET COL WIDTHS * / .COL-2-3 (Width: 66.66%;) .col-1-2 (Width: 50% ;) .col-1-3 (width: 33.33%;) .col-1-4 (width: 25%;) .col-1-8 (Width: 12.5%;))
In this case, the Display property must be set to Flex, as well as specify the Flex-Flow property. The full definition and description of these properties is available in the MDN documentation to FlexBox. For a media request, we simply change the width of the columns, and FlexBox does the rest for us.
Conclusion
We reviewed 4 ways to create adaptive grids on CSS, each with their advantages and disadvantages. There is no absolute way to implement a particular action, and I often catch myself on the fact that there are situations when one way is suitable better than the other, or I need to combine several options. Methods 1 and 2 are my favorite, and I often use them in my projects (the main markup according to the method 1, and adaptive grids according to the method 2).
As mentioned earlier, the third method has its advantages, but I prefer to use tabular layouts only when it is strictly necessary. Method 4 is beautiful, and I can't wait for the day when I can transfer it to all my projects. FlexBox is gaining momentum, but it is supported only in IE10 and higher. There are polyfillas for him, but I prefer to do without them. Although today there are scenarios in which FlexBox will be an excellent solution (for example, in mobile browserswhere there is no IE).
Each of these methods easily scaling and expanding. Using the ideas presented you can easily configure your own adaptive layout with the desired placement for mesh elements with a minimum CSS. Module CSS grids on the approach, but will take some time, as long as we can use it. I hope you liked the article, and you are not so scary to use CSS mesh.
To any vertellor, in front of which the next task in the layer of adaptive layout, needs grids. In most cases, the good old bootstrap is taken, and DIV-I begin to appear in HTML-KE with classes of COL-XS-6 COL-SM-4 COL-MD-3. And everything seems to be fine and quickly, but in this approach often arises many pitfalls. In this article, we will look at these pitfalls, and we throw fucked tomatoes. Consider my craft for trouble-free grids.
Problems
Non-standard grids
So, our license plate has very little time, the layout is burning, everything must be done yesterday. Therefore, he takes a popular CSS-framework Bootstrap, and starts his work. And then, in the middle of work, he suddenly stones on the block of banners "5 in a row". All who worked with Bootstrap knows that its default mesh is 12-fold, so 5 columns in a number of standard bootstrap grid will not do anything. Yes, of course, in the bootstrap, you can collect an arbitrary grid, but this time is to lose, download dependencies, collect a less-ki (and we, let's write on Sass).
Can you connect any library for custom grids? In general, this is a good output, the only minus of this approach, that almost all of them are designed either for a long and tedious spelling @media (min-width :) (), or generate your set of classes, with a bunch, probably not necessary col15-xs Offset-3, which will fall into the final CSS-ku.
Therefore, with a high probability, the tableger will simply write all the styles manually (there, in principle, not so much to write).
Very often in the standard bootstrap grid there is not enough additional breakpoints, i.e. there is XS, SM, MD, LG - all of them to 1200px width. What about big monitors? Some Breakpoint XL at 1600px as well as asking for a standard set. But it is no again, and the same solutions arise as in the previous paragraph. But because control points Maybe a lot - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..
Redundancy and multi-resistance
And here we smoothly approach the next problem. Imagine that you need to register for each grid your block sizes, then you will get something like this:
Isn't there too much? Add here Pull / Push and Visible / Hidden and then you can safely begin to go crazy. But all these classes are spelled out in CSS, imagine how much you need to register classes in CSS for all combinations of a 60-fold grid!
Style separation from marking
Any trigger knows that inline styles is bad. So why do we write in the classes of markup what concerns styles? COL-XS-6, VISIBLE-SM And God forbid Text-Right - it's all styles, and if you need to make edits in the already stretched on the list, it will be necessary to make a problem that the nipple will have to ask the backend-pin to change the col-SM 6 on COL-SM-4.
Overlapping unnecessary styles
Often the CSS framework connect all only for the sake of grids and pairs of small functions, which subsequently flows out in excessive styles and double size of the final CSS. For example, the entire bootstrap.min.css is connected, and then the tunes and rounded corners of U.BTN, .form-Control, and the like, including: Hover,: Focus, are fun and zerny, including: Hover,: Focus,: First-Child. As a result, instead of help, the framework begins to interfere. Not to mention often not necessary features, by type .Glyphicon. Of course, again, you can collect Bootstrap from what is needed, but this is again time.
Other people's standards and Code-Style
Suppose the projeser studied BEM and began to apply it. But the need to use bootstrap dictates their exceptions - in it all classes are written through a hyphen, without following the principles of BEM. And then the problem of choice arises - either to accept the messenger in the names of the classes (BTN-Block Disabled Component__BTN COMPONENT__BTN_DISABLED), or still throw a bootstrap.
Outdated methods
As you know, the grids in bootstrap 3 are based on Float-ah. What often causes problems, one of the most frequent - different height of blocks, as a result of which a beautiful grid "breaks". Enough to use the float-s no intended purpose, almost extinct all browsers who do not know how FlexBox!
SUSY! - Is this a way out?
In the search for solutions of all the problems listed above, I am on a wonderful grid framework SUSY! In general, very good. But I lacked speed, since SUSY! offered to describe 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! It assumes that you will deal with breakpoints yourself. In addition, SUSY! He himself does not write for you Display: Flex for, lines, you need to not forget to prescribe them yourself. The indents between the speakers in it are set only relative (make fixed in pixels will not work). Also, he recently learned Flex, and before that he built nets on Float and: NTH-child (). In general, SUSY! It is good, but I would like the speed and light description of grids for all breakpoints, as it was with Bootstrap.
Search for other grid systems also did not give a particular result - all either go along the way SUSY! Forgetting about BreakPoints, or go along the bootstrap path, providing a set of generated classes for meshes in HTML.
Bicycle building
So, it was decided to write something my own, as a result, Fast-Grid was born. He also, like SUSY, built on Sass. What major advantages does it provide compared with other solutions, in particular, with SUSY!? First of all, at the expense of a smaller code, take a standard bootstrap example:
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);)
Let's now go through our shortcomings, and see how Fast-Grid solves all these problems.
Non-standard grids
@import "~ Fast-Grid / Fast-Grid"; .cols ($ grid: (GAP: 5PX); @include grid-row ($ grid); & __ item (@include grid-col (12 6 null (1 of 5), $ grid);))
The need for your BreakPoint
@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);))Redundancy and verification / styling styling
fast-Grid is a grid framework for use in CSS, and not in HTML based on the generic sets of classes. Thanks to this, the markup becomes separated from styles, which is beneficial to further support. Also, due to this there is no need to generate a bunch of auxiliary classes (.col-xs-push-4, etc.), which are mostly not used.
Overlapping unnecessary styles
Since the Fast-Grid is a set of MixIn, it does not generate any rules in CSS. Therefore, here you will not encounter the fact that the framework stylists the elements as you do not need. And in general, it is only grids, and nothing more.
Other people's standards and Code-Style
fast-Grid is the Mixin-s that you must use inside yours classes, with the names that you yourself prefer. Love BEM? No problem!
Outdated methods
The default flexbox is used, which opens many features and solves the problems of classic float. For example, you can easily change the order of columns.
In the example below, we bring Sagebar below the main content for mobile versionAnd we make it the first block on large screens.
It would be possible to finally achieve with Pull / Push for Float, but it is very crutch.
Conclusion
In general, the task set for me was completed - now the grids no longer cause me any problems, and the layout goes quickly and easily. You can read more about FAST-Grid features in the repository and consider on the examples:
Are you still using bootstrap? Then we go to you!
Tags:
- cSS.
- sASS.
- grid.
