diff options
Diffstat (limited to 'plugins/jetpack/scss/_utilities/_grid.scss')
-rw-r--r-- | plugins/jetpack/scss/_utilities/_grid.scss | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/_utilities/_grid.scss b/plugins/jetpack/scss/_utilities/_grid.scss new file mode 100644 index 00000000..788a377a --- /dev/null +++ b/plugins/jetpack/scss/_utilities/_grid.scss @@ -0,0 +1,75 @@ +// ========================================================================== +// 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%;} +} |