Gravitons : Virtually massless CSS layout microlibrary

gravitons.scss

/* White Space */
$space-1: .5rem;
$space-2: 1rem;
$space-3: 2rem;
$space-4: 4rem;

.m1 { margin: $space-1 }
.mb1 { margin-bottom: $space-1 }
.mt1 { margin-top: $space-1 }

.m2 { margin: $space-2 }
.mb2 { margin-bottom: $space-2 }
.mt2 { margin-top: $space-2 }

.m3 { margin: $space-3 }
.mb3 { margin-bottom: $space-3 }
.mt3 { margin-top: $space-3 }

.m4 { margin: $space-4 }
.mb4 { margin-bottom: $space-4 }
.mt4 { margin-top: $space-4 }

.mx1 { margin-left: $space-1; margin-right: $space-1; }
.mx2 { margin-left: $space-2; margin-right: $space-2; }
.mx3 { margin-left: $space-3; margin-right: $space-3; }
.mx4 { margin-left: $space-4; margin-right: $space-4; }

.my1 { margin-top: $space-1; margin-bottom: $space-1; }
.my2 { margin-top: $space-2; margin-bottom: $space-2; }
.my3 { margin-top: $space-3; margin-bottom: $space-3; }
.my4 { margin-top: $space-4; margin-bottom: $space-4; }


.p1 { padding: $space-1; }
.pb1 { padding-bottom: $space-1; }
.pt1 { padding-top: $space-1; }

.p2 { padding: $space-2; }
.pb2 { padding-bottom: $space-2; }
.pt2 { padding-top: $space-2; }

.p3 { padding: $space-3; }
.pb3 { padding-bottom: $space-3; }
.pt3 { padding-top: $space-3; }

.p4 { padding: $space-4; }
.pb4 { padding-bottom: $space-4; }
.pt4 { padding-top: $space-4; }

.px1 { padding-left: $space-1; padding-right: $space-1; }
.px2 { padding-left: $space-2; padding-right: $space-2; }
.px3 { padding-left: $space-3; padding-right: $space-3; }
.px4 { padding-left: $space-4; padding-right: $space-4; }

.py1 { padding-top: $space-1; padding-bottom: $space-1; }
.py2 { padding-top: $space-2; padding-bottom: $space-2; }
.py3 { padding-top: $space-3; padding-bottom: $space-3; }
.py4 { padding-top: $space-4; padding-bottom: $space-4; }


/* Typography */
$h1: 2rem;
$h2: 1.5rem;
$h3: 1.25rem;
$h4: 1rem;
$h5: .875rem;
$h6: .75rem;

h1 { font-size: $h1 }
h2 { font-size: $h2 }
h3 { font-size: $h3 }
h4 { font-size: $h4 }
h5 { font-size: $h5 }
h6 { font-size: $h6 }


/* Helpers */
.fr { float: right; }


/* Components */
.label,
.status { text-transform: uppercase; }


/* Colors */
$red:    #e74c3c;
$orange: #f39c12;
$blue:   #3498db;
$green:  #25ba84;
$grey:   #333333;

/* Background Colors */
.bg-primary { background-color: $blue; }
.bg-info { background-color: $grey; }
.bg-danger { background-color: $red; }
.bg-success { background-color: $green; }
.bg-warning { background-color: $orange; }