CSS Bricks
1. Colours | |
---|---|
Class | CSS |
c-white | color: #fff |
c-grey | color: #838383 § |
c-black | color: #000 § |
c-red | color: #D42C2C § |
c-orange | color: #FF6600 § |
c-yellow | color: #FFCC00 § |
c-green | color: #33CC33 § |
c-blue | color: #0066FF § |
c-purple | color: #9966FF § |
c-pink | color: #FF33CC § |
c-brown | color: #663300 § |
2. Layout | |
---|---|
Class | CSS |
dis-b | display:block |
dis-f | display:flex |
dis-n | display:none |
jc-sb | justify-content:space-between |
jc-sa | justify-content:space-around |
jc-fe | justify-content:flex-end |
jc-fs | justify-content:flex-start |
fl-w | flex-wrap: wrap |
fl-nw | flex-wrap: nowrap |
w-full | width: 100% |
w-half | width: 50% |
w-third | width: 33.333333% |
w-quarter | width: 25% |
h-full | height: 100% |
h-half | height: 50% |
h-quart | height: 25% |
fl-r | float: right |
fl-l | float: left |
cl-r | clear: right |
cl-l | clear: left |
cl-b | clear: both |
m-0 | margin:0 |
mt-0_5 | margin-top: 0.5em |
mb-0_5 | margin-bottom: 0.5em |
pos-r | position: relative |
pos-f | position: fixed |
pos-a | position: absolute |
mb-[0-10] | margin-bottom: [0-10]em |
mt-[0-10] | margin-top: [0-10]em |
op-[0-10] | opacity: [0.1 - 1.0] |
3. Font/Text | |
---|---|
Class | CSS |
fw-b | font-weight: bold |
fw-n | font-weight: normal |
fz-0_5 | font-size: 0.5em |
fz-1_5 | font-size: 1.5em |
ta-r | text-align: right |
ta-l | text-align: left |
ta-c | text-align: center |
tt-u | text-transform: uppercase |
td-n | text-decoration:none |
td-u | text-decoration:underline |
fz-[0-5] | font-size: [0-5]em |
p-[0-5] | padding: [0-5]em |
4. The Rest | |
---|---|
Class | CSS |
trans-2 | transition: 0.2s |
trans-3 | transition: 0.3s |
cur-p | cursor: pointer |
rounded | border-radius: 20em |