Mixins

If you're using the Sass version of Super-GiGi you'll can use the following Mixins. Here you can found extended documentation for Grid and Visibility mixins too.

media-query()

arguments: $query, $only, $eq-grid

  • $query
    • optional
    • default: xxsmall
    • type: string
  • $until
    • optional
    • default: false
    • type: boolean or string
  • $eq-grid
    • optional
    • default: false
    • type: boolean

As you can guess, this is the mixin that generates our media or element query. The $query argument must be one of the key values defined in the $breakpoints variable. Super GiGi is developed mobile first, so if you write @include mediaquery(small){...} you will target all the queries from small.

If you want to trigger only a range you can pass $until parameter to your mixin implementation. $until accepts only or a $breakpoints key value.

Example:

.sausage {
  @include media-query(small, only) {
    content: "small only;"
  }
}

.eggplant {
  @include media-query(small, large) {
    content: "small to large;"
  }
}

will generate:

@media only screen and (min-width: 40em) and (max-width: 44.9375em) {
  .sausage {
    content: "small only;"; } }

@media only screen and (min-width: 40em) and (max-width: 79.9375em) {
  .eggplant {
    content: "small to large;"; } }

You can choose between the classical media query or the JavaScript powered element query. You don't have to specify this setting everytime, Super GiGi provides a global $eq-grid variable, but it might be handy to mix media end element queries.

grid-space()

arguments: $property, $attr

  • $property
    • optional
    • default: width
    • type: string
  • $attr
    • optional
    • default: auto
    • type: list
  • $margin
    • optional
    • default: false
    • type: boolean

When you are writing css in a grid, it's difficult to manage the measures sometime. grid-space() comes to help us in this ungrateful task! You must declare the property you want to set (for example: margin-left) by changing the $property argument. You then have to pass how many column of the grid you want that property to take. For example assuming that we have 12 $grid-columns:

.foo {
  @include grid-space(margin-left, 5)
}

will return

.foo {
  margin-left: 41.6667%
}

You can also express the number of column you want to use for your calculation, passing to $attr a sass list composed like that: $column of $columns. For example:

.foo {
  @include grid-space(margin-left, 1 of 2);
}

will return

.foo {
  margin-left: 50%;
}

For infos about $margin option, see the margin section.

grid-row()

arguments: $nested, $vertical

  • $nested
    • optional
    • default: true
    • type: boolean
  • $vertical DEPRECATED
    • optional
    • default: false
    • type: boolean

This mixin will generate the row element of the grid. It's real simple, you may specify if the row is nested in another row (to reset the padding). The option $vertical will only add the CSS3 flex-direction: column property to the element, so it's deprecated. It would be removed soon.

grid-column()

arguments: $width, $offset, $push, $pull, $order, $collapse, $global

This is the most important mixin of our grid. And probabily it is the mixin that you will use more. Let's take a look at how it works:

.foo {
  @include grid-column(
      $width: (xxsmall:6, large: 6),
      $push: (xxsmall:6, large: 12),
      $pull: 1,
      $order: 0,
      $collapse: false,
      $global: true,
      $eq-grid: false
    );
};

will generate:

.foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
  position: relative;
  right: auto;
  position: relative;
  left: auto;
  right: 8.33333%;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  order: 0;
}
@media only screen and (min-width: 0em) {
  .foo {
    width: 50%; 
    left: 50%;
  } 
}
@media only screen and (min-width: 64em) {
  .foo {
    width: 50%; 
    left: 100%;
  } 
}

note: you see repeated properties, because we set pull and push for the same element.

$width, $offset, $push

$width, $offset, $push and $pull have similar behaviors. They can be used in three different ways.

1 - Passing an integer

.foo {
  @include grid-column($width: 1);
}

will return:

.foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
  width: 8.33333%;
}

The first four properties are the common behaviour of the column object, the relevant part is width: 8.33333%. This is calculated via grid-space() mixin

2 - Passing a semantic list

.foo {
  @include grid-column($width: 1 of 3);
}

will return:

.foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
  width: 33.33333%;
}

As before, the first four properties are the common rules of our column, the relevant part is width: 33.33333%. This is calculated via grid-space() mixin

3 - Passing a queries map

.foo {
  @include grid-column($width: (small: 6, medium: 4, large: 3));
}

will generate:

.foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 40em) {
  .foo {
    width: 50%; 
  } 
}
@media only screen and (min-width: 45em) {
  .foo {
    width: 33.33333%; 
  } 
}
@media only screen and (min-width: 64em) {
  .foo {
    width: 25%; 
  } 
}

As before, the first four properties are the common rules of our column, the relevant part are these in the media query. How you can see we have the widths of the column set in a responsive way.

4 - Width

As said before $width, $offset, $push and $pull have similar behaviors, but $width is obviously a bit different.

We've seen that you can pass to $width essentialy a number. When you do that, Super GiGi will add to your css: flex: 0 0 auto. This is essential to our flex grid to work.

But you can set $width to auto, that will set the width css property to auto and the flex property to 1 1 0%. With this option you can have columns that will take all of the available space on a given row. If you have one column, it will take 100% of the space, if you have two then they both will take 50% each, and so on.

Another important option is to set $width to 0. This will not set width to 0% (a column must have a minimun width). But the width will be auto. In this way you can have a column with the width decided from the content.

Note we are preparing a visual example. Stay tuned.

###$order $order is similar, you can set it only in two ways, via integer or via map. It will set the css3 order. Let see an example:

.foo {
  @include grid-column($order: 3)
}
.bar {
  @include grid-column($order: (small: 6, medium: 4, large: 3))
}

will compile in:

 .foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
  width: auto;
  order: 3;
}

.bar {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
  width: auto;
}
@media only screen and (min-width: 40em) {
  .bar {
    order: 6; 
  } 
}
@media only screen and (min-width: 45em) {
  .bar {
    order: 4; 
  } 
}
@media only screen and (min-width: 64em) {
  .bar {
    order: 3; 
  } 
}

$collapse and $global

$collapse and $global are very simple. The first one if false will generate the padding of our columns padding-left: calc(1.875rem / 2);, the second one generate the padding of our columns padding-right: calc(1.875rem / 2);, the second one will generate this css:

  box-sizing: border-box;
  display: flex;
  flex-direction: column;

aka the common properties that defines our columns.

$margin

It is possible to use margins as additional column-gutter to a column. This is not mutual esclusive to the padding (to do that, see the $collapse option or the global $sg-collapse variable). Set this parameter to true to add another column-gutter to this column.

show-from()

arguments: $query

  • $query
    • required
    • default: null
    • type: string This is the first of Super GiGi's visibility mixins. It simple takes a $query argument and sets the element to display: none; until the passed $query, where the element will take the property: display: inherit. Example
      .foo {
      @include show-from(small);
      }
      
      and magically:
      .foo {
      display: none; 
      }
      @media only screen and (min-width: 40em) {
      .foo {
      display: inherit; 
      } 
      }
      

hide-from()

arguments: $query

  • $query
    • required
    • default: null
    • type: string Like show-from(). It simple takes a $query argument and sets the element to display: inherit; until the passed $query, where the element will take the property: display: none. Example:
      .foo {
      @include hide-from(small);
      }
      
      will generate:
      .foo {
      display: inherit; 
      }
      @media only screen and (min-width: 40em) {
      .foo {
      display: none; 
      } 
      }
      

show-for()

arguments: $query

  • $query
    • required
    • default: null
    • type: string

In this case the element is hidden by display: none; and will have the property: display: inherit only for the selected media query range. Example:

.foo {
  @include show-for(small);
}

will generate:

.foo {
  display: none; 
}
@media only screen and (min-width: 40em) and (max-width: 44.9375em) {
  .foo {
    display: inherit; 
  } 
}

hide-for()

arguments: $query

  • $query
    • required
    • default: null
    • type: string

The last of our visibility mixins. This will hide the element with display: none; only for the selected media query range. Example:

