This project is a design system starter kit, it is not a framework like Bootstrap. It has no opinions on how your site looks (apart from including normalize.css, which can be exluded)
It is a collection of mixins and tokens to help you develop lightweight and consistent components using a system, rather than writing bespoke CSS per component.
To build the stylesheet and the SASS Documentation, simply run:
npm run buildThe documentation will then be available in a folder called ./sassdoc.
When working on the design system, run the following command to update the stylesheet. This will also watch for any changes to the SASS files.
npm run devThe below is just a brief overview of what's included, to get more extensive documentation, generate the Sassdoc documentation.
visually-hiddenmixin to hide elements but still make them available to screenreaders, useful for skip links, transcripts, etc.focusandfocus-inlinemixins to add a focus border around elements.
$focus-offset-defaultlength$focus-radiuslength
transitionmixin to add a basic transition to any propertytransition-opacitya shortcut mixin to transition the opacity of an element onlytransition-transforma shortcut mixin to transition the transform of an element only, useful for scaling/sliding elements.
$animation-durationmap$animation-easing-basestring$animation-easingmap
bordermixin to add a simple borderborder-outsidemixin to add a border that won't break the gridborder-radiusmixin to add a border radiusborder-trianglemixin to add a triangle to any element, useful for tooltips/speech bubbles.
$border-radius$border-radius--small
media-breakpoint-upmixin to target a particular media breakpoint and upmedia-breakpoint-downmixin to target a particular media breakpoint and lowermedia-breakpoint-onlymixin to target a particular media breakpoint onlymedia-breakpoint-betweenmixin to target between two breakpointsmedia-pixelratio-upmixin to target devices with different pixel ratios (e.g. high-res devices vs standard)
$pixelratiosmap$breakpointsmap
colourfunction that looks up a colour value by name and variation e.g.background: colour('blue', 'lighter')
$coloursmap
spacingfunction that returns a length by variant e.g.padding: spacing(xxl)fibonaccifunction that returns the fibonacci value for a given number e.g.fibonacci(7)will return13.
$spacing-base-unitlength$spacing-base-factorlength$spacing-mapstring$spacing-linearmap$spacing-geometricmap$spacing-fibonaccimap
font-familymixin that looks up a font-family value by namebreak-word-without-hyphenmixin that breaks words that are too long for a container without a hyphenbreak-word-with-hyphenmixin that breaks words that are too long for a container with a hypentruncate-with-ellipsismixin that truncates text that is too long for a container with an ellipsis
$font-familystring
- Better README
- Examples
- Improved naming conventions
- Modular scale typography