Skip to content

A powerful, intuitive CSS framework for fast web development

License

Notifications You must be signed in to change notification settings

chrisjwaddell/Stooge-CSS

Repository files navigation

Stooge CSS

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.

How Stooge CSS works

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.

Property name

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.

Value

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;

Units

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

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% and 50% for devices smaller than 1200px.

How to get started

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">

Table of Contents

Documentation

See Documentation website OR See Github Documentation

Contributions

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!

License

Code and documentation copyright 2022 by Chris Waddell. Licensed under the MIT License.