UNPKG

eight.css

Version:

A micro (and modular) CSS framework based on 8pt grid

1 lines 4.13 kB
html{min-width:320px}body{overflow-x:hidden}.container{box-sizing:border-box;max-width:100%;margin:0 auto;padding:0 0;}@media screen and (min-width:768px){.container{width:576px}}@media screen and (min-width:992px){.container{width:768px}}@media screen and (min-width:1200px){.container{width:992px}}@media screen and (min-width:768px){.container.sm{max-width:576px}}@media screen and (min-width:992px){.container.md{max-width:768px}}.row,.col{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;box-sizing:border-box}.row{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-8px;margin-right:-8px;}.row .col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-direction:column;-ms-flex-direction:column;flex-direction:column;padding-left:8px;padding-right:8px;max-width:100%;}.row .col.twelfth{-webkit-flex-basis:8.333333333%;-ms-flex-basis:8.333333333%;flex-basis:8.333333333%;max-width:8.333333333%}.row .col.tenth{-webkit-flex-basis:10%;-ms-flex-basis:10%;flex-basis:10%;max-width:10%}.row .col.eighth{-webkit-flex-basis:12.5%;-ms-flex-basis:12.5%;flex-basis:12.5%;max-width:12.5%}.row .col.sixth{-webkit-flex-basis:16.666666667%;-ms-flex-basis:16.666666667%;flex-basis:16.666666667%;max-width:16.666666667%}.row .col.fifth{-webkit-flex-basis:20%;-ms-flex-basis:20%;flex-basis:20%;max-width:20%}.row .col.fourth{-webkit-flex-basis:25%;-ms-flex-basis:25%;flex-basis:25%;max-width:25%}.row .col.third{-webkit-flex-basis:33.33%;-ms-flex-basis:33.33%;flex-basis:33.33%;max-width:33.33%}.row .col.half{-webkit-flex-basis:50%;-ms-flex-basis:50%;flex-basis:50%;max-width:50%}.row .col.golden{-webkit-flex-basis:61.803398875%;-ms-flex-basis:61.803398875%;flex-basis:61.803398875%;max-width:61.803398875%}.row.compact{margin-left:0;margin-right:0;}.row.compact .col{padding-left:0;padding-right:0}.row.tiny{margin-left:-4px;margin-right:-4px;}.row.tiny .col{padding-left:4px;padding-right:4px}.row.expanded{margin-left:-16px;margin-right:-16px;}.row.expanded .col{padding-left:16px;padding-right:16px}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-moz-box-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media screen and (max-width:479px){.row.stackable{-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}.row.stackable.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.row.stackable > .col{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%;max-width:100%}}@media screen and (max-width:576px){.row.stackable.sm{-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}.row.stackable.sm.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.row.stackable.sm > .col{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%;max-width:100%}}@media screen and (max-width:768px){.row.stackable.md{-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}.row.stackable.md.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.row.stackable.md > .col{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%;max-width:100%}}@media screen and (max-width:992px){.row.stackable.lg{-webkit-flex-flow:column wrap;-ms-flex-flow:column wrap;flex-flow:column wrap}.row.stackable.lg.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.row.stackable.lg > .col{-webkit-flex-basis:100%;-ms-flex-basis:100%;flex-basis:100%;max-width:100%}}/*# sourceMappingURL=eight.grid.css.map */