Stooge CSS is a utility-based CSS framework with intuitive, consistent CSS class names making it very easy to use. Write your CSS in HTML abbreviated for super fast development.
Stooge CSS has components, responsiveness and an easy to use color system. So easy and so powerful.
Margin and padding are easier to understand eg pl-35 is padding-left: 3.5rem;. You can add buttons with any font colour, background, border, shadows or with hover effects all in one line of code. You can add any button you want with any colour or size, and it takes 20 seconds.
View the Stooge CSS Documentation page here.
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)
eg wi-25 is width: 2.5rem
bw-45 is border-width: 4.5rem
There are two characters representing a property so coding is fast.
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. Note: There are exceptions to that if a two letter combination is taken.
Margin is ma, word-spacing is ws.
There are some common pre-defined classes eg
mx-3 is defined as:
.mx-3 {
margin-left: 3rem;
margin-right: 3 rem;
}
di-ib is display: inline-block;
The default for units is rem. When not using rem, you specify the units:- 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
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% and 50% for devices smaller than 1200px.
Add this to the <head> of your HTML file:
<link href="https://cdn.rawgit.com/chrisjwaddell/Stooge-CSS/main/dist/stooge.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/chrisjwaddell/Stooge-CSS/main/dist/stooge-responsive.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/chrisjwaddell/Stooge-CSS/main/dist/stooge-colors.min.css" rel="stylesheet">
- Getting Started
- Layout and Position
- Spacing
- Visibility and Box-Model
- Text
- Components
- Animation
- Responsive
- Colors
- Purge CSS
See Documentation website OR See Github Documentation
If you'd like to help us out with the project, we welcome contributions of all types! Check out our CONTRIBUTING.md for more details on how you can help make Stooge CSS amazing!
Code and documentation copyright 2022 by Chris Waddell. Licensed under the MIT License.