Getting Started

The FPAC Design System's CSS Framework, fsa-style, provides plug-and-play HTML and CSS to help you set a new bar for a cohesive user experience across FPAC digital products.

The components and style guide of the FPAC 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 to create beautiful, easy-to-use, and consistent digitial experiences.

It was created and maintained within FPAC’s ISSDOB/FBCSS division, and is heavily influenced by the U.S. Web Design System created and maintained by the wonderful folks at 18F.

How to use

Using CSS Framework

Two options are available for usage of fsa-style’s HTML, CSS, Images, and Web Fonts:

NPM Install or Download ZIP

Install using NPM

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/all.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.

Download ZIP

If you don’t have Node or the ability to incorporate source files into a build process (Grunt, Gulp, etc), follow these steps to manually use the Design Sytem’s CSS Framework, fsa-style.

fsa-style-2.7.3.zip

1. Visual Index

http://usda-fsa.github.io/fsa-style/index.html

A CSS Implementation of the FPAC Design System, including HTML elements, styles, and components expressed with its Visual Language – also referred to as the “Kitchen Sink” of fsa-style.

2. Boilerplate

http://usda-fsa.github.io/fsa-style/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.

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:

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

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.

HTML5 doctype: <!DOCTYPE html>.
Wrap <html> start tag in IE conditional comment.
Enable Responsive Web Design via <meta name="viewport" content="width=device-width, initial-scale=1">.
Reference CSS file(s) via <link> tag.
Reference IE conditional commented JS files to polyfill features below IE9.
Include IE conditional commented Browser Upgrade message.
Include “skipnav” anchor link, with href attribute pointing to <main> element.
Wrap primary contents with <main id="main-content" tabindex="-1">...</main>.
Build your thing!

Without CSS Framework

If using the Design System’s CSS Framework (fsa-style) HTML/CSS won’t be utilized, the Design System serves as your product’s UI reference. Examples: developed via native technology, e.g. iOS/Andoird; an adopted platform is incompatible with the fsa-style’s markup or style.

If nothing else, the Design System is your reference to skin (or theme) your product’s User Interface (i.e. Color, Typography, Size and Space.) – regardless of implementation technology.

When to use

With the nature of application development, and the need to maintain legacy systems, the question often comes up about when to use the FPAC Design System. The answer is always “it depends”, and more information is needed to accurately provide the correct answer.

Ideally, all products would be switched over to the FPAC Design System as it provides an efficient and optimized starting point to accelerate the development of your product.

Depending on your product, it can be used as intended and provide a complete Front-end design solution or it can be used as a design reference.

Consult the mini-guide below to determine the relevance of the FPAC Design System to your product.

Should our product use the FPAC Design System?
Answer	Condition	Notes
Yes	If a new product and/or application is being developed from scratch.	Use the FPAC Design System as your primary design reference for new digital products being explored, designed, and/or developed. The SPA Tech Stack (Angular) is the current development standard, and the Design System's CSS Framework comes with its build system.
Yes	If the existing legacy application is being completely replaced/redeveloped.	The FPAC Design System is tech-stack or dev-framework-agnostic, though it does comes bundled into the Angular-based SPA Tech Stack and its example Reference App. Regardless of development framework or technology platformed employed, refer to the FPAC Design System as your primary design dependency and reference.
No	If an existing legacy applications has no plans to complete a major Front-end redesign.	Consult with your product's leadership team to determine.
No	If an existing legacy application utilizes technology, that when combined with the Design System, creates an adverse or slow User Experience on legacy devices or platforms.
Probably	If an existing legacy application will be significantly overhauled visually and/or from a technology perspective.	Many applications can be split into multiple modules, which would allow for new development work using the Design System. The criteria used to determine “overhaul” requires discussion, weighed against benefit, and priority.
Maybe	If an existing legacy application has major new features that will be added.	As stated previously, an application can be split into features and/or modules that would allow for the use of the Design System. Consulting with the FPAC User Experience team can provide in-depth guidance for your specific project.
Possibly	If an existing legacy application wishs to utilize aspects of the Design System.	The applicaiton may not necessarily be adding/removing features, but updates to existing markup and style can be updated to mirror the Design System. For example, could be solely about as reskinning to be generally cohesive to the Design System (color, typography, spacing). The application may likely involve not using most (or any) of the Design System’s CSS Framework fsa-style; rather, it may just involve referencing the Design System to apply the visual style, e.g. "let's just align to the Typography system."

UI Kit

A Figma ALPHA version can be duplicated and used to iterate through and prototype user interfaces. Most Styles (e.g. Color, Typography, etc) and UI Components are ready for immediate use.

Figma FPAC Design System

Browser Support

The FPAC Design System follows the principles of progressive enhancement and web standards. Users should be able to access core content and functionality from any browser or operating system, with varying degrees of access to visual and other enhancements — and user interfaces do not have to render identically on every browser.

The current CSS implementation of the FPAC Design System, fsa-style, follows the 2% rule: it officially supports browser above 2% usage as observed by analytics.usa.gov. Currently, this means the newest versions of Chrome, Firefox, Safari, Edge, and Internet Explorer 11 and up.

Release History

Details about each release’s significant updates and compatibility changes

Current Release notes: fsa-style@2.7.3
All Release Notes: fsa-style@2.7.3 - 0.1.1

Contributing

For complete instructions on how to contribute code, please read CONTRIBUTING.md.

If you have questions or feedback about our contributing workflow, please file a GitHub issue.

Overview