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 |