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.

Important change for stylus

.some
    md-block(@block{
        color red
        padding 20px
        margin 10px
    })

Doesn't work now!

This syntax had some problems with & and nested rules.

New way

.some
    +md-block()
        color red
        padding 20px
        margin 10px

It's compact and better.

Do not upgrade the smart-grid to version 2.1.1 if you are used to the old version for stylus.

New opportunities

Boolean flag mobileFirst in settings

var settings = {
    mobileFirst: false, /* mobileFirst ? 'min-width' : 'max-width' */
}

If mobileFirst is false, mixins use max-width conditions, min-with otherwise.

As sample, mobileFirst: true

.item{
    .col();
    .size(3); /* for all screens */
    .size-md(6); /* less than @break_md screen */
    .size-xs(12); /* less than @break_xs screen */
}

As sample, mobileFirst: false

.item{
    .col();
    .size(12); /* for all screens */
    .size-md(6); /* more than @break_md screen */
    .size-lg(3); /* more than @break_lg screen */
}

The order of call of mixins is important!

Change offsets on breakPoints

We can set

var settings = {
    offset: "30px", /* for all screens */
    breakPoints: {
        /* simple points */
        xs: {
            width: "576px",
            offset: "10px" /* less than @break_xs (mobileFirst is false) */
        }
    }
}

It's work good, but now you have to set size and shift mixins on xs-point!

As sample

.item{
    .col();
    .size(3);
    .size-md(6);
}

is wrong!!!

.size-md set width: ~"calc(100% / 12 * 6 - @{offset_md})";

but @offset_md is 30px, @offset_xs is 10px;

So we need to repeat size

.item{
    .col();
    .size(3);
    .size-md(6);
    .size-xs(6);
}

This is only relevant if you change the offset on breakPoint. So don't change offsets too often.

String defaultMediaDevice in settings

var settings = {
    defaultMediaDevice: "screen", /* you can set any variants */
}

This string used in all media queries in mixins.

Mixins from, to, from-to

from -> min-width (from this width and more)
to -> max-width (from this width and less)
from-to -> min-width and max-width (between width 1 and width 2)

.from(700px, {
    color: red;
});

.to(700px, {
    color: green;
});

.from-to(500px, 800px, {
    margin-top: 20px;
});

and we get

@media screen and (min-width: 700px){
    color: red;
}

@media screen and (max-width: 700px){
    color: green;
}

@media screen and (min-width: 500px) and (max-width: 800px){
    margin-top: 20px;
}

Add grid with inline-block

Flex is wonderful! But some people are worried about the resources of the browser.

So, if block is simple, you can use

.items{
    .row-ib(); /* row inline-block */
    
    .item{
        .col(); /* set offsets and box-sizing */
        .col-ib(); /* set display: inline-block and vertical-align: top */
        /* sizes */
    }
}

But remember that inline-block variant has joke with spaces between html tags!

Add mixin containerFull

it's simple conrainer but without any max-width.

Small changes

Offsets mixins rename to shifts on default.

In smart-grid 1

.offset(1);

In smart-grid 2

.shift(1);

You can set any name with setting mixinNames.shift.
You can rename all mixins at your own discretion with mixinNames setting.

Removed

Array properties

This is not relevant. No differense between

.justify-content-md(center);

and

.md(justify-content, center);

Boolean flag oldSizeStyle

Smartgrid 2 don't generate old variants of size mixins.

Total

Smartgrid 2.0.0 is in beta! Please report bugs!

Good luck!

Great new mixins for meqia queries

Nobody likes to write @media screen and (max-width: @break_md) e t.c.

It's long and tedious.

Previously, smartgrid supported short mixin for 1 property:

.some{
    .md(color, red);
}

And we got:

@media screen and (max-width: 992px){
    .some{
        color: red;
    }
}

But if we have many changes into media query, we write

.some{
    .md(color, red);
    .md(padding, 20px);
    .md(margin, 10px);
}

It's strange isn't it!?

And now smartgrid support wonderful mixins such as md-block.

Less

.some{
    .md-block({
        color: red;
        padding: 20px;
        margin: 10px;
    });
}

SCSS

.some{
    @include md-block{
        color: red;
        padding: 20px;
        margin: 10px;
    };
}

SASS

.some
    +md-block
        color: red
        padding: 20px
        margin: 10px

Stylus

.some
    md-block(@block{
        color red
        padding 20px
        margin 10px
    })

All samples compiled to

@media screen and (max-width: 992px){
    .some{
        color: red;
        padding: 20px;
        margin: 10px;
    }
}

It's really convenient!

Thank #3 for this idea!

Little fixes

Append img max-width to reset mixin

Img tag always breaks the grid because img get native width. And we need to write

img{
    max-width: 100%;
}

After that the image does not get out parent element. This code append to reset mixin.

Inconvenient values are replaced with variables

@atom: (100% / @columns)

and use @offset_one_side in mixins

This fix is invisible to the developer.

New opportunities

Rename output file

As sample

var settings = {
    filename: '_smart-grid', /* default smart-grid */
    outputStyle: 'sass'
};

and we get "_smart-grid.sass" instead "smart-grid.sass"

Thank to #1 for this idea.

Rem in offsets

Now we can use rem in offsets.

As sample

var settings = {
    columns: 12,
    ofsset: '2rem'
};

And if we write

.col-4();

we get

width: calc(25% - 2rem);

This is convenient if the designer has attached the size of the indent to the font size.