The Core of our UI-Design used in all Fastdocs products.
Download or clone the repo and add the index.min.css file from the dist folder to your project.
| Style | Options |
|---|---|
primary |
big, full-width, center, silent, small |
secondary |
big, full-width, center, silent, small |
tertiary |
big, full-width, center, silent, small |
ghost |
big, full-width, center, silent, small |
icon |
big, full-width, center, silent, small |
danger |
big, full-width, center, silent, small |
Use the @media (min-width: $variable) to use medie queries.
| Variable | Width |
|---|---|
$s |
360px |
$m |
560px |
$l |
720px |
$xl |
1200px |
$xxl |
1640px |
| Variable | Color |
|---|---|
| --white | hsl(0, 0%, 100%) |
| --black | hsl(0, 0%, 14%) |
| --gray-200 | hsl(0, 0%, 86%) |
| --gray-300 | hsl(0, 0%, 71%) |
| --gray-400 | hsl(0, 0%, 43%) |
| --gray-500 | hsl(0, 0%, 43%) |
| --gray-600 | hsl(0, 0%, 29%) |
| --blue-100 | hsl(216, 100%, 85%) |
| --blue-200 | hsl(216, 100%, 70%) |
| --blue-300 | hsl(216, 100%, 55%) |
| --blue-400 | hsl(216, 100%, 40%) |
| --blue-500 | hsl(216, 100%, 30%) |
| --blue-600 | hsl(216, 100%, 20%) |
| --blue-700 | hsl(216, 100%, 10%) |
| --anthracite-100 | hsl(211, 25%, 96%) |
| --anthracite-200 | hsl(211, 25%, 92%) |
| --anthracite-300 | hsl(211, 25%, 88%) |
| --anthracite-400 | hsl(211, 25%, 84%) |
| --anthracite-500 | hsl(211, 25%, 63%) |
| --anthracite-600 | hsl(211, 25%, 42%) |
| --anthracite-700 | hsl(211, 25%, 21%) |
| --green-100 | hsl(143, 55%, 90%) |
| --green-200 | hsl(143, 55%, 81%) |
| --green-300 | hsl(143, 55%, 71%) |
| --green-400 | hsl(143, 55%, 62%) |
| --green-500 | hsl(143, 55%, 46%) |
| --green-600 | hsl(143, 55%, 31%) |
| --green-700 | hsl(143, 55%, 15%) |
| --yellow-100 | hsl(33, 90%, 91%) |
| --yellow-200 | hsl(33, 90%, 83%) |
| --yellow-300 | hsl(33, 90%, 74%) |
| --yellow-400 | hsl(33, 90%, 65%) |
| --yellow-500 | hsl(33, 90%, 49%) |
| --yellow-600 | hsl(33, 90%, 32%) |
| --yellow-700 | hsl(33, 90%, 16%) |
| --red-100 | hsl(0, 95%, 94%) |
| --red-200 | hsl(0, 95%, 87%) |
| --red-300 | hsl(0, 95%, 81%) |
| --red-400 | hsl(0, 95%, 75%) |
| --red-500 | hsl(0, 95%, 56%) |
| --red-600 | hsl(0, 95%, 37%) |
| --red-700 | hsl(0, 95%, 19%) |