MaterializeCSS Grid extract – 12 grid system with 12 additional offset

Here’s the grid extract from materializecss for those having difficulty using sass. I’ve also included 12 additional offsets for ease of use. Basically offset5 would mean an of Gridof 0.5 Grid, and offset55 would mean an offset of 5.5 Grids.

I’ve place a minified and un-minified version of both. Feel free to use.

Full version:


/*
* Type: CSS
* Extracted by: Aashik
* URL: https://errorlog.in
* Materialize v0.100.2 (http://materializecss.com)
* Copyright 2014-2017 Materialize
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/

.container {
    margin: 0 auto;
    max-width: 1480px;
}
.container .row {
    margin-left: -.75rem;
    margin-right: -.75rem;
}
.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.section.no-pad {
    padding: 0;
}
.section.no-pad-bot {
    padding-bottom: 0;
}
.section.no-pad-top {
    padding-top: 0;
}
.row {
    margin-left: auto;
    margin-right: auto;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.row .col {
    float: left;
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
}
.row .col[class*="push-"], .row .col[class*="pull-"] {
    position: relative;
}
.row .col.s1 {
    width: 8.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s2 {
    width: 16.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s4 {
    width: 33.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s5 {
    width: 41.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s65 {
    width: 54.16%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s7 {
    width: 58.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s8 {
    width: 66.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s10 {
    width: 83.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s11 {
    width: 91.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.offset-s1 {
    margin-left: 8.33333%}
.row .col.pull-s1 {
    right: 8.33333%}
.row .col.push-s1 {
    left: 8.33333%}
.row .col.offset-s2 {
    margin-left: 16.66667%}
.row .col.pull-s2 {
    right: 16.66667%}
.row .col.push-s2 {
    left: 16.66667%}
.row .col.offset-s3 {
    margin-left: 25%}
.row .col.pull-s3 {
    right: 25%}
.row .col.push-s3 {
    left: 25%}
.row .col.offset-s4 {
    margin-left: 33.33333%}
.row .col.pull-s4 {
    right: 33.33333%}
.row .col.push-s4 {
    left: 33.33333%}
.row .col.offset-s5 {
    margin-left: 41.66667%}
.row .col.pull-s5 {
    right: 41.66667%}
.row .col.push-s5 {
    left: 41.66667%}
.row .col.offset-s6 {
    margin-left: 50%}
.row .col.pull-s6 {
    right: 50%}
.row .col.push-s6 {
    left: 50%}
.row .col.offset-s7 {
    margin-left: 58.33333%}
.row .col.pull-s7 {
    right: 58.33333%}
.row .col.push-s7 {
    left: 58.33333%}
.row .col.offset-s8 {
    margin-left: 66.66667%}
.row .col.pull-s8 {
    right: 66.66667%}
.row .col.push-s8 {
    left: 66.66667%}
.row .col.offset-s9 {
    margin-left: 75%}
.row .col.pull-s9 {
    right: 75%}
.row .col.push-s9 {
    left: 75%}
.row .col.offset-s10 {
    margin-left: 83.33333%}
.row .col.pull-s10 {
    right: 83.33333%}
.row .col.push-s10 {
    left: 83.33333%}
.row .col.offset-s11 {
    margin-left: 91.66667%}
.row .col.pull-s11 {
    right: 91.66667%}
.row .col.push-s11 {
    left: 91.66667%}
.row .col.offset-s12 {
    margin-left: 100%}
.row .col.pull-s12 {
    right: 100%}
.row .col.push-s12 {
    left: 100%}
.row .col.offset-s5 {
    margin-left: 4.16%}
.row .col.offset-s15 {
    margin-left: 12.5%}
.row .col.offset-s25 {
    margin-left: 20.83%}
.row .col.offset-s35 {
    margin-left: 29.16%}
.row .col.offset-s45 {
    margin-left: 37.5%}
.row .col.offset-s55 {
    margin-left: 45.83%}
.row .col.offset-s65 {
    margin-left: 54.16%}
.row .col.offset-s75 {
    margin-left: 62.50%}
.row .col.offset-s85 {
    margin-left: 70.83%}
.row .col.offset-s95 {
    margin-left: 79.16%}
.row .col.offset-s105 {
    margin-left: 87.5;
}
.row .col.offset-s115 {
    margin-left: 95.83%}

Minified:

.container{margin:0 auto;max-width:1480px}.container .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*="push-"],.row .col[class*="pull-"]{position:relative}.row .col.s1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s65{width:54.16%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.33333%}.row .col.pull-s1{right:8.33333%}.row .col.push-s1{left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.pull-s2{right:16.66667%}.row .col.push-s2{left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.pull-s4{right:33.33333%}.row .col.push-s4{left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.pull-s5{right:41.66667%}.row .col.push-s5{left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.pull-s7{right:58.33333%}.row .col.push-s7{left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.pull-s8{right:66.66667%}.row .col.push-s8{left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.pull-s10{right:83.33333%}.row .col.push-s10{left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.pull-s11{right:91.66667%}.row .col.push-s11{left:91.66667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}.row .col.offset-s5{margin-left:4.16%}.row .col.offset-s15{margin-left:12.5%}.row .col.offset-s25{margin-left:20.83%}.row .col.offset-s35{margin-left:29.16%}.row .col.offset-s45{margin-left:37.5%}.row .col.offset-s55{margin-left:45.83%}.row .col.offset-s65{margin-left:54.16%}.row .col.offset-s75{margin-left:62.5%}.row .col.offset-s85{margin-left:70.83%}.row .col.offset-s95{margin-left:79.16%}.row .col.offset-s105{margin-left:87.5px}.row .col.offset-s115{margin-left:95.83%}

Report (Please include link to post while reporting)

Leave a Reply

Your email address will not be published. Required fields are marked *