Skip to content

Instantly share code, notes, and snippets.

@remkus
Forked from lucprincen/Gridsystem
Last active August 29, 2015 14:28
Show Gist options
  • Save remkus/a76c8a0c20b689a0542c to your computer and use it in GitHub Desktop.
Save remkus/a76c8a0c20b689a0542c to your computer and use it in GitHub Desktop.
/*
* Mixins:
*/
//make flex rows a bit easier:
@mixin flex-row( $equalize:stretch ){
@include display(flex);
@include flex-direction(row);
@include align-items($equalize);
}
//make flex columns a bit easier:
@mixin flex-col( $equalize:stretch ){
@include display(flex);
@include flex-direction(column);
@include align-items($equalize);
}
/*
* Regular:
*/
.section:after{
clear:both;
}
.row{
@include flex-row();
min-height:30px;
.column{
@include flex( 1 );
margin-right:30px;
img{
max-width:100%;
height:auto;
}
&:last-of-type{
margin-right:0;
}
}
&.sidebar-right{
.column:first-of-type{
@include flex( 2 );
}
}
&.sidebar-left{
.column:last-of-type{
@include flex( 2 );
}
}
}
/*
* Responsive:
*/
@media only screen and (max-width:980px){
.row{
@include flex-flow( row wrap );
&.four-columns, &.three-columns{
.column{
@include flex( 1 47% );
margin-right:0;
&:nth-child( even ){
margin-left:5%;
}
}
}
}
}
@media only screen and (max-width:768px){
.row{
.column{
@include flex( 1 100% );
}
&.four-columns, &.three-columns, &.half-half{
.column, .column:nth-child( odd ), .column:nth-child( even ){
@include flex( 1 100% );
margin-left:0;
margin-right:0;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment