Stooge CSS
A powerful, intuitive CSS framework for fast web development
Stooge CSS Documentation
Colors
There is a large list of background, border and font. You also have animation options on hover.
colors can be applied to text, buttons and anything else where color applies.
| Property | Abbreviation | Example |
| color | (color)-(number) | orange-11 |
| color - on hover and on focus | hover-(color)-(number) | hover-blue-light-16 |
| color - on hover and on focus | hover-transparent | hover-transparent |
| color - on hover and on focus | hover-inherit | hover-inherit |
| background-color | bc-(color)-(number) | bc-orange-deep-14 |
| background-color - on hover and on focus | hover-bc-(color)-(number) | hover-bc-orange-deep-14 |
| background-color | bc-transparent | bc-transparent |
| background-color - on hover and on focus | hover-bc-transparent | hover-bc-transparent |
| background-color | bc-inherit | bc-inherit |
| background-color - on hover and on focus | hover-bc-inherit | hover-bc-inherit |
| background-color | striped-bc-(color)-(number) | hover-striped-brown-6 |
| border-color | bo-(color)-(number) | bo-lime-5 |
| border-color - on hover and on focus | hover-bo-(color)-(number) | hover-bo-yellow-4 |
| border-color | bo-transparent | bo-transparent |
| border-color - on hover and on focus | hover-bo-transparent | hover-bo-transparent |
| border-color | bo-inherit | bo-inherit |
| border-color - on hover and on focus | hover-bo-inherit | hover-bo-inherit |
There are over 150 pre-defined colors for you to choose from. The list of colors is below.
Each color gets darker as the number gets larger. If you want an orange color, not dark or not too light, go mid level orange-9 and increase or reduce that to find the right color.
Font color
To add a font color, add the color name in class eg This is red-8 <p class="red-8">This is red-8</p>
Background color
To add a color background to a button or a <div>, add "bc-" infront of the color name. The button example below has "orange-deep-14"
This text is highlighted - bc-yellow-4
Border color
To add a color border to a button, add "bo-" infront of the color name. The button example below has "bo-green-14". Add a border width class, we've added 'bsw-3' here.
Hover
You can change font color, background or border color when an HTML element is hovered over.
This button changes font color, background or border color on hovering over it.
Color can also be applied to tables to make them striped. There are lots of other options for animation and coloring you will see in other sections.
Red
red-1 #ffebee
red-2 #FCEBEA
red-3 #ffcdd2
red-4 #F9ACAA
red-5 #ef9a9a
red-6 #ff8a80
red-7 #e57373
red-8 #ef5350
red-9 #ff5252
red-10 #EF5753
red-11 #f44336
red-12 #e53935
red-13 #ff1744
red-14 #E3342F
red-15 #d32f2f
red-16 #CC1F1A
red-17 #c62828
red-18 #d50000
red-19 #b71c1c
red-20 #621B18
red-21 #3B0D0C
Orange Deep
orange-deep-1 #fbe9e7
orange-deep-2 #ffccbc
orange-deep-3 #ffab91
orange-deep-4 #ff9e80
orange-deep-5 #ff8a65
orange-deep-6 #ff7043
orange-deep-7 #ff6e40
orange-deep-8 #ff5722
orange-deep-9 #f4511e
orange-deep-10 #ff3d00
orange-deep-11 #e64a19
orange-deep-12 #d84315
orange-deep-13 #dd2c00
orange-deep-14 #bf360c
Orange
orange-1 #FFF5EB
orange-2 #fff3e0
orange-3 #ffe0b2
orange-4 #FCD9B6
orange-5 #ffcc80
orange-6 #ffb74d
orange-7 #ffa726
orange-8 #FAAD63
orange-9 #F6993F
orange-10 #ff9800
orange-11 #fb8c00
orange-12 #ff9100
orange-13 #f57c00
orange-14 #ff6d00
orange-15 #ef6c00
orange-16 #DE751F
orange-17 #e65100
orange-18 #613B1F
Yellow
yellow-1 #FCFBEB
yellow-2 #fffde7
yellow-3 #fff9c4
yellow-4 #fff59d
yellow-5 #FFF382
yellow-6 #ffff8d
yellow-7 #fff176
yellow-8 #ffee58
yellow-9 #FFED4A
yellow-10 #ffeb3b
yellow-11 #ffff00
yellow-12 #ffea00
yellow-13 #ffd600
yellow-14 #fdd835
yellow-15 #F2D024
yellow-16 #fbc02d
yellow-17 #f9a825
yellow-18 #f57f17
Brown
brown-1 #efebe9
brown-2 #d7ccc8
brown-3 #bcaaa4
brown-4 #a1887f
brown-5 #8d6e63
brown-6 #d14a4a
brown-7 #cc3636
brown-8 #b92f2f
brown-9 #a52a2a
brown-10 #912525
brown-11 #7c2020
brown-12 #681a1a
brown-13 #795548
brown-14 #6d4c41
brown-15 #5d4037
brown-16 #4e342e
brown-17 #3e2723
Lime
lime-1 #f0f4c3
lime-2 #eeff41
lime-3 #dce775
lime-4 #d4e157
lime-5 #cddc39
lime-6 #c6ff00
lime-7 #aeea00
lime-8 #c0ca33
lime-9 #afb42b
lime-10 #9e9d24
lime-11 #827717
Green Light
green-light-1 #f1f8e9
green-light-2 #dcedc8
green-light-3 #c5e1a5
green-light-4 #aed581
green-light-5 #9ccc65
green-light-6 #ccff90
green-light-7 #b2ff59
green-light-8 #76ff03
green-light-9 #64dd17
green-light-10 #8bc34a
green-light-11 #7cb342
green-light-12 #689f38
green-light-13 #558b2f
green-light-14 #33691e
Green
green-1 #e8f5e9
green-2 #E3FCEC
green-3 #c8e6c9
green-4 #a5d6a7
green-5 #b9f6ca
green-6 #A2F5BF
green-7 #69f0ae
green-8 #51D88A
green-9 #81c784
green-10 #00e676
green-11 #66bb6a
green-12 #38C172
green-13 #00c853
green-14 #4caf50
green-15 #43a047
green-16 #1F9D55
green-17 #388e3c
green-18 #2e7d32
green-19 #1b5e20
green-20 #1A4731
green-21 #0F2F21
Teal
teal-1 #e0f2f1
teal-2 #E8FFFE
teal-3 #b2dfdb
teal-4 #A0F0ED
teal-5 #a7ffeb
teal-6 #64ffda
teal-7 #64D5CA
teal-8 #80cbc4
teal-9 #1de9b6
teal-10 #4db6ac
teal-11 #4DC0B5
teal-12 #00bfa5
teal-13 #009688
teal-14 #38A89D
teal-15 #00897b
teal-16 #00796b
teal-17 #00695c
teal-18 #004d40
teal-19 #20504F
teal-20 #0D3331
Cyan
cyan-1 #e0f7fa
cyan-2 #b2ebf2
cyan-3 #80deea
cyan-4 #84ffff
cyan-5 #18ffff
cyan-6 #00e5ff
cyan-7 #4dd0e1
cyan-8 #26c6da
cyan-9 #00bcd4
cyan-10 #00acc1
cyan-11 #0097a7
cyan-12 #00838f
cyan-13 #006064
Indigo
indigo-1 #e8eaf6
indigo-2 #E6E8FF
indigo-3 #c5cae9
indigo-4 #9fa8da
indigo-5 #B2B7FF
indigo-6 #8c9eff
indigo-7 #7986cb
indigo-8 #536dfe
indigo-9 #3d5afe
indigo-10 #304ffe
indigo-11 #7886D7
indigo-12 #6574CD
indigo-13 #5c6bc0
indigo-14 #5661B3
indigo-15 #3f51b5
indigo-16 #3949ab
indigo-17 #303f9f
indigo-18 #283593
indigo-19 #1a237e
indigo-20 #2F365F
indigo-21 #191E38
Purple
purple-1 #f3e5f5
purple-2 #F3EBFF
purple-3 #e1bee7
purple-4 #D6BBFC
purple-5 #ce93d8
purple-6 #ea80fc
purple-7 #e040fb
purple-8 #d500f9
purple-9 #aa00ff
purple-10 #ba68c8
purple-11 #ab47bc
purple-12 #9c27b0
purple-13 #A779E9
purple-14 #9561E2
purple-15 #794ACF
purple-16 #8e24aa
purple-17 #7b1fa2
purple-18 #6a1b9a
purple-19 #4a148c
purple-20 #382B5F
purple-21 #21183C
Purple Deep
purple-deep-1 #ede7f6
purple-deep-2 #d1c4e9
purple-deep-3 #b39ddb
purple-deep-4 #9575cd
purple-deep-5 #b388ff
purple-deep-6 #7c4dff
purple-deep-7 #651fff
purple-deep-8 #6200ea
purple-deep-9 #7e57c2
purple-deep-10 #673ab7
purple-deep-11 #5e35b1
purple-deep-12 #512da8
purple-deep-13 #4527a0
purple-deep-14 #311b92
Pink
pink-1 #FFEBEF
pink-2 #fce4ec
pink-3 #FFBBCA
pink-4 #f8bbd0
pink-5 #ff80ab
pink-6 #FA7EA8
pink-7 #f48fb1
pink-8 #F66D9B
pink-9 #f06292
pink-10 #EB5286
pink-11 #ec407a
pink-12 #ff4081
pink-13 #f50057
pink-14 #e91e63
pink-15 #d81b60
pink-16 #c2185b
pink-17 #c51162
pink-18 #ad1457
pink-19 #880e4f
pink-20 #6F213F
pink-21 #451225
Blue
blue-1 #EFF8FF
blue-2 #e3f2fd
blue-3 #BCDEFA
blue-4 #bbdefb
blue-5 #90caf9
blue-6 #82b1ff
blue-7 #64b5f6
blue-8 #6CB2EB
blue-9 #42a5f5
blue-10 #448aff
blue-11 #2196f3
blue-12 #3490DC
blue-13 #1e88e5
blue-14 #2979ff
blue-15 #2962ff
blue-16 #1976d2
blue-17 #2779BD
blue-18 #1565c0
blue-19 #0d47a1
Blue Light
blue-light-1 #e1f5fe
blue-light-2 #b3e5fc
blue-light-3 #81d4fa
blue-light-4 #80d8ff
blue-light-5 #4fc3f7
blue-light-6 #40c4ff
blue-light-7 #29b6f6
blue-light-8 #00b0ff
blue-light-9 #03a9f4
blue-light-10 #039be5
blue-light-11 #0091ea
blue-light-12 #0288d1
blue-light-13 #0277bd
blue-light-14 #01579b
Blue Grey
blue-grey-1 #eceff1
blue-grey-2 #cfd8dc
blue-grey-3 #b0bec5
blue-grey-4 #90a4ae
blue-grey-5 #78909c
blue-grey-6 #607d8b
blue-grey-7 #546e7a
blue-grey-8 #455a64
blue-grey-9 #37474f
blue-grey-10 #263238
Grey
grey-1 #fafafa
grey-2 #F8FAFC
grey-3 #F1F5F8
grey-4 #f5f5f5
grey-5 #eeeeee
grey-6 #DAE1E7
grey-7 #e0e0e0
grey-8 #B8C2CC
grey-9 #bdbdbd
grey-10 #8795A1
grey-11 #9e9e9e
grey-12 #606F7B
grey-13 #757575
grey-14 #616161
grey-15 #3D4852
grey-16 #424242
grey-17 #22292F
grey-18 #212121
White
white rgba(255,255,255)
white-0125 rgba(255,255,255,.0125)
white-025 rgba(255,255,255,.025)
white-05 rgba(255,255,255,05)
white-10 rgba(255,255,255,.1)
white-20 rgba(255,255,255,.2)
white-30 rgba(255,255,255,.3)
white-40 rgba(255,255,255,.4)
white-50 rgba(255,255,255,.5)
white-60 rgba(255,255,255,.6)
white-70 rgba(255,255,255,.7)
white-80 rgba(255,255,255,.8)
white-90 rgba(255,255,255,.9)
Black
black rgba(0,0,0)
black-0125 rgba(0,0,0,.0125)
black-025 rgba(0,0,0,.025)
black-05 rgba(0,0,0,.05)
black-10 rgba(0,0,0,.1)
black-20 rgba(0,0,0,.2)
black-30 rgba(0,0,0,.3)
black-40 rgba(0,0,0,.4)
black-50 rgba(0,0,0,.5)
black-60 rgba(0,0,0,.6)
black-70 rgba(0,0,0,.7)
black-80 rgba(0,0,0,.8)
black-90 rgba(0,0,0,.9)