Farmers.gov Design System setup

---

Basic Setup

1. Clone the repository into the root directory of your site

$ git clone https://github.com/USDA-Farmers-gov/farmers-gov-design-system.git

2. Include the JS and CSS in the header (JS may need to go before closing body tag)

<script src="/farmers-gov-design-system/dist/js/farmers.min.js"></script>
<link rel="stylesheet" media="all" href="/farmers-gov-design-system/dist/css/styles.min.css" />

Design system elements and their markup can be found at https://usda-farmers-gov.github.io/

---

Working with precompiled assets

In order to use our Gulp tasks to compile the Sass and ES6+ JavaScript files, you'll need to have Node, NPM, and Gulp installed on your machine.

• To download this repository, the following commands can be used in the terminal.
  $ git clone [email protected]:USDA-Farmers-gov/farmers-gov-design-system.git
  then run $ cd farmers-gov-design-system to navigate into the repository directory.

• Once you have the repository downloaded, make sure you are in the repository directory and run npm install to get all of the necessary packages.

• After all of the packages have been installed, you can run the Gulp tasks to generate the compiled JavaScript and CSS files.

Gulp Tasks

These gulp tasks put the compiled assets in the /dist directory.

Task	Description
gulp scripts	Transpiles the main a JavaScript file located in /js/farmers.js
gulp styles	Compiles the main a Sass file located in /scss/styles.scss
gulp assets	Copies files from the img/ and fonts/ directories
gulp watch	Watches all .js files in the js/ directory and all .scss files in the scss/ directory and compiles/transpiles any new changes
gulp clean	Deletes files and directories in the dist/ directory
gulp or gulp build	Runs gulp clean, gulp styles, gulp scripts and gulp assets