You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>In the final part, we'll bring it all home and customize USWDS to better fit with the original project. </p>
4
4
<h3class="step">Stop the watch script.</h3>
5
5
<pclass="step-description">Go the terminal window where the <strong>watch</strong> script is running and enter <strong>control-c</strong> to stop the script.</p>
6
-
<h3class="step">Create a custom settings file.</h3>
7
-
<pclass="step-description">We're going to make some custom <ahref="https://designsystem.digital.gov/documentation/settings/">USWDS settings</a> for our project. To do this, we're going to use a custom settings file. Create this file in the USWDS theme directory.</p>
8
-
<divclass="terminal">
9
-
<pre>touch _theme/_uswds-theme.scss</pre>
10
-
</div>
11
-
<h3class="step">Activate custom settings.</h3>
12
-
<pclass="step-description">Now, let's tell USWDS that this new settings file exists. We'll open the USWDS Sass entry point (<strong>_theme/styles.scss</strong>) and import this new settings file.</p>
6
+
<h3class="step">Activate theme settings.</h3>
7
+
<pclass="step-description">We're going to add some custom <ahref="https://designsystem.digital.gov/documentation/settings/">USWDS settings</a> to our project. To do this, we're going to add them to our custom settings file: <strong>_theme/_uswds-theme.scss</strong>.</p>
<pclass="step-description">Save, recompile, and hard reload. Looking good!</p>
49
46
<pclass="step-description">Now, for fun, let's try using Public Sans here. It's not too different from system fonts, it looks the same on all browsers, and it's a USWDS font.</p>
<pclass="step-description">Now we'll update some Banner settings to better match our site. We'll give the banner a dark background, use indigo for a link color, and widen the Banner so the text starts further to the left.</p>
65
+
<pclass="step-description">Now we'll update some <ahref="https://designsystem.digital.gov/documentation/settings/#banner">Banner settings</a> to better match our site. We'll give the banner a dark background, use indigo for a link color, and widen the Banner so the text starts further to the left.</p>
<pclass="step-description">Save the settings file, wait for compile, and hard reload if needed.</p>
87
92
<h3class="step">Remove unnecessary styles.</h3>
88
-
<pclass="step-description">Now we've added the Banner and Identifier, but if we look at the size of our compiled CSS, it's quite large — over 400 KB! We can greatly reduce the size by using USWDS packages.</p>
89
-
<pclass="step-description">Let's open up the USWDS Sass entry point (<strong>_theme/styles.scss</strong>), uncomment the packages we need, and comment out the main <strong>uswds</strong>package.</p>
93
+
<pclass="step-description">Now we've added the Banner and Identifier, but if we look at the size of our compiled CSS, it's quite large — over 400 KB! We can greatly reduce the size by using <ahref="https://designsystem.digital.gov/components/packages/">USWDS packages</a>.</p>
94
+
<pclass="step-description">Let's open up the USWDS Sass entry point (<strong>_theme/styles.scss</strong>), remove the main <strong>uswds</strong> package, and add both the <strong>usa-banner</strong> and the <strong>usa-identifier</strong>packages.</p>
<pclass="step-description">After you recompile, you'll see that the CSS size drops down to 59 KB — over 80% smaller.</p>
103
+
<pclass="step-description">After you recompile, you'll see that the CSS size drops down to 59 KB — over 80% smaller. And it compiles in less than a second!</p>
158
104
<pclass="step-description">Congratulations! You now have a site that integrates USWDS, uses two key USWDS components, adapts USWDS to fit your project tone, and uses less extraneous code.</p>
Copy file name to clipboardExpand all lines: _includes/sxs/part-seven.html
+5-3Lines changed: 5 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ <h3 class="step">Import your project styles into USWDS custom styles.</h3>
10
10
<pclass="step-description">In your text editor, open <strong>_theme/_uswds-theme-custom-styles.scss</strong>. We'll connect USWDS styles and our existing project styles by "importing" our project styles into the USWDS custom styles file.</p>
<pclass="step-description">Once you've updated this file, you can save and close it.</p>
16
16
<h3class="step">Add our project Sass source directory to the gulpfile.</h3>
@@ -48,17 +48,19 @@ <h3 class="step">Delete the original project styles.</h3>
48
48
<pre>rm assets/css/styles.css</pre>
49
49
</div>
50
50
<h3class="step">Use the watch script to watch for changes and recompile.</h3>
51
-
<pclass="step-description">In the open terminal window, run the <strong>compile</strong> script to compile our combined styles and watch for future changes.</p>
51
+
<pclass="step-description">In the open terminal window, run the <strong>watch</strong> script to compile our combined styles and watch for future changes.</p>
52
52
<divclass="terminal">
53
53
<pre>npx gulp watch</pre>
54
54
</div>
55
55
<h3class="step">Use USWDS color tokens for project colors.</h3>
56
56
<pclass="step-description">Our tutorial project uses CSS custom properties (otherwise known as "CSS variables" or "custom props"). We can update the value of those custom properties to use USWDS design tokens.</p>
57
57
<pclass="step-description">We'll add our updated custom properties to a new <strong>:root</strong> element, and we'll assign each updated property a <ahref="https://designsystem.digital.gov/design-tokens/color/system-tokens/">USWDS system color token</a>, accessed with the <ahref="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens">USWDS <strong>color()</strong> function</a>.</p>
58
+
<pclass="step-description">To use these USWDS functions, we'll first tell Sass where to find USWDS functions, and that's in a package called <strong>uswds-core</strong>. We'll add a Sass <strong>use</strong> directive to make this connection.</p>
58
59
<pclass="step-description"><strong>Advanced note:</strong> If you're already familiar with Sass and functions, you'll see that when writing CSS custom properties, you need to use <ahref="https://sass-lang.com/documentation/interpolation">Sass interpolation syntax</a> instead of regular functions. Anywhere else in the codebase, you can use regular functions, but custom properties require Sass interpolation.</p>
0 commit comments