The Fastdocs Core UI-Kit

The Core of our UI-Design used in all Fastdocs products.

Usage

Download or clone the repo and add the index.min.css file from the dist folder to your project.

Classes and Variables

Button Styles

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

Media Queries

Use the @media (min-width: $variable) to use medie queries.

Variable	Width
$s	360px
$m	560px
$l	720px
$xl	1200px
$xxl	1640px

Colors

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%)