.foo {
  @include hide-for(small);
}

will generate:

.foo {
  display: inherit; 
}
@media only screen and (min-width: 40em) and (max-width: 44.9375em) {
  .foo {
    display: none; 
  } 
}

responsive-gutter() EXPERIMENTAL

By default SuperGiGi has a fixed $column-gutter that is the same for each breakpoint in the $breakpoints variable. If you want to have a different gutter based on breakpoints, you can set a map as seen on $column-gutter. If you need to manage the responsive gutter, you can use this mixin

$column-gutter: (
  'xxsmall': 0.5em,
  'medium': 1em,
  'xlarge': 1.5em,
);

.bar {
  @include responsive-gutter {
    margin-top: $column-gutter;
  };
}

And the CSS will be:

@media only screen and (min-width: 0em) {
  .bar {
    margin-top: 0.5em
  }
}
@media only screen and (min-width: 45em) {
  .bar {
    margin-top: 1em
  }
}
@media only screen and (min-width: 80em) {
  .bar {
    margin-top: 1.5em
  }
}

If you are already in a mediaquery, the mixin will take only the current breakpoint, as shown below

.foobar {
  @include media-query('medium') {
    color: red;

    @include responsive-gutter {
      left: $column-gutter;
    }
  }
}

will become:

@media only screen and (min-width: 45em) {
  .foobar {
    color: red;
    left: 1em
  }
}

Obviously it will work with math operations too:

.foobar {
  @include media-query('xxsmall') {
    @include responsive-gutter {
      top: $column-gutter;
      left: ($column-gutter / 2);
      bottom: ($column-gutter * 2);
      right: ($column-gutter + 2);
    }
  }
}
@media only screen and (min-width: 0em) {
    .foobar {
        top: 0.5em;
        left: 0.25em;
        bottom: 1em;
        right: 2.5em
    }
}

dry-it()

arguments: $id

  • $id
    • required
    • type: string

NOTE: This mixin will change the order of your generated css.

One of the bad thing that we have in developing a grid without a default classes schema is that the resulting css code will be semantic, but not dry. You can (and you should) use gzip to serve your css, but there will still be redundant css code.

Example:

.foo {
  @include grid-column((small: 12, large: 6));
}
.bar {
  @include grid-column((small: 12, large: 6));
}

will generate this css:

.foo {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 40em) {
  .foo {
    width: 100%; } }
@media only screen and (min-width: 64em) {
  .foo {
    width: 50%; } }

.bar {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 40em) {
  .bar {
    width: 100%; 
  } 
}
@media only screen and (min-width: 64em) {
  .bar {
    width: 50%; 
  } 
}

We just generated the same code for two identical classes. Sass helps with placeholders, but still we will need to extend too many selector to have a dry behavior. What if we can generate placeholders on fly? That is exactly what dry-it() does. To use it you just need to set $use-dry to true.

The result will be like this:

.foo {
  @include grid-column((small: 12, large: 6));
}
.bar {
  @include grid-column((small: 12, large: 6));
}

will generate this css:

*.foo, *.bar {
  box-sizing: border-box;
  padding-left: calc(1.875rem / 2);
  padding-right: calc(1.875rem / 2);
  display: flex;
  flex-direction: column; 
}

@media only screen and (min-width: 40em) {
  *.foo, *.bar {
    width: 100%; 
  } 
}

@media only screen and (min-width: 64em) {
  *.foo, *.bar {
    width: 50%; 
  } 
}

IMPORTANT To use this option it is preferable to order your media query smaller to larger. I know, that is a very boring thing to do manually, but fortunally: PostCSS mqpacker comes to help us. An example on how to use it in gulp:

var mqpacker = require('css-mqpacker');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

module.exports = function() {
  return gulp.src('/styles/*.+(sass|scss)')
    .pipe(sass())
    .pipe(
      postcss([
        mqpacker({
          sort: true
        })
      ])
    )
    .pipe(gulp.dest('/styles/'));

You can find a complete gulp file in gulp/tasks/sass.js.

git v npm version