nano-size SCSS framework
Just add this to your head section
<style> /* Gridy https://github.com/blackboxx/gridy */ * {box-sizing: border-box;}img {max-width: 100%;}ul {padding-left: 0px;}*:focus {outline: none;}.ibl {display: inline-block;float: left;}.tbl {display: table;}.tblc {display: table-cell;}.clb {clear: both;}.half {display: inline-block;float: left;box-sizing: border-box;width: 50%;min-width: 50%;}.half-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.half-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.half-m {width: 50%;float: left;}}.one-third {display: inline-block;float: left;box-sizing: border-box;width: 33.33333%;min-width: 33.33333%;}.one-third-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.one-third-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.one-third-m {width: 33.33333%;float: left;}}.two-third {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.two-third {width: 100%;float: left;}}@media all and (min-width: 50em) {.two-third {width: 66.66667%;float: left;}}.one-fourth {display: inline-block;float: left;box-sizing: border-box;width: 25%;min-width: 25%;}.one-fourth-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.one-fourth-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.one-fourth-m {width: 25%;float: left;}}.three-fourth {display: inline-block;float: left;box-sizing: border-box;width: 75%;min-width: 75%;}.three-fourth-m {display: inline-block;float: left;box-sizing: border-box;@inclide three-fourth;}@media all and (max-width: 50em) {.three-fourth-m {width: 100%;}}@media all and (min-width: 50em) {.three-fourth-m {width: 75%;min-width: 75%;}}.one-fifth {display: inline-block;float: left;box-sizing: border-box;width: 20%;min-width: 20%;}.one-fifth-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.one-fifth-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.one-fifth-m {width: 20%;float: left;}}.two-fifth {display: inline-block;float: left;box-sizing: border-box;width: 20%;min-width: 40%;}.two-fifth-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.two-fifth-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.two-fifth-m {width: 40%;float: left;}}.three-fifth {display: inline-block;float: left;box-sizing: border-box;width: 20%;min-width: 60%;}.three-fifth-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.three-fifth-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.three-fifth-m {width: 60%;float: left;}}.four-fifth {display: inline-block;float: left;box-sizing: border-box;width: 20%;min-width: 80%;}.four-fifth-m {display: inline-block;float: left;box-sizing: border-box;}@media all and (max-width: 50em) {.four-fifth-m {width: 100%;float: left;}}@media all and (min-width: 50em) {.four-fifth-m {width: 80%;float: left;}}@media all and (min-width: 50em) {.mobile {display: none;}}@media all and (max-width: 50em) {.desktop {display: none;}} </style>