CSS useful basic rules

basic.css

/* Debug mode */

/* * { border: 1px solid red; } */

/* Positions */
.abs { position: absolute; }
.rel { position: relative; }

/* Text locations */
.t-c { text-align: center; }
.t-l { text-align: left; }
.t-r { text-align: right; }
.t-j {text-align: justify;}

/* Floats */
.f-l { float: left; }
.f-r { float: right; }

/* Margins */
.m-0 { margin: 0px; }

.m-10 { margin: 10px; }
.m-25 { margin: 25px; }
.m-50 { margin: 50px; }
.m-75 { margin: 75px; }
.m-100 { margin: 150px; }
.m-150 { margin: 150px; }
.m-300 { margin: 300px; }

.m-t-10 { margin-top: 10px; }
.m-t-25 { margin-top: 25px; }
.m-t-50 { margin-top: 50px; }
.m-t-75 { margin-top: 75px; }
.m-t-100 { margin-top: 150px; }
.m-t-150 { margin-top: 150px; }
.m-t-300 { margin-top: 300px; }

.m-l-10 { margin-left: 10px; }
.m-l-25 { margin-left: 25px; }
.m-l-50 { margin-left: 50px; }
.m-l-75 { margin-left: 75px; }
.m-l-100 { margin-left: 150px; }
.m-l-150 { margin-left: 150px; }
.m-l-300 { margin-left: 300px; }

.m-r-10 { margin-right: 10px; }
.m-r-25 { margin-right: 25px; }
.m-r-50 { margin-right: 50px; }
.m-r-75 { margin-right: 75px; }
.m-r-100 { margin-right: 150px; }
.m-r-150 { margin-right: 150px; }
.m-r-300 { margin-right: 300px; }

.m-b-10 { margin-bottom: 10px; }
.m-b-25 { margin-bottom: 25px; }
.m-b-50 { margin-bottom: 50px; }
.m-b-75 { margin-bottom: 75px; }
.m-b-100 { margin-bottom: 150px; }
.m-b-150 { margin-bottom: 150px; }
.m-b-300 { margin-bottom: 300px; }

/* Padding */
.p-0 { padding: 0px; }

.p-10 { padding: 10px; }
.p-25 { padding: 25px; }
.p-50 { padding: 50px; }
.p-75 { padding: 75px; }
.p-100 { padding: 150px; }
.p-150 { padding: 150px; }
.p-300 { padding: 300px; }

.p-t-10 { padding-top: 10px; }
.p-t-25 { padding-top: 25px; }
.p-t-50 { padding-top: 50px; }
.p-t-75 { padding-top: 75px; }
.p-t-100 { padding-top: 150px; }
.p-t-150 { padding-top: 150px; }
.p-t-300 { padding-top: 300px; }

.p-l-10 { padding-left: 10px; }
.p-l-25 { padding-left: 25px; }
.p-l-50 { padding-left: 50px; }
.p-l-75 { padding-left: 75px; }
.p-l-100 { padding-left: 150px; }
.p-l-150 { padding-left: 150px; }
.p-l-300 { padding-left: 300px; }

.p-r-10 { padding-right: 10px; }
.p-r-25 { padding-right: 25px; }
.p-r-50 { padding-right: 50px; }
.p-r-75 { padding-right: 75px; }
.p-r-100 { padding-right: 150px; }
.p-r-150 { padding-right: 150px; }
.p-r-300 { padding-right: 300px; }

.p-b-10 { padding-bottom: 10px; }
.p-b-25 { padding-bottom: 25px; }
.p-b-50 { padding-bottom: 50px; }
.p-b-75 { padding-bottom: 75px; }
.p-b-100 { padding-bottom: 150px; }
.p-b-150 { padding-bottom: 150px; }
.p-b-300 { padding-bottom: 300px; }

/* Rows */
.wide { width: 100%; }
.half { width: 50%; }
.row-wide { max-width: none; } /* Wide Foundation row */

/* Commons */
.onepage { height: 100vh; }

-/* Sizes */
.flood { width: 100%; height: 100%; }
.no-size { width: 0px; height: 0px; }