113 lines
3.1 KiB
SCSS
113 lines
3.1 KiB
SCSS
/*
|
|
Mixin for responsive, mobile-first grid.
|
|
Parameters:
|
|
- $container-name : The class name of the container for the grid.
|
|
- $container-padding : The left and right padding of the container. [1]
|
|
- $row-name : The class name of the grid's rows.
|
|
- $col-name : The class name of the grid's columns.
|
|
- $col-number : The amount of columns in the grid.
|
|
- $xs-prefix : Class prefix for extra small screens.
|
|
- $sm-prefix : Class prefix for small screens.
|
|
- $md-prefix : Class prefix for medium screens.
|
|
- $lg-prefix : Class prefix for large screens.
|
|
- $hide-suffix : Class suffix for hidden columns. [2]
|
|
- $sm-breakpoint : Breakpoint for small screens.
|
|
- $md-breakpoint : Breakpoint for medium screens.
|
|
- $lg-breakpoint : Breakpoint for large screens.
|
|
Notes:
|
|
- [1] : The padding of the container might cause the page to grow by $container-padding to the right. This
|
|
can be fixed either via @media queries or setting the padding to 0.
|
|
- [2] : Columns with the $hide-suffix will be only hidden in the screen size specified.
|
|
- [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information.
|
|
*/
|
|
@mixin make-grid( $container-name, $container-padding,
|
|
$row-name, $col-name, $col-number, $col-padding,
|
|
$xs-prefix, $sm-prefix, $md-prefix, $lg-prefix, $hide-suffix,
|
|
$sm-breakpoint, $md-breakpoint, $lg-breakpoint ){
|
|
// Container
|
|
.#{$container-name}{
|
|
padding-right: $container-padding;
|
|
padding-left: $container-padding;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
width: 100%;
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
// Row
|
|
.#{$row-name}{
|
|
&:before, &:after{
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
// Column
|
|
.#{$col-name}{
|
|
float: left;
|
|
padding: $col-padding;
|
|
}
|
|
// Extra small screen
|
|
@for $i from 1 through $col-number{
|
|
.#{$xs-prefix}-#{$i}{
|
|
width: #{($i * 100% / $col-number)};
|
|
}
|
|
}
|
|
.#{$sm-prefix}-#{$hide-suffix},
|
|
.#{$md-prefix}-#{$hide-suffix},
|
|
.#{$lg-prefix}-#{$hide-suffix}{
|
|
display: block;
|
|
}
|
|
.#{$xs-prefix}-#{$hide-suffix}{
|
|
display: none;
|
|
}
|
|
// Small screen
|
|
@media (min-width: $sm-breakpoint){
|
|
@for $i from 1 through $col-number{
|
|
.#{$sm-prefix}-#{$i}{
|
|
width: #{($i * 100% / $col-number)};
|
|
}
|
|
}
|
|
.#{$xs-prefix}-#{$hide-suffix},
|
|
.#{$md-prefix}-#{$hide-suffix},
|
|
.#{$lg-prefix}-#{$hide-suffix}{
|
|
display: block;
|
|
}
|
|
.#{$sm-prefix}-#{$hide-suffix}{
|
|
display: none;
|
|
}
|
|
}
|
|
// Medium screen
|
|
@media (min-width: $md-breakpoint){
|
|
@for $i from 1 through $col-number{
|
|
.#{$md-prefix}-#{$i}{
|
|
width: #{($i * 100% / $col-number)};
|
|
}
|
|
}
|
|
.#{$xs-prefix}-#{$hide-suffix},
|
|
.#{$sm-prefix}-#{$hide-suffix},
|
|
.#{$lg-prefix}-#{$hide-suffix}{
|
|
display: block;
|
|
}
|
|
.#{$md-prefix}-#{$hide-suffix}{
|
|
display: none;
|
|
}
|
|
}
|
|
// Large screen
|
|
@media (min-width: $lg-breakpoint){
|
|
@for $i from 1 through $col-number{
|
|
.#{$lg-prefix}-#{$i}{
|
|
width: #{($i * 100% / $col-number)};
|
|
}
|
|
}
|
|
.#{$xs-prefix}-#{$hide-suffix},
|
|
.#{$sm-prefix}-#{$hide-suffix},
|
|
.#{$md-prefix}-#{$hide-suffix}{
|
|
display: block;
|
|
}
|
|
.#{$lg-prefix}-#{$hide-suffix}{
|
|
display: none;
|
|
}
|
|
}
|
|
} |