Create a grid using Susy

Susy is a toolkit for creating grids, with the help of which you can solve a variety of tasks on the location of content. Unlike frameworks such as Bootstrap or Foundation, Susy does not provide predefined classes for use, but only a set of functions and a mixin, after exploring which you can do much more.

This publication will cover the main features of Susy with examples, as well as adding output using flexbox .

Installation options

Susy can be used as an add-on to Compass, but this is not a basic requirement. Therefore, it is possible to do with SASS, while making the source code import. And here all the examples will be on CodePen, which for two months already has built-in support.
')

Application area

It may turn out that all the possibilities provided by this tool will be redundant and contrived to solve the problem.
Example:

<div class="grid"> <div class="col-2-3"> Main Content </div> <div class="col-1-3"> Sidebar </div> </div>

Using Susy here is clearly not justified. Don't Overthink It Grids .

More suitable example

I want to draw attention to the fact that I will not duplicate SASS code fragments here, where the toolkit is involved. Therefore, see the example, where I brought the whole main part up.

The following Susy functionality was used here:

$ susy [map]
Global variable grid settings. In the future, all the values set here can be changed simply by adding alternative settings to mixins and functions as a parameter. It can be useful for setting default values to avoid duplication.
container [mixin]
Mainly used for horizontal positioning of the container. It also sets the maximum width, following the principle of " fluid ". It provides the second - elastic .
span [mixin]
The main mixin when using this tulkit. Sets the width of the element, applies the necessary properties to get rid of the vertical directivity of block elements. It can also add indents from other elements (gutters).
gallery [mixin]
Used with many elements that are arranged in several lines. You must specify the number of elements in the line, everything else is done automatically: the calculation of the width, indents from other elements, transfer to a new line.

In this description, I tried to show the main purpose of the toolkit, avoiding details on the various settings and implementation features. The first can always be viewed in the documentation , and the second in the repository on GitHub.

This will be obviously not enough for a “sufficiently complete” review, therefore we will consider some parts in more detail. But I would like all this not to be translated into the translation of documentation.

Grid configuration

Depending on the configuration, we get different output from mixins and functions. And so it turns out that almost the entire result can be controlled through these settings, without even affecting the parameters. Therefore, an understanding of the configuration is an understanding of the work of the tulkit and its capabilities.

There are two main ways to set the configuration:

Global variable
This is the same $ susy , which is an associative array (map) and has the following default values:

