Revised by
Daniel Sokolowski
15da99e
| /*
Simple wrapperless column gird system
--------------------------------------
Example:
```
<section class="column 4/12">
...
</section>
<section class="column 12/12">
<div class="6/12" ... >
<img class="4/12" ... >
</div>
</section>
```
*/
.column {
box-sizing: border-box;
float: left;
padding-right: 1em;
}
.column:last-of-type {
padding-right: 0;
}
/* below selectors leverage character - see: https://mathiasbynens.be/notes/css-escapes */
.\31\/12 { /* `.1/12` */
width: calc(100% / 12)
}
.\32\/12 { /* `.2/12` */
width: calc(200% / 12)
}
.\33\/12 { /* `.3/12` */
width: calc(300% / 12)
}
.\34\/12 { /* `.4/12` */
width: calc(400% / 12);}
.\35\/12 { /* `.5/12` */
width: calc(500% / 12)
}
.\36\/12 { /* `.6/12` */
width: calc(600% / 12)
}
.\37\/12 { /* `.7/12` */
width: calc(700% / 12)
}
.\38\/12 { /* `.8/12` */
width: calc(800% / 12)
}
.\39\/12 { /* `.9/12` */
width: calc(900% / 12)
}
.\31\30\/12 { /* `.10/12` */
width: calc(1000% / 12)
}
.\31\31\/12 { /* `.11/12` */
width: calc(1100% / 12)
}
.\31\32\/12 { /* `.12/12` */
width: 100%
}
|