Stooge CSS

Develop fast. CSS in HTML

Stooge CSS

A powerful, intuitive CSS framework for fast web development

Stooge CSS Documentation

  Layout and Position

 

Display

Use the green columns (second and fourth columns) to get the property and value you want eg di-fl. Seperate it by a '-' dash.

Property Abbrev Value Abbrev Units
display di none no
display di inline in
display di block bl
display di inline-block ib
display di inline-table it
display di table ta
display di table-cell tc
display di table-row tr
display di table-row-group rg
display di table-column to
display di table-column-group cg
display di flex fl
display di inline-flex if
 

Position

Use the green columns (second and fourth columns) to get the property and value you want eg zt-10. Seperate it by a '-' dash.

Property Abbrev Value Abbrev Units
position po static st
position po relative re
position po absolute ab
position po fixed fi
top t 0, 1, 2 0, 1, 2 n
bottom b 0, 1, 2 0, 1, 2 n
left l 0, 1, 2 0, 1, 2 n
right r 0, 1, 2 0, 1, 2 n
x-center margin: 0; position: absolute; left: 50%; transform: translateX(-50%);
y-center margin: 0; position: absolute; top: 50%; transform: translateY(-50%);
xy-center margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
sticky position: sticky !important;
fixed-bottom position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030;
absolute-fill top: 0; right: 0; bottom: 0; left: 0;
float fo left l
float fo right r
float fo none no
float fo both bo
z-index zi 0, 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 999, 9999 0, 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 999, 9999
z-index zi max
z-index zi inherit ih
z-index zi initial ii
z-index zi auto au
z-index zi unet un

Special case CSS class names and classes with more than one property and classes that are different to the Stooge CSS name format.

xy-center
y-center
x-center
po-ab b-1 r-2

In the outer div, it uses po-re to make it position: relative

Each of the four rectangles have shape and text by these classes: he-4 - height: 4rem, we-65 - width: 6.5rem, fs-1 - font-size: 1rem, ta-ce - text-align: center, white - color: #fff

HTML:

<div class="wi-100-p bsw-1 he-20a mt-2 pa-1 po-re mb-2">
    <div class="he-4 wi-65 bc-green-15 xy-center fs-1 ta-ce white">xy-center</div>
    <div class="he-4 wi-65 bc-indigo-14 y-center fs-1 ta-ce white">y-center </div>
    <div class="he-4 wi-65 bc-purple-deep-7 x-center fs-1 ta-ce white">x-center</div>
    <div class="po-ab b-1 r-2 he-4 wi-65 bc-cyan-10 fs-1 ta-ce white">po-ab b-1 r-2</div>
</div>
 

Containers

Containers are commonly used base components of a webpages layout.

The .container class has padding, max-width, centering and responsive code with a max-width for each breakpoint.

<div class="container">     
  <!-- Content here -->
</div>

.container-fluid has no maximum width. Width adjusts to the screen size with a fixed padding.

<div class="container-fluid">     
  <!-- Content here -->
</div>

.wrapper has padding and maximum width only. Similar to .container but without margin-left: auto and margin-right: auto.

<div class="wrapper">     
  <!-- Content here -->
</div>
 

Flexbox and Responsiveness

Use the green columns (second and fourth columns) to get the property and value you want eg mt-05. Seperate it by a '-' dash.

Property Abbrev Value Abbrev Units
flex fl initial ii
flex fl auto au
flex fl none no
flex fl 1 1
flex fl 2 2
flex fl 3 3
flex fl 4 4
fl auto flex: 1 1 auto; min-width: 0; min-height: 0
flex-grow fg 0 0
flex-grow fg 1 1
flex-shrink fh 0 0
flex-shrink fh 1 1
flex-direction fd row ro
flex-direction fd row-reverse rr
flex-direction fd column co
flex-direction fd column-reverse cr
flex-wrap fw wrap wr
flex-wrap fw wrap-reverse we
flex-wrap fw nowrap nw
align-items ai flex-start fs
align-items ai flex-end fe
align-items ai flex-auto fa
align-items ai center ce
align-items ai baseline ba
align-items ai stretch st
align-content ac flex-start fs
align-content ac flex-end fe
align-content ac center ce
align-content ac space-between sp
align-content ac space-around sa
align-content ac stretch st
align-self as flex-start fs
align-self as flex-end fe
align-self as center ce
align-self as baseline ba
align-self as stretch st
align-self as flex-auto fa
justify-content jc flex-start fs
justify-content jc flex-end fe
justify-content jc center ce
justify-content jc space-between sp
justify-content jc space-around sa

Add '-m1' to '-m5' to get the responsiveness you require. Add '-m3' to the class to make the class work for screen sizes under 1200px. To get max-width: 75% for screens below 1800px, you add mw-75-p-m2.

max-width Class
min-width 1800px -m1
max-width 1800px -m2
max-width 1200px -m3
max-width 900px -m4
max-width 600px -m5

In this example below, for desktop width, the blue box is flex row and height is 6.5 rem, below 1200px, the blue box becomes flex column with height 16rem.

The main classes are di-fl (display: flex), fd-ro (flex-direction: row !important) and fd-co-m3 (flex-direction: column !important below 1200px)

For child items, fl-auto (flex: 1 1 auto; min-width: 0;min-height:0)

1
2
3
4
<div class="wi-100 he-65 mt-15 bc-blue-17 he-16-m3">
    <div class="di-fl fd-ro wi-100-p he-100-p fd-co-m3">
        <div class="fl-auto bc-orange-10 bsw-7 bo-purple-17 ma-075 pt-025 fs-1 ta-ce white">1</div>
        <div class="fl-auto bc-orange-10 bsw-7 bo-purple-17 ma-075 pt-025 fs-1 ta-ce white">2</div>
        <div class="fl-auto bc-orange-10 bsw-7 bo-purple-17 ma-075 pt-025 fs-1 ta-ce white">3</div>
        <div class="fl-auto bc-orange-10 bsw-7 bo-purple-17 ma-075 pt-025 fs-1 ta-ce white">4</div>
    </div>
</div>