Hidden text

  $susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: .25, column-width: false, global-box-sizing: content-box, last-flow: to, debug: ( image: hide, color: rgba(#66f, .25), output: background, toggle: top right, ), use-custom: ( background-image: true, background-options: false, box-sizing: true, clearfix: false, rem: true, ) );

Using shorthand syntax
In this case, all settings are passed as a parameter, which is a list. The peculiarity of this method is that we can specify values in a completely arbitrary order and not specify the properties to which these values will be assigned.

There are two types of syntax: layout and span .
Example:
```
 12 ,   0.25,   ,     $layout: 12 .25 fluid show 2    4-   ,   $span: 2 at 4 of (1 2 3 2 1) no-gutters   ,   list  map $span: 2 at 4 (columns: (1 2 3 2 1), gutters: no-gutters) 
```
At first glance it may seem that such a task is cryptographic, but after a few examples it will look very natural. A more complete description can be found in the Shorthand section of the documentation.

Now let's go over the basic properties that are in the configuration:

math
Mesh type: static or fluid . In the first case, all sizes are static and are specified in pixels (as in 960.gs), in the second, everything is indicated in percents. Using static is now irrelevant, so such examples will not be.
columns
The number of columns that we can allocate for our items. In Bootstrap, for example, this value is 12.
gutters
The size of indents between columns. With fluid, is the coefficient for column _size ( _{indent size = column size * coefficient} ).
I would like to show a moment that was a bit confusing:
```
 span(1 of 2) span(6 of 12) 
```
Here you can expect the same result, but it is not. And the thing is just in the indents, in that their size depends on the size of the columns and the coefficient (the coefficient in these cases is the same).
Here is the following pattern:
The more columns you specify, the smaller each column is. And the smaller the column - the less indent.
It turns out that in the first case the indent will be more than in the second. And that means that the width of the element in the first case will be less than in the second. This will be shown later with an example.
gutter-position
Indents can be made using both the margin and padding . You can also set an indent from a certain side, or from two sides at the same time.
output
Usually, to get rid of vertical directivity, block elements “float”, or use an inline-block (which will have at least hacks). There is also a choice of either float or isolate . The second was unknown to me, so let's sign for more here.
Hidden text
A long time ago, they wrote about the problem of rounding percent when setting the width of elements (sub-pixel rounding). It so happened that all hundredths of a percent could become whole, somewhere in a big direction, and somewhere in a smaller one. Therefore, in some browsers, the element that should have touched the container from the edge was at a distance of several percent. What else is not so bad, because when rounding up in a big way, the element could easily go to another line, because the total width was more than 100%.
The solution to this problem was found . In this case, the elements are positioned absolutely, but only horizontally (due to a margin of -100%). And the stream is not lost vertically and you can make an ordinary clear. That is, the element can not move to another line, and the error is obtained in 1% due to the independence of the size of other elements. By the way, this method uses gallery .
View examples here . Now this problem is not observed, but in the previous Safari still was.
debug
There are two ways to debug:
1. background
  In this case, the background image is a gradient, which is an indented column.
2. inspect
  The documentation is for some reason not written, but such an option is still there. Adds descriptive properties and values to the mixin output. In Firefox, this is not to be seen (it ignores them and does not display them), unlike Chrome. It can be useful with adaptive layout.

Examples

Isolate output

In the example I would like to draw attention to the positioning independent from other elements, in which the horizontal flow is lost. Therefore, it is necessary to specify a position for output (location) after at :

 span(2 of 4 at 1 isolate)

And it turns out that we can set the order directly in the CSS. At the top right there is a backward button that shows this feature. But the order in flexbox will certainly be better, because it was made specifically for this, and with isolate we can only change the order of the elements of one line.

Asymmetric mesh

Unlike the usual case, when all columns are equal, the asymmetric grid allows you to set columns of different sizes. The grid is defined by the coefficients, and the ratio of the width of the columns is equal to the ratio of the coefficients. Here, too, you need to specify the position for the output (location) after at , in order to be able to calculate the width of the element.

   2 ,     (3 2) span(2 at 1 of (3 2 3))   1 ,     (3) span(1 at 3 of (3 2 3))

And now an example. In the article on the nets, of course, it was necessary to mention the golden section. One could make two columns with asymmetry as (1 1.618), but this is not interesting. Need more rectangles! Therefore, there is an example of using an asymmetric grid with binomial coefficients, which are just suitable here. Pascal's Triangle:

In the script and styles at the very beginning there is a timeout variable. It can be reset to false, thereby increasing the number of lines. Last time, I was given a timeout for preprocessing styles, so I reduced the number.

Various span

In this example, debug inspect is globally enabled, the output of which can be seen in the inspector.

Example in order:

Debugging as a background image with a gradient is enabled. It is displayed when you hover on the switch, which is located on the upper right.
It may happen that the elements will slightly mismatch the background image. This is the problem of the percentage rounding of the size of the gradient.
The first element is “pushed” forward 2 columns. The latter is directed to the right due to the indication last .
Indents at the speakers come from two sides. This allows not to specify extreme elements.
Indents are set as padding and are placed on both sides.
Bleed is an element that “crawls” out of container indents.
And the last is an example with a different number of columns. As already mentioned above, one would expect the same result, but it turns out not so.

Flexbox

Flexbox provides many interesting possibilities for locating content, but the main problem here was the choice of common and obvious use cases. And I will say that it turned out that there are not so many such options, and they may well be made in the old ways.

The application of justify-content in Susy does not immediately make sense, because the toolkit is based on the use of the entire space. We also exclude flex-grow and flex-shrink from the list.
The ability to transfer items to other lines is not suitable for working with the grid system. Minus flex-wrap . And align-content too.
How to use column and column-reverse is also unknown.

The rest remains. Here's how to apply it:

order
With this property, we can change the order in which elements are displayed, regardless of their location in the DOM.
This could be done using isolate , the example was above. Of course, ordering looks better.
align-items and align-self
Using these properties, you can get columns of the same height using stretch . As well as various vertical alignments ( flex-start , center , flex-end , baseline ).
Prior to this, rescued the plates.
flex-direction
In Susy there is the ability to specify the direction of content: LTR and RTL. With float output, this is governed by setting the left or right .
Here the solution is to use row-reverse .

Now the output has changed in $ susy-keywords and align has been added: