The Draft SAM Web Design Standards extend the Draft U.S. Web Design Standards, which include a library of open source UI components and visual style guide for U.S. federal government websites.
In addition to defining standards for HTML structure and applied CSS styles, developers for the SAM environment have created user-interface kits (UI kits) available separately to make it even easier to get up and running with developing sites that follow these standards. Further, using the UI kits allows you to quickly develop functioning user interfaces that comply with these standards and allows all of us to make global changes to the SAM environment front-end with minimal development time.
From the SAM Web Design Standards:
- The U.S. Web Design Standards (see below).
- Font Awesome for easy to use icons.
- SAM custom components and HTML.
- UI kits for easy HTML generation (separate downloads).
From the U.S. Web Design Standards:
The U.S. Web Design Standards include Sass, HTML structures, and JavaScript, including:
- Stanardized HTML for UI components.
- A package available through npmjs.org.
- A set of flexible Sass files and variables.
- jQuery; a lightweight JavaScript library able to manipulate pages and make asynchronous server calls.
- Bourbon Neat for creating a grid to allow adaptive page layouts.
- Bourbon; a lightweight mixin library for Sass.
$ npm install samwds
The assets will be installed to the node_modules directory of your project under samwds.
Sass:
Add the following to the top of your root SCSS file:
@import '/relative/path/to/node_modules/samwds/src/stylesheets/all';
JavaScript:
Add the following to the top of your root JS file:
require('/relative/path/to/node_modules/samwds/src/js/start.js');
Fonts and images:
Copy the /node_modules/samwds/src/img and /node_modules/samwds/src/fonts directories to a public directory within your project.
Note: It is recommended that you automate this copying using something like npm gulp. This way, when you run npm update any changes to the fonts and images can be easily incorporated.
The folder containing your compiled CSS and JavaScript should be at the same level within your project as the img and fonts directories.
Example:
public-root/
├── js/
│ └── compiled.js
├── css/
│ └── compiled.css
├── img/
└── fonts/
or
public-root/
└── assets/
├── js/
│ └── compiled.js
├── css/
│ └── compiled.css
├── img/
└── fonts/
Do you have questions or need help with setup? Did you run into any weird errors while following these instructions? Feel free to open an issue here:
https://github.com/BrianGilmanGSA/sam-web-design-standards/issues.
You can also email us directly at uswebdesignstandards@gsa.gov.
For complete instructions on how to contribute code, please read CONTRIBUTING. These instructions also include guidance on how to set up your own copy of the Standards style guide website for development.
If you have questions or concerns about our contributing workflow, please contact us by filing a GitHub issue or ...emailing our team... .
The Standards inherit from the U.S. Web Design Standards distributed by 18f. Thereby, inheriting from the guides listed there.
The Standards inherit from the U.S. Web Design Standards distributed by 18f. Thereby, inheriting the licenses and attributions of that project.
Some files in /dist/fonts and /dist Standards incorporate Font Awesome by Dave Gandy under the SIL Open Font License 1.1.
The rest of this project is in the worldwide public domain. As stated in CONTRIBUTING:
This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.
All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.