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.
arguments: $query, $only, $eq-grid
xxsmallstringfalseboolean or stringfalsebooleanAs 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.
arguments: $property, $attr
widthstringautolistfalsebooleanWhen 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.
arguments: $nested, $vertical
truebooleanDEPRECATEDfalsebooleanThis 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.
arguments: $width, $offset, $push, $pull, $order, $collapse, $global
nullnullnullnullnullnullbooleantruebooleanEXPERIMENTAL$sg-use-marginbooleanfalsebooleanThis 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.
$marginIt 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.
arguments: $query
nullstring
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);
}
.foo {
display: none;
}
@media only screen and (min-width: 40em) {
.foo {
display: inherit;
}
}
arguments: $query
nullstring
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);
}
.foo {
display: inherit;
}
@media only screen and (min-width: 40em) {
.foo {
display: none;
}
}
arguments: $query
nullstringIn 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;
}
}
arguments: $query
nullstringThe 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;
}
}
EXPERIMENTALBy 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
}
}
arguments: $id
stringNOTE: 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.