uswds-jekyll 2.1.0 → 2.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -11
  3. data/_includes/components/footer.html +5 -0
  4. data/_includes/components/header--basic.html +1 -1
  5. data/_includes/components/header--extended.html +2 -2
  6. data/_includes/last-modified.html +3 -0
  7. data/_includes/scripts.html +11 -2
  8. data/_includes/subnav.html +1 -1
  9. data/_layouts/default.html +3 -3
  10. data/assets/js/main.js +14 -0
  11. data/assets/js/vendor/anchor.min.js +6 -0
  12. data/assets/uswds/css/uswds.css +38 -7
  13. data/assets/uswds/css/uswds.min.css +2 -2
  14. data/assets/uswds/css/uswds.min.css.map +1 -1
  15. data/assets/uswds/img/angle-arrow-down-hover.png +0 -0
  16. data/assets/uswds/img/angle-arrow-down-primary-hover.png +0 -0
  17. data/assets/uswds/img/angle-arrow-down-primary.png +0 -0
  18. data/assets/uswds/img/angle-arrow-down.png +0 -0
  19. data/assets/uswds/img/angle-arrow-up-primary-hover.png +0 -0
  20. data/assets/uswds/img/angle-arrow-up-primary.png +0 -0
  21. data/assets/uswds/img/arrow-both.png +0 -0
  22. data/assets/uswds/img/circle-124.png +0 -0
  23. data/assets/uswds/img/close-primary.png +0 -0
  24. data/assets/uswds/img/close.png +0 -0
  25. data/assets/uswds/img/external-link-alt-hover.png +0 -0
  26. data/assets/uswds/img/external-link-alt.png +0 -0
  27. data/assets/uswds/img/external-link-hover.png +0 -0
  28. data/assets/uswds/img/external-link.png +0 -0
  29. data/assets/uswds/img/favicons/favicon-114.png +0 -0
  30. data/assets/uswds/img/favicons/favicon-40.png +0 -0
  31. data/assets/uswds/img/favicons/favicon-57.png +0 -0
  32. data/assets/uswds/img/hero.png +0 -0
  33. data/assets/uswds/img/minus-alt.png +0 -0
  34. data/assets/uswds/img/plus-alt.png +0 -0
  35. data/assets/uswds/img/search-alt.png +0 -0
  36. data/assets/uswds/img/search-primary.png +0 -0
  37. data/assets/uswds/img/social-icons/png/facebook25.png +0 -0
  38. data/assets/uswds/img/social-icons/png/rss25.png +0 -0
  39. data/assets/uswds/img/social-icons/png/twitter16.png +0 -0
  40. data/assets/uswds/img/social-icons/png/youtube15.png +0 -0
  41. data/assets/uswds/scss/components/_header.scss +1 -1
  42. data/assets/uswds/scss/components/_sidenav.scss +23 -0
  43. data/assets/uswds/scss/core/_utilities.scss +3 -3
  44. data/assets/uswds/scss/core/_variables.scss +16 -15
  45. data/assets/uswds/scss/elements/_inputs.scss +3 -1
  46. data/assets/uswds/scss/lib/_bourbon-deprecate.scss +19 -0
  47. data/assets/uswds/scss/lib/settings/_deprecation-warnings.scss +8 -0
  48. metadata +13 -9
  49. data/assets/uswds/CONTRIBUTING.md +0 -178
  50. data/assets/uswds/LICENSE.md +0 -55
  51. data/assets/uswds/README.md +0 -259
  52. data/assets/uswds/uswds-1.4.3.zip +0 -0
