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
Save, wait for the Sass to compile, and reload. You'll see the updated border and font settings shape the card component! All without having to write any custom CSS.
Save and reload. You'll see the card's button has gotten a bit purple-er.
93
+
</p>
94
+
51
95
<pclass="step-description">
52
96
But maybe there are additional changes your team would like to make that aren't available in theme settings. In the next section we'll take a look at adding custom styles.
Copy file name to clipboardExpand all lines: _includes/sxs/02-extending/part-two.html
+45-44Lines changed: 45 additions & 44 deletions
Original file line number
Diff line number
Diff line change
@@ -8,95 +8,96 @@ <h3 class="step">Add a custom class for our new variant.</h3>
8
8
We'll use this class to identify our custom card component and assign custom styles.
9
9
</p>
10
10
<pclass="step-description">
11
-
When adding custom classes we recommend using a two to threeletter prefix to identify the organization it belongs to. USWDS primarily uses <strong>usa-</strong>. Since this is a <strong>U</strong>SWDS <strong>T</strong>utorial, let's use <strong>ut-</strong>card as our custom class.
11
+
When adding custom classes we recommend using a two- to three-letter prefix for clear identification. USWDS primarily uses <strong>usa-</strong>. Since this is your tutorial, lets use <strong>my-</strong>card as our custom class.
At this point you should already have two terminal windows open. One is serving our site and the other is compiling our stylesheets. We're going to open one more so we can add a couple new files.
24
+
</p>
25
+
<pclass="step-description">
26
+
Open a new terminal window and navigate to the tutorial's root directory, as before. In the following example, change <strong>path/to/uswds-tutorial</strong> to the actual path.
27
+
</p>
28
+
<divclass="terminal">
29
+
<pre>cd path/to/uswds-tutorial</pre>
30
+
</div>
31
+
20
32
<h3class="step">Create a custom stylesheet for our custom card component.</h3>
21
33
<pclass="step-description">
22
34
To help keep things organized, we'll create a custom stylesheet with styles specific to our customized card component. In later exercises, we'll use this same stylesheet to extend the card component into a new custom component. First, let's add a <strong>components</strong> directory to our css assets.
23
35
</p>
24
36
<divclass="terminal">
25
-
<pre>mkdir assets/css/components</pre>
37
+
<pre>mkdir _theme/components</pre>
26
38
</div>
27
39
<pclass="step-description">
28
-
This pattern will allow us to organize CSS partials in a logical structure. Let's now add our new <strong>ut-card</strong> stylesheet. It's standard naming convention to prefix CSS partials with an underscore.
40
+
Now let's add our new <strong>my-card</strong> stylesheet. It's standard naming convention to prefix CSS partials with an underscore (as we've already seen in <strong>_uswds-theme</strong> and <strong>_uswds-theme-custom-styles</strong>).
Once you've updated this file, you can save and close it. Since we've added our project Sass source directory to our gulpfile in the first part of the tutorial, it should already be compiling correctly!
45
58
</p>
46
-
<h3class="step">Use USWDS utilities in custom styles.</h3>
47
59
<pclass="step-description">
48
-
Now that our stylesheet is being imported, let's write some custom styles to really make this card stand out!
60
+
Now that our stylesheet is being imported, lets write some customs styles to finish up our card.
49
61
</p>
62
+
63
+
<h3class="step">Use USWDS core features in custom styles.</h3>
50
64
<pclass="step-description">
51
-
We'll want to use USWDS design tokens in our stylesheets using USWDS functions and mixins. To do this, let's add <strong>uswds-core</strong> to the top of our new stylesheet with the <strong>use</strong> Sass directive.
65
+
We'll want to use USWDS design tokens in our stylesheets using USWDS stylesheet features like functions and mixins. To do this, lets add <strong>uswds-core</strong> to the top of our new stylesheet with the <strong>use</strong> Sass directive.
Next let's create a custom class for our personalized component and use some USWDS utilities. We'll start by updating the background color of the card. We can use the <ahref="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens-2"><strong>color()</strong> function</a> to set the text and background color with USWDS <ahref="https://designsystem.digital.gov/design-tokens/color/overview/">color tokens</a>.
74
+
Next lets create a custom class for our personalized component and use some USWDS utilities. We'll start by updating the background color of the card. We can use the <ahref="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens-2"><strong>color()</strong> function</a> to use color tokens in our CSS rules.
After recompiling we can see our changes have taken effect. <strong>But wait!</strong> Upon closer inspection, these colors <strong>fail</strong> AA color contrast requirements! Luckily, USWDS uses a color grading system. Using this system, a grade difference 50+ will ensure AA across any two color values. You can learn more about this on our <ahref="https://designsystem.digital.gov/design-tokens/color/overview/#magic-number-2">Using Color</a> page.
70
-
</p>
71
-
<pclass="step-description">
72
-
USWDS also utilizes more advanced tools to automatically check color contrast. Replace our text and background color definitions with the combined <strong>set-text-and-bg</strong> mixin.
83
+
After recompiling we can see our changes have taken effect. Let's refine this card a bit more by reducing the boldness of the header and adding bit more space before the call to action. We'll use <ahref="https://designsystem.digital.gov/design-tokens/spacing-units/">units tokens</a> and <ahref="https://designsystem.digital.gov/design-tokens/typesetting/font-weight/">font weight tokens</a> for this.
If you inspect the compilation messages in the terminal, you'll actually see a warning. These colors don't pass color contrast requirements! let's use the magic number of 50+ to resolve this issue.
0 commit comments