Release 2.1.2

Non-standard rows, columns and offsets

Sometimes it is necessary to make placement of elements not on the customized grid.

For example, we have grid with 12 columns and offset equals 30 px.
But in some section we need to use grid with 10 columns and offset equals 0 px.

Now smart-grid can do it!

As sample:

LESS

.items{
   @o: 10px;
   .u-row-flex(@o); /* display flex and negative margins */

   .item{
      .u-col(@o); /* positive margins */
      .u-size(2, 8, @o); /* 100% / 8 * 2 - margins */
      .sm-block({.u-size(4, 8, @o)}); /* 100% / 8 * 4 - margins -> wrap to sm media */
   }
}

SCSS

.items{
   $o: 10px;
   @include u-row-flex($o);

   .item{
      @include u-col($o);
      @include u-size(2, 8, $o);
      @include sm-block(){
         @include u-size(4, 8, $o);
      };
   }
}

SASS

.items
   $o: 10px
   +u-row-flex($o);

   .item
      +u-col($o)
      +u-size(2, 8, $o)
      +sm-block()
         +u-size(3, 15, $o)

Stylus

.items
   $o = 40px
   u-row-flex($o)

   .item
      u-col($o)
      u-size(2, 8, $o)
      +sm-block()
         u-size(4, 8, $o)

This opportunity is rarely needed, but sometimes without it writing code is inconvenient.

For example, you might want to create a row and zero-indented columns. This is necessary when the columns must touch the backgrounds.