Stooge CSS

A powerful, intuitive CSS framework for fast web development

Stooge CSS Documentation

Components

Class name	Description
btn	required for background animation
btn-group	animate on hover
code	rotate transform
pre	Text hover animations
kbd	Text animation

Create all sorts of shapes, colors and animations easily.

To add green-11 as the button background, add bc-green-11 to the class. To add red-2 as a border, add b-red-2, font color white is simply white in the class section.

The button names represent most of the hover effects you can have on a button eg class=hover-underline will make the font be underlined when you hover over the button.

There are over 150 pre-defined colors for you to choose from. You can see in the "Colors" section or add your own in CSS.

Button

<button type="button" class="btn wi-8 he-3 pa-05 ta-ce bc-green-light-8 bo-brown-7 br-05 bsw-2">Button</button>

<button type="button" class="btn wi-8 he-3 pa-05 ta-ce bc-lime-5 indigo-14 bw-0">rectangle</button>

<button type="button" class="btn wi-65 he-3 py-05 px-1 fs-1 fw-6 bsw-3 br-2 white bc-teal-15 bo-purple-11">Rounded</button>

<button type="button" class="btn wi-8 he-3 py-05 px-1 fs-1 fw-4 bw-3 br-3 bodoni white bc-red-13 bo-blue-14">Contact Us</button>

<button type="button" class="btn wi-6 he-6 fs-1 fw-4 bw-0 br-50-p bsw-2 white bc-green-11 bo-red-11">Round button</button>

<button type="button" class="btn wi-8 he-3 py-05 px-1 fs-1 fw-4 bw-4 br-05 bt-dashed white bc-purple-16 bo-green-9">Dashed</button>

<button class="btn wi-12 he-4 bc-red-7 shadow-2 border-color bw-0">shadow-2</button>

<button class="btn wi-12 he-4 bc-cyan-5 bo-brown-4 shadow-4 border-color bw-2 underline">shadow-5</button>

<button type="button" class="btn wi-12 py-1 px-2 purple-11 bc-cyan-7 bo-purple-11 bsw-3 fw-6 focus-shadow-4">Click me - focus-shadow-4</button>

The .btn class adds some default properties like "outline: none;". Copy and paste .btn into your CSS file and copy and paste the HTML code to immediately have a decent button.

Depending on the browser, when adding the .btn to an anchor <a>, the text may go bold on hover and the anchor width will expand slightly and cause things to the right of it to move to the right. To fix this, you can either fix the width eg w10 or you could add the following hover-fw-4 hover-text-fw-7. This keeps the font-weight the same but adds text-shadow on hovering over the anchor.

Button Group

.btn-group can be used to create button groups. Use it in a div outside a list of buttons.

These two buttons use the .btn class which add some defaults like "outline: none;". Copy and paste .btn into your CSS file and copy and paste the HTML code to immediately have a decent button.

HTML:

<div class="btn-group" role="group" aria-label="First group">
	<button type="button" class="btn px-15 py-075 bc-grey-17 white bo-none bsw-0 br-2">Left</button>
	<button type="button" class="btn px-15 py-075 bc-grey-17 white bo-none bsw-0">Middle</button>
	<button type="button" class="btn px-15 py-075 bc-grey-17 white bo-none bsw-0 br-2">Right</button>
</div>

Anchor tags (Links)

The .link class provides some sensible anchor link defaults.

Basic anchor tag Basic anchor tag Basic button link

.link-visited is a special class that makes any visited links the same color as non-visited links ie currentColor instead of the browser default color for visited links (usually purple).

Text fields

The .txt class provides some sensible text field defaults.

<input type="text" class="txt" placeholder="Text field">

Image-Text and Text-Image

This is to put an image and text side by side. It's totally responsive. Just cut and paste the code. No media statements needed.

There is Image-Text and Text-Image

On mobile, the image goes on top of the text for both.

Assumptions and Settings - The picture is around 450px x 450px, it may vary from this but not be too small or too big. It is best that the picture be larger than the text provided.

The pictures are aligned to the center so that if the picture is smaller, it isn't far from the text. ta-l and ta-r are used in the "image-block" to achieve this.

m4 is the responsive setting. Below 900px, the Image and Text go on seperate lines.

Image-Text

Image on the left and text on the right on desktop. For mobile, image is on the top and text below it. wrap-reverse-m4 reverses the order for mobile.