BristleconeA Design System for Crafting Modern Web Apps

v15.14.0

A 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.

Components

Animation

System Props

Accessibility

Getting Started

⚠️ This project is a work in progress! Optimization for production use is anticipated by Spring 2019. This site has a baked-in `Dark Mode` theme that will automatically load if you have enabled dark mode in iOS.

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 the header 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 the header element