FPAC Design System Site

Open Source design resource and guidelines establishing a cohesive user experience across USDA Farm Production and Conservation (FPAC).

The Design System comprises of two core repositories:

1. fsa-design-system: Source code for the Design System web site, documenting fsa-style and accompanying guidelines.
2. fsa-style: CSS Framework: style assets (HTML, CSS, Images) available for download or install, as documented by the Design System web site.

Using fsa-style

Refer to Design System > Get Started for directions on using fsa-style assets as a dependency.

Running fsa-design-system locally

The Design System site is built using Jekyll for the file framework and static site, Grunt for task management, incorporates the fsa-style node module for its style, and is deployed via GitHub Pages at http://usda-fsa.github.io/fsa-style/.

1. Before you start

You will need to have the following installed on your machine before following the commands below:

1. Ruby v2.2.3+, Installation guides. Windows machines additionally require DevKit.
2. Node v0.12.0+, Installation guides

2. Fork

Fork this repo into your GitHub account (or just clone it if you're a member of the USDA-FSA GitHub Organization). Read more about forking a GitHub repository.

3. Building the documentation with Grunt

The documentation is built using Grunt automation. To use Grunt, first make sure you have it installed on your machine (globally):

npm install -g grunt-cli.

To start, run the following command to install Ruby and NPM dependencies:

npm run install-dep

Now that all of your dependencies are installed, you can run your local server by running the following command:

npm start

Go to http://localhost:4000/fsa-design-system/ in your browser — you should be viewing a local instance of http://usda-fsa.github.io/fsa-design-system/.

Contributing

Please read our contributing guidelines to learn how to open issues and submit pull requests as well as the coding and design standards we follow.