Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.
All style components are viewable online.
As our code base expands, maintaining and remembering all the CSS class names has become difficult. The code.gov Style Guide makes the search and usage of CSS classes easier by providing examples of their usage. These styles are not meant for usage outside of code.gov. Feel free to fork this though if you want to create your own style guide :-)
$ npm i @code.gov/code-gov-style
Link this package to edit Code.gov styles locally
You may want to view your style changes in the code-gov-style repo on your local machine for testing. Follow these steps to do so:
- Clone the latest version of the
npm installto install the dependencies required for the package in the
npm linkin the root level of the
code-gov-styledirectory on your local machine.
- On the
code-gov-front-endproject, clone the repository and run
npm installif you haven’t done this already.
npm link @code.gov/code-gov-stylein the root level of the code-gov-front-end directory on your local machine.
You are now using the latest version of the code.gov design system via your cloned version when running the
code-gov-front-end site on your local machine. To stop using this version, run
npm unlink @code.gov/code-gov-style from the root level of the
We use the fa-search icon from Font Awesome. Font Awesome released their fa-search icon under this license https://creativecommons.org/licenses/by/4.0/
We copy-pasted some code from the
hamburgers library to
_hamburgers.scss. Hamburgers was created by Jonsuh. Hamburgers is released under the MIT License and can be found here https://github.com/jonsuh/hamburgers/blob/master/LICENSE as well as in the licenses folder in this repository.
Have a question? Check out our FAQS. If it's not there, feel free to post an issue or email us :-)
Contact Daniel J. Dufour at firstname.lastname@example.org if you have any questions