Open Source CSS Framework of the USDA's FPAC Design System
npm install fsa-stylev1.x.x version U.S. Web Design System created and maintained by the wonderful folks at 18F.
node installed on your machine, you can use npm to install the Standards. Add fsa-style
package.json as a dependency:
shell
npm install --save fsa-style
`
The package will be installed in node_modules/fsa-style. You can either use the un-compiled files
found in the src/ or the compiled files in the dist/ directory. For example, if you're interested in using the Sass files (.scss) you would use the src/ directory; otherwise, dist/ is what you want.
`
node_modules/fsa-style/
├── dist/
│ ├── css/
│ ├── fonts/
│ ├── img/
│ ├── js/
│ ├── boilerplate.html
│ └── index.html
└── src/
├── fonts/
├── img/
├── js/
├── stylesheets/
├── boilerplate.html
└── index.html
`
The main Sass (SCSS) source file is here:
`
node_modules/fsa-style/src/stylesheets/fsa-style.scss
`
The compiled and minified CSS files' location:
`
node_modules/fsa-style/dist/css/fsa-style.css
node_modules/fsa-style/dist/css/fsa-style.min.css
`
Lastly, refer to Using the Boilerplate for basic guidance on HTML structure.
$3
If you don't have Node or the ability to incorporate source files into a build process (Grunt, Gulp, Webpack, etc), follow these steps to manually use the FSA Style.
Download the latest assets: https://github.com/usda-fsa/fsa-style/releases/download/2.7.7/fsa-style-2.7.7.zip
#### 1. Visual Index
index.html is a Visual Index of this CSS Framework's Visual Language, including basic HTML elements expressed in that style. Viewable at http://usda-fsa.github.io/fsa-style/index.html.
#### 2. Boilerplate
boilerplate.html provides a non-designed starting point. It serves as general guidance for the HTML structure most typically required of an FPAC digital product. Viewable at
http://usda-fsa.github.io/fsa-style/boilerplate.html.
#### 3. Manually adding to your project
Add the downloaded ZIP's assets to a relevant place in your code base — likely a directory where you keep third-party libraries:
`sh
fsa-style-x.x.x/
├── css/
│ ├── fsa-style.css
│ ├── fsa-style.css.map
│ ├── fsa-style.min.css
│ └── fsa-style.min.css.map
├── fonts/
├── img/
└── js/
└── vendor/
`
Note that fonts and img must be alongside css as the CSS files reference them at a specific relative path; e.g., ../img/file.png
Refer to Using the Boilerplate for further steps.
Using the Boilerplate
http://usda-fsa.github.io/fsa-style/boilerplate.html
Reference this basic list for the general requirements for your typical HTML structure. Reviewing this list is perhaps best done while viewing its HTML source.
1. HTML5 doctype: .
1. Wrap start element in IE conditional comment.
1. Enable Responsive Web Design via .
1. Reference CSS file(s) via tag.
1. Reference IE conditional commented JS files to polyfill features below IE9.
1. Include IE conditional commented Browser Upgrade message.
1. Include "skipnav" anchor link, with href attribute pointing to element.
1. Wrap primary contents with