nrcs-design-system

React UI components for the NRCS Design System based on Reactstrap/Bootstrap 4

Usage no npm install needed!

<script type="module">
  import nrcsDesignSystem from 'https://cdn.skypack.dev/nrcs-design-system';
</script>

README

NRCS Design System

A design system produced for our partners at NRCS.

An adaptation of the FPAC Design System and its inherent roots from the U.S. Web Design System

A resource with specifics and expanded documentation meant as a compliment to the FPAC Design System documentation, all to support the current needs of coordinated efforts building apps at NRCS.

If you are working on a project with FPAC or its related agencies, it is suggested you consider starting FPAC design system first.

  • Designed with clean simple styles, high color contrast, and accessible components for accessibilty.
  • Provides color, typography, iconography, components and examples with documentation for how to use them.
  • Provides two sizing scales for typography and components for different use cases, for example in larger public website to more compact and data-heavy web applications.
  • The intent is to provide a solution for our development teams to converge upon for consistent implementation in design and style.
  • Provides a React UI component library in two sizes, Default and Small out-of-the-box for use with different use cases (website vs compact data application). It covers implementations of most FPAC components, a handful of custom complex components, and some use of Reactstrap components for layout and forms.
  • The NRCS Design System and this website is built with React (via Create React App), Storybook, using Reactstrap, and based on a custom Bootstrap theme. The source for this project can serve as an example implementation of the NRCS Design System components and styles as well as a rough application skeleton.