npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fsa-style

v2.7.7

Published

Open Source CSS Framework of the USDA's FPAC Design System

Downloads

128

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

bignameherebignameherewhatnextjamiewhatnextjamieadi.rosenblum.usdaadi.rosenblum.usdaatdiffatdiffsamuel.durphysamuel.durphy

Keywords

Readme

FSA Style - a CSS Framework implementation of the FPAC Design System

USDA FPAC's Visual Language and HTML/CSS Framework, as documented by the FPAC Design System.

The Design System comprises of two core repositories:

  1. fsa-design-system: Source code for the Design 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 the Design 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 the v1.x.x version U.S. Web Design System created and maintained by the wonderful folks at 18F.

Recent updates

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.

Using fsa-style assets

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

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

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.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:

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: <!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, with href attribute pointing to <main> element.
  8. Wrap primary contents with <main id="main-content">...</main>.
  9. Build your thing!

Contributing

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.

Reuse of open-source style guides

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.

Other inspiration

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