Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

CSS Implementation of USDA's FPAC Design System

License

NotificationsYou must be signed in to change notification settings

USDA-FSA/fsa-style

Repository files navigation

USDA FPAC'sVisual Language andHTML/CSS Framework, as documented by theFPAC Design System.

The Design System comprises of two core repositories:

  1. fsa-design-system: Source code for theDesign System web site, documenting the FSA Style and accompanying guidelines.
  2. fsa-style: Style assets (HTML, CSS, Images) available for download or install, as documented by theDesign System web site.

Background

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 thev1.x.x versionU.S. Web Design System created and maintained by the wonderful folks at18F.

Recent updates

Information about the most recent release can always be found in therelease history. We include details about significant updates and any backwards incompatible changes along with a list of all changes.

Using fsa-style assets

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

Install using NPM

If you havenode installed on your machine, you can use npm to install the Standards. Addfsa-styleto your project’spackage.json as a dependency:

npm install --save fsa-style

The package will be installed innode_modules/fsa-style. You can either use the un-compiled filesfound in thesrc/ or the compiled files in thedist/ directory. For example, if you're interested in using the Sass files (.scss) you would use thesrc/ 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.cssnode_modules/fsa-style/dist/css/fsa-style.min.css

Lastly, refer toUsing 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, 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.6.0/fsa-style-2.6.0.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 athttp://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 athttp://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:

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 thatfonts andimg must be alongsidecss as the CSS files reference them at a specific relative path; e.g.,../img/file.png

Refer toUsing 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 itsHTML source.

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

Contributing

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

If you have questions or concerns about our contributing workflow, please contact us byfiling a GitHub issue.

Reuse of open-source style guides

This Design System was initially based on theDraft U.S. Web Design Standards created and maintained by theU.S. Digital Service and18F 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 outtheir blog post.

Other inspiration

Further Design System sources of inspiration - some government-oriented, some not.

[8]ページ先頭
©2009-2025 Movatter.jp