75 lines
1.6 KiB
SCSS
75 lines
1.6 KiB
SCSS
// ==========================================================================
|
|
// Grid styles
|
|
// 12 column grid
|
|
// ==========================================================================
|
|
|
|
.j-row {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
&:before,
|
|
&:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.j-col {
|
|
padding: 0.85em;
|
|
width: 100%;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
// Small grid (Mobile first)
|
|
@media only screen {
|
|
.j-sm-1 {width: 8.33333%;}
|
|
.j-sm-2 {width: 16.66667%;}
|
|
.j-sm-3 {width: 25%;}
|
|
.j-sm-4 {width: 33.33333%;}
|
|
.j-sm-5 {width: 41.66667%;}
|
|
.j-sm-6 {width: 50%;}
|
|
.j-sm-7 {width: 58.33333%;}
|
|
.j-sm-8 {width: 66.66667%;}
|
|
.j-sm-9 {width: 75%;}
|
|
.j-sm-10 {width: 83.33333%;}
|
|
.j-sm-11 {width: 91.66667%;}
|
|
.j-sm-12 {width: 100%;}
|
|
}
|
|
|
|
// Medium grid
|
|
// 530px and up
|
|
@include minbreakpoint(large-phone) {
|
|
.j-md-1 {width: 8.33333%;}
|
|
.j-md-2 {width: 16.66667%;}
|
|
.j-md-3 {width: 25%;}
|
|
.j-md-4 {width: 33.33333%;}
|
|
.j-md-5 {width: 41.66667%;}
|
|
.j-md-6 {width: 50%;}
|
|
.j-md-7 {width: 58.33333%;}
|
|
.j-md-8 {width: 66.66667%;}
|
|
.j-md-9 {width: 75%;}
|
|
.j-md-10 {width: 83.33333%;}
|
|
.j-md-11 {width: 91.66667%;}
|
|
.j-md-12 {width: 100%;}
|
|
}
|
|
|
|
// Large grid
|
|
// 782px and up
|
|
@include minbreakpoint(tablet) {
|
|
.j-lrg-1 {width: 8.33333%;}
|
|
.j-lrg-2 {width: 16.66667%;}
|
|
.j-lrg-3 {width: 25%;}
|
|
.j-lrg-4 {width: 33.33333%;}
|
|
.j-lrg-5 {width: 41.66667%;}
|
|
.j-lrg-6 {width: 50%;}
|
|
.j-lrg-7 {width: 58.33333%;}
|
|
.j-lrg-8 {width: 66.66667%;}
|
|
.j-lrg-9 {width: 75%;}
|
|
.j-lrg-10 {width: 83.33333%;}
|
|
.j-lrg-11 {width: 91.66667%;}
|
|
.j-lrg-12 {width: 100%;}
|
|
} |