Skip to content
Design System site for USDA Farm Service Agency digital products
JavaScript CSS HTML Ruby
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
_data
_includes
_layouts
_posts
_sass
components
css
fonts
getting-started
grid-and-layout
guides
img
js
sitemap
utilities
visual-style
.editorconfig
.gitignore
.scss-lint.yml
CONTRIBUTING.md
Gemfile
Gemfile.lock
Gruntfile.js
LICENSE.md
README.md
_config.yml
favicon.ico
feed.xml
index.md
package-lock.json
package.json
scratch.md
yarn.lock

README.md

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.

You can’t perform that action at this time.