fortune-css

🔮 Fortune

Your friendly CSS framework.

Fortune helps prototype sites by providing a set of non-blocking utilities and basic components.

• ⚡️ Light-weight at < 10kb gzipped
• ⛔️ No preprocessor required
• 📐 Easy CSS grids & flexbox
• 🌈 Customizable CSS variables

Fortune Cheat Sheet

Tokens

Gap --gap-* | rem | 0-0.75rem
Space --space-* | rem | 0-10rem
Color --color | #001f3f
State --state-& | primary | secondary | info | success | warning | danger | light | dark | disabled
Darken --darken-* | rgba
Lighten --lighten-* | rgba
Component --component-* | background-color | border-color | border-radius | border-width | focus | padding | transition | font-size

Components

Alert .alert || --alert-*
Badge .badge | --badge-*
Button .button || --button-* | font-family | font-size | font-weight | color | bg-color | border-radius | border-width | bg-color | focus
Form fieldset | label | input | select | textarea | .input-field | .input-group | .input-hint | .input-addon | .input-icon | .input-invalid | .input-valid || --input-* | --fieldset-* | --label-*
List .list-* | .list-step | .list-breadcrumb | .list-dropdown
Nav .nav | .nav-left | .nav-center | .nav-right || --nav-* Tab .tab | .tab-full | .tab-simple || --tab-*
Table table | .table-bordered | .table-hoverable | .table-striped || --table-*
Text body | a | abbr | blockquote | code | del | figure | h* | hr | img | ins | kbd | mark | p | pre | .pre | .pre-line | .pre-wrap | .nowrap | .small | sub | sup | .ellipsis | .italic | .normal | .oblique | .thin | .regular | .medium | .bold | .muted | .center | .justify | .left | .right | .line-through | .overline | .underline | .capitalize | .lowercase | .uppercase | .break-word