@@ -0,0 +1,19 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Throws Sass warnings to announce library deprecations. You can disable them
4
+ /// by setting the `$output-bourbon-deprecation-warnings` variable to `false`.
5
+ ///
6
+ /// @access private
7
+
8
+ @mixin _bourbon-deprecate($feature, $message: null) {
9
+ @if $output-bourbon-deprecation-warnings == true {
10
+ @warn "[Bourbon] [Deprecation] `#{$feature}` is deprecated and will be " +
11
+ "removed in 5.0.0. #{$message}";
12
+ @content;
13
+ }
14
+ }
15
+
16
+ @mixin _bourbon-deprecate-for-prefixing($feature) {
17
+ @include _bourbon-deprecate($feature, "We suggest using an automated " +
18
+ "prefixing tool, like Autoprefixer.");
19
+ }
@@ -0,0 +1,8 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Enable or disable output of Bourbon’s deprecation-related Sass warnings.
4
+ /// This variable must be declared _before_ importing Bourbon.
5
+ ///
6
+ /// @type Bool
7
+
8
+ $output-bourbon-deprecation-warnings: true !default;
metadata CHANGED
@@ -1,14 +1,16 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: uswds-jekyll
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.0
4
+ version: 2.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shawn Allen
8
+ - Brian Hurst
9
+ - Scott Weber
8
10
  autorequire:
9
11
  bindir: bin
10
12
  cert_chain: []
11
- date: 2017-12-06 00:00:00.000000000 Z
13
+ date: 2018-01-11 00:00:00.000000000 Z
12
14
  dependencies:
13
15
  - !ruby/object:Gem::Dependency
14
16
  name: jekyll
@@ -54,7 +56,8 @@ dependencies:
54
56
  version: '0'
55
57
  description:
56
58
  email:
57
- - shawn.allen@gsa.gov
59
+ - brian.hurst@gsa.gov
60
+ - scott.weber@gsa.gov
58
61
  executables: []
59
62
  extensions: []
60
63
  extra_rdoc_files: []
@@ -73,6 +76,7 @@ files:
73
76
  - _includes/footer.html
74
77
  - _includes/graphic-list.html
75
78
  - _includes/header.html
79
+ - _includes/last-modified.html
76
80
  - _includes/meta.html
77
81
  - _includes/scripts.html
78
82
  - _includes/sidenav.html
@@ -217,9 +221,8 @@ files:
217
221
  - _sass/uswds/lib/settings/_px-to-em.scss
218
222
  - _sass/uswds/lib/settings/_visual-grid.scss
219
223
  - _sass/uswds/uswds.scss
220
- - assets/uswds/CONTRIBUTING.md
221
- - assets/uswds/LICENSE.md
222
- - assets/uswds/README.md
224
+ - assets/js/main.js
225
+ - assets/js/vendor/anchor.min.js
223
226
  - assets/uswds/css/uswds.css
224
227
  - assets/uswds/css/uswds.min.css
225
228
  - assets/uswds/css/uswds.min.css.map
@@ -368,6 +371,7 @@ files:
368
371
  - assets/uswds/scss/elements/_list.scss
369
372
  - assets/uswds/scss/elements/_table.scss
370
373
  - assets/uswds/scss/elements/_typography.scss
374
+ - assets/uswds/scss/lib/_bourbon-deprecate.scss
371
375
  - assets/uswds/scss/lib/_bourbon-deprecated-upcoming.scss
372
376
  - assets/uswds/scss/lib/_bourbon.scss
373
377
  - assets/uswds/scss/lib/_neat-helpers.scss
@@ -464,13 +468,13 @@ files:
464
468
  - assets/uswds/scss/lib/helpers/_str-to-num.scss
465
469
  - assets/uswds/scss/lib/mixins/_clearfix.scss
466
470
  - assets/uswds/scss/lib/settings/_asset-pipeline.scss
471
+ - assets/uswds/scss/lib/settings/_deprecation-warnings.scss
467
472
  - assets/uswds/scss/lib/settings/_disable-warnings.scss
468
473
  - assets/uswds/scss/lib/settings/_grid.scss
469
474
  - assets/uswds/scss/lib/settings/_prefixer.scss
470
475
  - assets/uswds/scss/lib/settings/_px-to-em.scss
471
476
  - assets/uswds/scss/lib/settings/_visual-grid.scss
472
477
  - assets/uswds/scss/uswds.scss
473
- - assets/uswds/uswds-1.4.3.zip
474
478
  homepage: https://standards.usa.gov/
475
479
  licenses:
476
480
  - CC0-1.0
@@ -491,8 +495,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
491
495
  version: '0'
492
496
  requirements: []
493
497
  rubyforge_project:
