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