Stooge CSS
A powerful, intuitive CSS framework for fast web development
Stooge CSS Documentation
Spacing
Width and Height
Use the green columns (second and fourth columns) to get the property and value you want eg mt-05. Seperate it by a '-' dash.
Remember to put in the '-p','-vh' or '-vw' if you have that option and you want percentage or vh or vw. Also, remember than 'a' is needed for units more than 20rem, to distinguish between 35rem and 3.5rem.
| Property | Abbrev | Value | Abbrev | Units |
| width | wi | auto | au | |
| width | wi | inherit | ii | |
| width | wi | 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| width | wi | 20, 24, 25, 30, 32, 35, 40, 45, 48, 50, 55, 60, 64, 70, 72, 75, 80, 85, 88, 96 | a | |
| width | wi | 10, 15, 20, 25, 30, 33, 34, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100 | p, vw | |
| width and display | wiib | display: inline-block; width: 20% | 20 | p |
| width and display | wiib | display: inline-block; width: 50% | 50 | p |
| max-width | mw | 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| max-width | mw | 20, 24, 25, 30, 32, 35, 40, 45, 48, 50, 55, 60, 64, 70, 72, 75, 80, 85, 88, 96 | a | |
| max-width | mw | none | no | |
| max-width | mw | 100 | 100 | p |
| overflow, overflow-x, overflow-y | ov, ov-x, ov-y | visible | vi | |
| overflow, overflow-x, overflow-y | ov, ov-x, ov-y | hidden | hi | |
| overflow, overflow-x, overflow-y | ov, ov-x, ov-y | scroll | sc | |
| overflow, overflow-x, overflow-y | ov, ov-x, ov-y | auto | au | |
| height | he | auto | au | |
| height | he | inherit | ih | |
| height | he | 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| height | he | 20, 24, 25, 30, 32, 35, 40, 45, 48, 50, 55, 60, 64, 70, 72, 75, 80, 85, 88, 96 | a | |
| height | he | 10, 15, 20, 25, 30, 33, 34, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100 | p, vh | |
| height and display | heib | display: inline-block; height: 20% | 20 | p |
| height and display | heib | display: inline-block; height: 50% | 50 | p |
| min-height | me | 0, 025, 05, 075, 1, 125, 15, 175, 2, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| min-height | me | 20, 24, 25, 30, 32, 35, 40, 45, 48, 50, 55, 60, 64, 70, 72, 75, 80, 85, 88, 96 | a | |
| min-height | me | none | no | |
| min-height | mh | 100 | p, vh | |
| max-height | mh | 0, 025, 05, 075, 1, 125, 15, 175, 2, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| max-height | mh | 20, 24, 25, 30, 32, 35, 40, 45, 48, 50, 55, 60, 64, 70, 72, 75, 80, 85, 88, 96 | a | |
| max-height | mh | none | no | |
| max-height | mh | 100 | p, vh | |
| margin | ma | 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | n | |
| margin | ml, mr, mt, mb, mx, my | auto | au | |
| margin | ma | margin: 0 auto | auto | |
| padding | pa | 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 | ||
| padding | pl, pr, pt, pb, px, py | auto | au | |
| vertical-align | va | baseline | ba | |
| vertical-align | va | middle | mi | |
| vertical-align | va | top | t | |
| vertical-align | va | bottom | b |
Special case CSS class names and classes with more than one property and classes that are different to the Stooge CSS name format.
Include 'a' when you want more than 20 units, this distinguishes between eg 2.0 and 20. mh-55a is 55rem, mh-55 is 5.5rem.
Most of the value lists are consistent eg width, height, max-height, margin, padding.
Dimensions are in rem unless stated otherwise with -p (percentage) or -vw or -vh
For width, height, max-width, max-height, for anything above 20rem, you must add 'a' to not be confused with other values. ma-25a is max-height: 25rem and ma-25 is max-height: 2.5rem.
Margin and padding go up to 16 rem.
Margin, Border and Padding
The below illustrations should be self explanitory.
There are some extra margin classes such as ma-auto which is margin: 0 auto. au is auto so mt-au is margin-top: auto.