BristleconeA Design System for Crafting Modern Web Apps
v15.14.0A collection of UI components and utilities to easily-and-swiftly build responsive layouts for your digital web projects. Components are assembled using React, Styled System and some other handy tooling - check out the system meta section to learn more.
Getting Started
Install Bristlecone Components in your application:
npm i @bristlecone/components
-OR-
yarn add @bristlecone/components
Same approach for other @bristlecone packages
Usage
All components are exported by name from @bristlecone/components
, so you can import them with:
import { Box, Button, Heading, Text } from '@bristlecone/components'
Pro tip: Documentation examples use live editing so you can learn how each component works by experimenting in real-time.
Styling
This project uses Styled Components under the hood to generate static CSS from some component styles.
To learn more about our styling approach for this project, check out the system meta section.
Site Overview
Toggling between themes
These docs are equipped with two themes: a default one with lighter background colors, and one with darker colors that is intended to be easy on the eyes and allowing you to focus on what you're viewing. Both themes are configured with Level AA (or greater) contrast ratio guidelines in-mind.
Toggling between these two themes is doable via two methods
- Keyboard I/O: Pressing the
shift + m
keys - User Interface: the
switch
in theheader
element
Assistance and more info
To invoke a modal with site information and usage, you can follow one of these two methods
- Keyboard I/O: Pressing the
shift + ?
keys - User Interface: Invoke the
info
icon () in theheader
element