// flexi-grid framework @import “flexi-grid/mixin”;
// box sizing *{
@include box-sizing(border-box);
}
// clear the float .clear{
@extend %clear;
}
// container .container{
@include container(30); // padding left & right 15px
}
// wrapper .wrapper{
@include wrapper(30); // margin left & right (-15px))
}
// columns @include columns(col,12);
// tablet media @media screen and (min-width:768px){
%float{ float: left; } @include grids(col,12); @include grids(offset,12); @include grids(push,12); @include grids(pull,12);
}
// desktop media @media screen and (min-width:992px){
%float{ float: left; } @include grids(col,12); @include grids(offset,12); @include grids(push,12); @include grids(pull,12);
}
// large media @media screen and (min-width:1200px){
%float{ float: left; } @include grids(col,12); @include grids(offset,12); @include grids(push,12); @include grids(pull,12);
}
// add the float for all media @include float(col,12); // this had been added because the media not allowed @extend insdie