Stooge CSS
A powerful, intuitive CSS framework for fast web development
Stooge CSS Documentation
About Stooge CSS
Introduction
Stooge CSS is a utility-based CSS framework designed to be powerful and also very fast to learn. It assumes some knowledge of CSS and allows you to put your CSS (abbreviated) in HTML for fast development of websites.
Assuming you know a little CSS, you can achieve so much more than a standard button with a choice of three colors which is the limit that some CSS frameworks provide.
Stooge CSS has components, responsiveness and an easy to use color system. So easy and so powerful.
Class name format
There are two parts to the CSS class name (three if you use units other than rem). The format is as follows:
(property name abbreviation)-(value abbreviation)
Property name abbreviation
Each CSS property is referred to by it's first two characters. If it has two words, it's the initials of those first two words.
eg line-height: 1.25 becomes lh-125, border-width: 4.5rem becomes bw-45
If the property or value is only one word, it takes the first two letters and if it's two words, it takes the first letter of each word eg margin is ma, word-spacing is ws. There are exceptions to that if a two letter combination is taken by another CSS property.
Value abbreviation
Values have the same naming convention to class name eg auto is au. inline-flex is if.
di-ib is display: inline-block;
There are some common pre-defined values eg mx-3 is defined as:
.mx-3 {
margin-left: 3rem;
margin-right: 3 rem;
}
Units
If units are not defined, they default to rem units in most cases. p is percentage, n is negative, vh is vh.
mw-50-p is max-width: 50%
ma-1-n is margin: -1rem
he-100-vh is height: 100vh
Responsiveness
Just add -m1, -m2, up to -m5 to the class name.
wi-100-p-m1 wi-50-p-m3 would give you width of 100% on large devices and 50% for devices smaller than 1200px.
Some common abbreviations
| Property | Abbreviation |
| margin/padding | ma/pa |
| margin/padding-top/right/bottom/left/x(left and right/y (top and bottom) | m/p /t/r/b/l/x/y eg ml (margin-left) |
| top/right/bottom/left | t/r/b/l - this abbreviation holds for properties and property values of these names |
| none | no |
| inline | in |
| block | bl |
| inline-block | ib |
| initial | ii |
| inherit | ih |
| unset | un |
| static | st |
| auto | au |
| none | no |
| center | ce |
| block | bl |
| flex-start | fs |
| flex-end | fe |
| fixed | fi |
| nowrap | nw |
| Numbers for things like margin, padding | 0 to 25(2.5rem) it goes up by 025, 25 to 65 (6.5rem) it goes up by 05, 8 to 16 goes up by 2. 0, 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 45, 5, 55, 6, 65, 8, 10, 12, 14, 16 |
Getting Started
Place these lines into the <head> of your HTML file.
<link href="https://cdn.jsdelivr.net/gh/chrisjwaddell/Stooge-CSS@main/dist/stooge.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/chrisjwaddell/Stooge-CSS@main/dist/stooge-responsive.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/chrisjwaddell/Stooge-CSS@main/dist/stooge-colors.css" rel="stylesheet">