USDA FPAC's Visual Language and HTML/CSS Framework, as documented by the FPAC Design System.
This digital resouce is made available across the Department and to other Federal agencies. It supports the requirements of OMB Memorandum M-16-21, “Federal Source Code Policy: Achieving Efficiency, Transparency, and Innovation through Reusable and Open Source Software". This policy requires agencies to develop plans to release at least 20 percent of new custom-developed source code as Open Source Software (OSS) when commissioning new custom software.
The Design System comprises of two core repositories:
The components and style guide of the Design System follow industry-standard web accessibility guidelines and use the best practices of existing style libraries and modern web design. They are designed for use by FPAC product teams who want to create beautiful, easy-to-use, online experiences that are consistent to the FSA Style.
It was created and maintained within FPAC's ISSDOB/FBCSS division, and was initially influenced by the v1.x.x
version U.S. Web Design System created and maintained by the wonderful folks at 18F.
Information about the most recent release can always be found in the release history. We include details about significant updates and any backwards incompatible changes along with a list of all changes.
Two options are available for usage of fsa-style HTML, CSS, Images, and Web Fonts:
If you have node
installed on your machine, you can use npm to install the Standards. Add fsa-style
to your project’s package.json
as a dependency:
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.
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
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.
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.
Add the downloaded ZIP's assets to a relevant place in your code base — likely a directory where you keep third-party libraries:
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.
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.
<!DOCTYPE html>
.<html>
start element in IE conditional comment.<meta name="viewport" content="width=device-width, initial-scale=1">
.<link>
tag.href
attribute pointing to <main>
element.<main id="main-content">...</main>
.For complete instructions on how to contribute code, please read CONTRIBUTING.md.
If you have questions or concerns about our contributing workflow, please contact us by filing a GitHub issue.
This Design System was initially based on the Draft U.S. Web Design Standards created and maintained by the U.S. Digital Service and 18F designers and developers.
The Draft U.S. Web Design Standards are designed for use by government product teams who want to create beautiful, easy-to-use online experiences for the public. To learn more about the project, check out their blog post.
Further Design System sources of inspiration - some government-oriented, some not.