494
- rubygems_version: 2.6.3
498
+ rubygems_version: 2.6.10
495
499
  signing_key:
496
500
  specification_version: 4
497
- summary: A Jekyll theme for the U.S. Web Design Standards
501
+ summary: A Jekyll theme for the U.S. Web Design Standards.
498
502
  test_files: []
@@ -1,178 +0,0 @@
1
- ## Welcome!
2
-
3
- We’re so glad you’re thinking about contributing to an 18F open source project! If you’re unsure about anything, just ask — or submit your issue or pull request anyway. The worst that can happen is we’ll politely ask you to change something. We appreciate all friendly contributions.
4
-
5
- One of our goals is to ensure a welcoming environment for all contributors to our projects. Our staff follows the [18F Code of Conduct](https://18f.gsa.gov/code-of-conduct/), and all contributors should do the same.
6
-
7
- We encourage you to read this project’s CONTRIBUTING policy (you are here), its [LICENSE](https://github.com/18F/web-design-standards/blob/develop/LICENSE.md), [README](https://github.com/18F/web-design-standards/blob/develop/README.md) and its [Workflow](https://github.com/18F/web-design-standards/wiki/Workflow) process.
8
-
9
- If you have any questions or want to read more, check out the [18F Open Source Policy GitHub repository]( https://github.com/18f/open-source-policy), or just [shoot us an email](mailto:18f@gsa.gov).
10
-
11
- ## Guidelines
12
-
13
- ### Contributor Guidelines for Design
14
-
15
- We have provided some guidelines for folks that would like to submit new components to the U.S. Web Design Standards and the lifecycle those new components will go through. For more detail, please visit the [guidelines on our wiki](https://github.com/18F/web-design-standards/wiki/Contribution-Guidelines:-Design).
16
-
17
- ### Submitting an issue
18
-
19
- To help us get a better understanding of the issue you’re submitting, follow our ISSUE TEMPLATE and the guidelines it describes.
20
-
21
- ### Submitting a pull request
22
-
23
- Here are a few guidelines to follow when submitting a pull request:
24
-
25
- 1. Create a GitHub account or sign in to your existing account.
26
- 1. Fork this repo into your GitHub account (or just clone it if you’re an 18F team member). Read more about forking a repo here on GitHub:
27
- [https://help.github.com/articles/fork-a-repo/](https://help.github.com/articles/fork-a-repo/)
28
- 1. Create a branch from `develop` that lightly defines what you’re working on (for example, add-styles).
29
- 1. Ensure that your contribution works via `npm`, if applicable.
30
- 1. Once you’re ready to submit a pull request, fill out the PULL REQUEST template provided.
31
- 1. Submit your pull request against the `develop` branch.
32
-
33
- [Open an issue](https://github.com/18F/web-design-standards/issues/new) if you have questions or need help with setup.
34
-
35
- ### Running locally
36
-
37
- The U.S. Web Design Standards `uswds` package (the zip download and the
38
- files needed to use the Standards on your project) is built primarily with
39
- two [Node.js] tools: [Fractal] and [Gulp]. Once you've cloned this
40
- repository, you'll need to install its dependencies:
41
-
42
- ```sh
43
- npm install
44
- ```
45
-
46
- **ProTip**: You can also use [Yarn], which tends to install dependencies more quickly than npm.
47
-
48
- To start the [Fractal] live reload server, run:
49
-
50
- ```sh
51
- npm start
52
- ```
53
-
54
- Then, visit [localhost:3000](http://localhost:3000) in a web browser to
55
- peruse the component library. While the server is running, any changes that
56
- you make to the component templates or configurations will reload the page
57
- automatically.
58
-
59
- If you're working on the JavaScript or CSS, you can run the "watch" task in
60
- another shell to automatically rebuild the distribution files that Fractal
61
- references with:
62
-
63
- ```sh
64
- npm run watch
65
- ```
66
-
67
- ### Testing
68
-
69
- To run the component unit tests, run:
70
-
71
- ```sh
72
- npm test
73
- ```
74
-
75
- This will also run [eslint] and [stylelint] to ensure that the JavaScript
76
- and SCSS source files meet our coding standards. To lint without the unit
77
- tests, you'll need [Gulp][]. Install it globally (`npm install -g
78
- gulp-cli`), then run:
79
-
80
- ```sh
81
- gulp eslint
82
- gulp stylelint
83
- ```
84
-
85
- (Or, if you don't want to install Gulp globally, you can run `$(npm
86
- bin)/gulp` instead of `gulp`.)
87
-
88
- Note that running the tests also requires an installation of
89
- Chrome v59 or higher (v60 if you're on Windows).
90
-
91
- #### Visual regression testing
92
-
93
- The Standards come with optional tooling for detecting visual regressions,
94
- which can be especially useful if you're refactoring CSS.
95
-
96
- These tests work by comparing current screenshots of the Standards' Fractal
97
- components to "golden" screenshots that represent what the components are
98
- supposed to look like.
99
-
100
- Golden screenshots are stored on your local development system *only*;
101
- they're not version controlled.
102
-
103
- To generate the golden screenshots, run:
104
-
105
- ```
106
- node spec/visual-regression-tester.js test --updateGolden
107
- ```
108
-
109
- Then, make any CSS refactorings (or switch to a branch that has them).
110
-
111
- To compare the current state of your CSS to the golden screenshots, run:
112
-
113
- ```
114
- node spec/visual-regression-tester.js test
115
- ```
116
-
117
- If the current screenshots don't match their golden counterparts, you will
118
- be directed to an HTML file that visually shows the differences between
119
- any conflicting screenshots.
120
-
121
- ### Building
122
-
123
- To build the `uswds` package in preparation for releases, run:
124
-
125
- ```sh
126
- npm run build:package
127
- # or
128
- gulp release
129
- ```
130
-
131
- ## Coding guidelines
132
-
133
- The purpose of our coding styleguides are to create consistent coding practices across 18F. The styleguide should be treated as a guide — rules can be modified according to project needs.
134
-
135
- This project follows the 18F Front End Guide [CSS](https://pages.18f.gov/frontend/#css) and [JavaScript](https://pages.18f.gov/frontend/#javascript). Please use this guide for your reference.
136
-
137
- ### Code coverage
138
-
139
- We use [code coverage](https://en.wikipedia.org/wiki/Code_coverage) tools to understand how much of our JavaScript is tested by our [unit test suite](spec/unit). Code coverage is one way (among many) of measuring code _quality_ more generally. Here's how it works for contributions:
140
-
141
- 1. Each pull request creates a new coverage report on [Code Climate](https://codeclimate.com/).
142
- 1. Code Climate then posts a status message back to GitHub that lists the coverage percentage on that branch, and the difference between that number and the one last reported on our default branch.
143
-
144
- For JavaScript contributions, we will review the code coverage percentage and change to ensure that the quality of our code is not dramatically affected.
145
-
146
- High code coverage numbers are generally good, and we would prefer that our coverage increases over time. We will not categorically reject contributions that reduce code coverage, but we may ask contributors to refactor their code, add new unit tests, or modify existing tests to avoid significant reductions in coverage.
147
-
148
- ## Our use of branches
149
-
150
- See the [release documentation](RELEASE.md#release-process) for more information on our git/GitHub release workflow.
151
-
152
- ## Licenses and attribution
153
-
154
- ### A few parts of this project are not in the public domain
155
-
156
- For complete attribution and licensing information for parts of the project that are not in the public domain, see [LICENSE.md](https://github.com/18F/web-design-standards/blob/develop/LICENSE.md).
157
-
158
- ### The rest of this project is in the public domain
159
-
160
- The rest of this project is in the worldwide [public domain](https://github.com/18F/web-design-standards/blob/develop/LICENSE.md).
161
-
162
- This project is in the public domain within the United States, and
163
- copyright and related rights in the work worldwide are waived through
164
- the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
165
-
166
- ### Contributions will be released into the public domain
167
-
168
- All contributions to this project will be released under the CC0
169
- dedication. By submitting a pull request, you are agreeing to comply
170
- with this waiver of copyright interest.
171
-
172
-
173
- [Node.js]: https://nodejs.org
174
- [Fractal]: http://fractal.build
175
- [Gulp]: http://gulpjs.com/
176
- [Yarn]: https://yarnpkg.com/
177
- [eslint]: http://eslint.org/
178
- [stylelint]: https://stylelint.io/
@@ -1,55 +0,0 @@
1
- ## A few parts of this project are not in the public domain
2
-
3
- ### Files licensed under the SIL Open Font License
4
-
5
- The Source Sans Pro font files in `src/fonts` are a customized subset of [Source Sans Pro](https://github.com/adobe-fonts/source-sans-pro), licensed under the [SIL Open Font License](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL), and copyright [Adobe Systems Incorporated](http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
6
-
7
- The Merriweather font files in `src/fonts` are from [Google Web Fonts](https://www.google.com/fonts#UsePlace:use/Collection:Merriweather:400,300,400italic,700,700italic), licensed under the [SIL Open Font License](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL), and copyright [Sorkin Type Co](www.sorkintype.com) with Reserved Font Name 'Merriweather'.
8
-
9
- The files in `src/img` are from [Font Awesome](http://fontawesome.io/) by Dave Gandy under the [SIL Open Font License 1.1](http://scripts.sil.org/OFL).
10
-
11
- ### Files licensed under the MIT license
12
-
13
- The files in `src/stylesheets/lib` are from:
14
-
15
- * [Bourbon](http://bourbon.io/), copyright [thoughtbot](https://thoughtbot.com/), inc., under the [MIT license](https://github.com/thoughtbot/neat/blob/master/LICENSE.md).
16
- * [Neat](http://neat.bourbon.io/), copyright [thoughtbot](https://thoughtbot.com/), inc., also under the [MIT license](https://github.com/thoughtbot/neat/blob/master/LICENSE.md).
17
- * [Normalize.css](https://github.com/necolas/normalize.css), copyright Nicolas Gallagher and Jonathan Neal, under the [MIT license](https://github.com/necolas/normalize.css/blob/master/LICENSE.md).
18
-
19
- #### Full license text for the MIT licensed files:
20
-
21
- ```
22
- The MIT License (MIT)
23
-
24
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
25
-
26
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
27
-
28
- THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29
- ```
30
-
31
- ## The rest of this project is in the worldwide public domain
32
-
33
- As a work of the United States government, this project is in the public domain within the United States.
34
-
35
- Additionally, we waive copyright and related rights in the work worldwide through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
36
-
37
- ### CC0 1.0 Universal Summary
38
-
39
- This is a human-readable summary of the [Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode).
40
-
41
- #### No Copyright
42
-
43
- The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
44
-
45
- You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.
46
-
47
- #### Other Information
48
-
49
- In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights.
50
-
51
- Unless expressly stated otherwise, the person who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. When using or citing the work, you should not imply endorsement by the author or the affirmer.
52
-
53
- ### Contributions to this project
54
-
55
- As stated in [CONTRIBUTING](CONTRIBUTING.md), 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.
@@ -1,259 +0,0 @@
1
- # U.S. Web Design Standards
2
-
3
- [![CircleCI Build Status](https://circleci.com/gh/18F/web-design-standards/tree/develop.svg?style=shield)](https://circleci.com/gh/18F/web-design-standards/tree/develop) [![Test Coverage](https://codeclimate.com/github/18F/web-design-standards/badges/coverage.svg)](https://codeclimate.com/github/18F/web-design-standards/coverage)
4
-
5
- The [U.S. Web Design Standards](https://standards.usa.gov) include a library of open source UI components and a visual style guide for U.S. federal government websites.
6
-
7
- This repository is for the Standards themselves. 18F maintains [another repository for the documentation and website](https://github.com/18F/web-design-standards-docs). To see the Standards and documentation on the web, visit [https://standards.usa.gov](https://standards.usa.gov).
8
-
9
-
10
- ## Contents
11
-
12
- * [Background](#background)
13
- * [Recent updates](#recent-updates)
14
- * [Getting started](#getting-started)
15
- * [Using the Standards](#using-the-standards)
16
- * [Download](#download)
17
- * [Install using `npm`](#install-using-npm)
18
- * [Importing assets](#importing-assets)
19
- * [Sass](#sass)
20
- * [JavaScript](#javascript)
21
- * [Use another framework or package manager](#use-another-framework-or-package-manager)
22
- * [Fractal](#fractal)
23
- * [Template compatibility](#template-compatibility)
24
- * [Need installation help?](#need-installation-help)
25
- * [Contributing to the code base](#contributing-to-the-code-base)
26
- * [Reuse of open-source style guides](#reuse-of-open-source-style-guides)
27
- * [Licenses and attribution](#licenses-and-attribution)
28
-
29
- ## Background
30
-
31
- The components and style guide of the U.S. Web Design Standards follow industry-standard web accessibility guidelines and use the best practices of existing style libraries and modern web design. The [U.S. Digital Service](https://www.whitehouse.gov/digital/united-states-digital-service) and [18F](https://18f.gsa.gov/) created and maintain the U.S. Web Design Standards for designers and developers. They 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 this [blog post](https://18f.gsa.gov/2015/09/28/web-design-standards/) and to view websites and applications check out our list [here](WHO_IS_USING_USWDS.md).
32
-
33
-
34
- ## Recent updates
35
-
36
- Information about the most recent release of the Standards can always be found in the [release history](https://github.com/18F/web-design-standards/releases). We include details about significant updates and any backwards incompatible changes along with a list of all changes.
37
-
38
-
39
- ## Getting started
40
-
41
- We’re glad you’d like to use the Standards — here’s how you can get started:
42
-
43
- * Designers: [Check out our Getting Started for Designers information](https://standards.usa.gov/getting-started/designers/).
44
- * [Design files of all the assets included in the Standards are available for download](https://github.com/18F/web-design-standards-assets/archive/master.zip).
45
- * Developers: [Follow the instructions in this README to get started.](#using-the-standards)
46
- * [CSS, JavaScript, image, and font files of all the assets on this site are available for download](https://github.com/18F/web-design-standards/releases/download/v1.0.0/uswds-1.0.0.zip).
47
-
48
-
49
- ## Using the Standards
50
-
51
- There are a few different ways to use the Standards within your project. Which one you choose depends on the needs of your project and how you are most comfortable working. Here are a few notes on what to consider when deciding which installation method to use:
52
-
53
- *Download the Standards if:*
54
- - You are not familiar with `npm` and package management.
55
-
56
- *Use the Standards `npm` package if:*
57
- - You are familiar with using `npm` and package management.
58
- - You would like to leverage Standards [Sass](#sass) files.
59
-
60
- ### Download
61
-
62
- 1. Download the [Standards zip file](https://github.com/18F/web-design-standards/releases/download/v1.0.0/uswds-1.0.0.zip) and open that file.
63
-
64
- After extracting the zip file you should see the following file and folder structure:
65
-
66
- ```
67
- uswds-1.0.0/
68
- ├── css/
69
- │   ├── uswds.min.css.map
70
- │   ├── uswds.min.css
71
- │   └── uswds.css
72
- ├── fonts/
73
- ├── html/
74
- └── js/
75
- ├── uswds.min.js.map
76
- ├── uswds.min.js
77
- └── uswds.js
78
-
79
- ```
80
-
81
- 2. Copy these files and folders into a relevant place in your project's code base. Here is an example structure for how this might look:
82
-
83
- ```
84
- example-project/
85
- ├── assets/
86
- │   ├── uswds-1.0.0/
87
- │   ├── stylesheets/
88
- │   ├── images/
89
- │   └── javascript/
90
- └── index.html
91
- ```
92
-
93
- You'll notice in our example above that we also outline a `stylesheets`, `images` and `javascript` folder in your `assets` folder. These folders are to help organize any assets that are unique to your project.
94
-
95
- 3. To use the Standards on your project, you’ll need to reference the [CSS (*C*ascading *S*tyle *S*heets)](https://developer.mozilla.org/en-US/docs/Web/CSS) and JavaScript files in each HTML page or dynamic templates in your project.
96
-
97
- Here is an example of how to reference these assets in your `index.html` file:
98
-
99
- ```html
100
- <!DOCTYPE html>
101
- <html>
102
- <head>
103
- <meta charset="utf-8">
104
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
105
- <title>My Example Project</title>
106
- <link rel="stylesheet" href="assets/uswds-1.0.0/css/uswds.min.css">
107
- </head>
108
- <body>
109
-
110
- <script src="assets/uswds-1.0.0/js/uswds.min.js"></script>
111
- </body>
112
- </html>
113
- ```
114
-
115
- We offer both files, the CSS and the JavaScript, in two versions — a minified version, and an un-minified one. (In the examples above, we are using the minified files.) Use the minified files in a production environment or to reduce the file size of your downloaded assets. And the un-minified files are better if you are in a development environment or would like to debug the CSS or JavaScript assets in the browser.
116
-
117
- And that’s it — you should now be able to copy our code samples into our `index.html` and start using the Standards.
118
-
119
- ### Install using npm
120
-
121
- `npm` is a package manager for Node based projects. The U.S. Web Design Standards maintains a [`uswds` package](https://www.npmjs.com/package/uswds) for you to utilize both the pre-compiled and compiled files on your project.
122
-
123
- 1. Install `Node/npm`. Below is a link to find the install method that coincides with your operating system:
124
-
125
- - Node v4.2.3+, [Installation guides](https://nodejs.org/en/download/)
126
-
127
- **Note for Windows users:** If you are using Windows and are unfamiliar with `Node` or `npm`, we recommend following [Team Treehouse's tutorial](http://blog.teamtreehouse.com/install-node-js-npm-windows) for more information.
128
-
129
- 2. Make sure you have installed it correctly:
130
-
131
- ```shell
132
- npm -v
133
- 3.10.8 # This line may vary depending on what version of Node you've installed.
134
- ```
135
-
136
- 3. Create a `package.json` file. You can do this manually, but an easier method is to use the `npm init` command. This command will prompt you with a few questions to create your `package.json` file.
137
-
138
- 4. Add `uswds` to your project’s `package.json`:
139
-
140
- ```shell
141
- npm install --save uswds
142
- ```
143
-
144
- The `uswds` module is now installed as a dependency. You can use the un-compiled files found in the `src/` or the compiled files in the `dist/` directory.
145
-
146
- ```
147
- node_modules/uswds/
148
- ├── dist/
149
- │   ├── css/
150
- │   ├── fonts/
151
- │ ├── html/
152
- │   ├── img/
153
- │   ├── js/
154
- └── src/
155
-    ├── fonts/
156
-    ├── img/
157
-    ├── js/
158
-    ├── stylesheets/
159
-    └── templates/
160
- ```
161
-
162
- #### Importing assets
163
-
164
- Since you are already using `npm`, the U.S. Web Design Standards team recommends leveraging the ability to write custom scripts. Here are some links to how we do this with our docs website using `npm` + [`gulp`](http://gulpjs.com/):
165
-
166
- [Link to `npm` scripts example in `web-design-standards-docs`](https://github.com/18F/web-design-standards-docs/blob/develop/package.json#L4)
167
-
168
- [Link to gulpfile.js example in `web-design-standards-docs`](https://github.com/18F/web-design-standards-docs/blob/develop/gulpfile.js)
169
-
170
- #### Sass
171
-
172
- The Standards are easily customizable using the power of [Sass (Syntactically Awesome Style Sheets)](http://sass-lang.com/). The main Sass (SCSS) source file is located here:
173
-
174
- ```
175
- node_modules/uswds/src/stylesheets/uswds.scss
176
- ```
177
-
178
- Global variables are defined in the `node_modules/uswds/src/stylesheets/core/_variables.scss` file. Custom theming can be done by copying the `_variables.scss` file into your own project’s Sass folder, changing applicable variable values, and importing it before `uswds.scss`.
179
-
180
- Below is an example of how you might setup your main Sass file to achieve this:
181
-
182
- ```
183
- @import 'variables.scss' # Custom Sass variables file
184
- @import 'node_modules/uswds/src/stylesheets/uswds.scss';
185
-
186
- ```
187
-
188
- You can now use your copied version of `_variables.scss` to override any styles to create a more custom look and feel to your application.
189
-
190
- #### JavaScript
191
- `require('uswds')` will load all of the U.S. Web Design Standards’ JavaScript onto the page. Add this line to whatever initializer you use to load JavaScript into your application.
192
-
193
- ### Use another framework or package manager
194
-
195
- If you’re using another framework or package manager that doesn’t support `npm`, you can find the source files in this repository and use them in your project. Otherwise, we recommend that you follow the [download instructions](#download). Please note that the core team [isn’t responsible for all frameworks’ implementations](https://github.com/18F/web-design-standards/issues/877).
196
-
197
- If you’re interested in maintaining a package that helps us distribute the U.S. Web Design Standards, the project’s build system can help you create distribution bundles to use in your project. Please read our [contributing guidelines](CONTRIBUTING.md#building-the-project-locally-with--gulp-) to locally build distributions for your framework or package manager.
198
-
199
-
200
- ## Fractal
201
-
202
- We're using [Fractal](http://fractal.build) to generate an interactive component library for the Standards. You can run it locally after `npm install` with:
203
-
204
- ```sh
205
- npm start
206
- ```
207
-
208
- Then, visit [http://localhost:3000/](http://localhost:3000/) to see the Standards in action.
209
-
210
- _**Optional**: To re-build when code changes are made, run the following command from the project directory in a separate terminal window:_
211
- ```sh
212
- npm run watch
213
- ```
214
-
215
- ### Template compatibility
216
-
217
- Many of our Fractal view templates are compatible with [Nunjucks](https://mozilla.github.io/nunjucks/) (for JavaScript/Node), [Jinja](http://jinja.pocoo.org/docs/2.9/) (Python), and [Twig](https://twig.sensiolabs.org/) (PHP) out of the box. Components that reference other components use a Fractal-specific `{% render %}` tag that will either need to be implemented in other environments or replaced with the appropriate `{% include %}` tags.
218
-
219
-
220
- ## Need installation help?
221
-
222
- 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:
223
-
224
- [https://github.com/18F/web-design-standards/issues](https://github.com/18F/web-design-standards/issues).
225
-
226
- You can also email us directly at uswebdesignstandards@gsa.gov.
227
-
228
-
229
- ## Contributing to the code base
230
-
231
- For complete instructions on how to contribute code, please read [CONTRIBUTING.md](CONTRIBUTING.md). These instructions also include guidance on how to set up your own copy of the Standards style guide website for development.
232
-
233
- If you would like to learn more about our workflow process, check out the [Workflow](https://github.com/18F/web-design-standards/wiki/Workflow) and [Issue label Glossary](https://github.com/18F/web-design-standards/wiki/Issue-label-glossary) pages on the wiki.
234
-
235
- If you have questions or concerns about our contributing workflow, please contact us by [filing a GitHub issue](https://github.com/18F/web-design-standards/issues) or [emailing our team](mailto:uswebdesignstandards@gsa.gov).
236
-
237
-
238
- ## Reuse of open-source style guides
239
-
240
- Much of the guidance in the U.S. Web Design Standards leans on open source designs, code, and patterns from other civic and government organizations, including:
241
-
242
- * Consumer Financial Protection Bureau’s [Design Manual](https://cfpb.github.io/design-manual/)
243
- * U.S. Patent and Trademark Office’s [Design Patterns](http://uspto.github.io/designpatterns/)
244
- * Healthcare.gov [Style Guide](http://styleguide.healthcare.gov/)
245
- * UK’s Government Digital Service’s [UI Elements](http://govuk-elements.herokuapp.com/)
246
- * Code for America’s Chime [Styleguide](https://github.com/chimecms/chime-starter)
247
- * Pivotal Labs [Component Library](http://styleguide.cfapps.io/)
248
-
249
-
250
- ## Licenses and attribution
251
-
252
- A few parts of this project are not in the public domain. Attribution and licensing information for those parts are described in detail in [LICENSE.md](LICENSE.md).
253
-
254
- The rest of this project is in the worldwide public domain, released under the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
255
-
256
-
257
- ## Contributing
258
-
259
- All contributions to this project will be released under the CC0 dedication alongside the public domain portions of this project. For more information, see [CONTRIBUTING.md](CONTRIBUTING.md).