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
Copy file name to clipboardExpand all lines: _includes/sxs/02-extending/part-one.html
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,21 @@
1
1
<sectionclass="part one" id="part-one">
2
2
<divclass="alert margin-y-3">
3
-
<p><strong>Heads up!</strong> If you haven't completed part one of this tutorial you will be unable to complete certain steps throughout this section! Please complete the original tutorial before moving on to Extending USWDS.</p>
3
+
<p><strong>Heads up!</strong> If you haven't completed part one of this tutorial you'll be unable to complete certain steps throughout this section! Please complete the original tutorial before moving on to Extending USWDS.</p>
4
4
<divclass="button-list">
5
5
<aclass="button primary" href="/">Return to Learn how to use USWDS<spanclass="material-icons right" aria-hidden="true">arrow_forward</span></a>
6
6
</div>
7
7
</div>
8
8
<h2><span>Part one</span> Customize a card with theme settings</h2>
9
9
<p>
10
-
Over on the opposite side of the screen you'll see a USWDS Card component. Let's customize this card a bit for our site. We’ll start by using theme settings to make simple customizations.
10
+
On the opposite side of the screen you'll see a USWDS Card component. Let's customize this card with theme settings.
11
11
</p>
12
12
<h3class="step">View available theme settings.</h3>
13
13
<pclass="step-description">
14
-
Visit the <ahref="https://designsystem.digital.gov/components/card/#component-settings-card">USWDS Card component settings table</a> to see a list of available settings. Settings allow you to apply a global theme to USWDS components and styles without modifying CSS. Today's we're going to give our card a light golden look.
14
+
Visit the <ahref="https://designsystem.digital.gov/components/card/#component-settings-card">USWDS Card component settings table</a> to see a list of available settings. Settings allow you to apply styles globally without writing custom CSS. Today we're going to give our card a light golden look.
15
15
</p>
16
-
17
-
<h3class="step">Customize border settings</h3>
16
+
<h3class="step">Customize border settings.</h3>
18
17
<pclass="step-description">
19
-
Let's start but updating the border to remove the border and give the card a rounder border radius.
18
+
Let's start with the card border. We'll remove the border and make the card rounder by increasing the border radius.
20
19
</p>
21
20
<pclass="step-description">
22
21
We want to give our card a border radius of 2 units. To do that we'll set the value of the border radius to <strong>lg</strong> then set the value of the large border radius to 2.
Save and reload. You'll see the card's button has gotten a bit purple-er.
94
93
</p>
94
+
95
95
<pclass="step-description">
96
-
But maybe there are additional changes your team would like to make that are not available in theme settings. In the next section we'll take a look at adding custom styles.
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-three.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ <h2><span>Part Three</span> Create a custom component</h2>
3
3
<p>In this section we'll explore extending USWDS by creating a custom <strong>testimonial</strong> component not offered by the design system.</p>
4
4
<h3class="step">Create a the markup for a new component.</h3>
5
5
<pclass="step-description">
6
-
Visit<strong>_includes/testimonial.html</strong>. This will be where we will add the markup for our new component. Once the markup is filled out, it will appear beneath our custom card component!
6
+
Open<strong>_includes/testimonial.html</strong>. This will be where we'll add the markup for our new component. Once the markup is added, it'll appear beneath our custom card component!
7
7
</p>
8
8
<pclass="step-description">
9
9
Start by adding the basic skeleton of the component. We'll need an outer div, a body, and footer section. We'll call this component <strong>my-testimonial</strong>.
This time, we don't get a warning, and our component looks even better. Not bad!
251
251
</p>
252
252
<pclass="step-description">
253
-
And voila! You've used theme settings, custom styles, USWDS tokens, and utility mixins to theme, customize, and extend USWDS into creating our very own component! Great work!
253
+
And voilà! You've used theme settings, custom styles, USWDS tokens, and utility mixins to theme, customize, and extend USWDS into creating our very own component! Great work!
Copy file name to clipboardExpand all lines: _includes/sxs/02-extending/part-two.html
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
<sectionclass="part two" id="part-two">
2
-
<h2><span>Part Two</span> Customizing a card using custom styles.</h2>
2
+
<h2><span>Part Two</span> Customizing card using custom styles</h2>
3
3
<p>
4
4
Using custom styles, we can customize our components beyond theme settings.
5
5
</p>
@@ -31,7 +31,7 @@ <h3 class="step">Open a new terminal window.</h3>
31
31
32
32
<h3class="step">Create a custom stylesheet for our custom card component.</h3>
33
33
<pclass="step-description">
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, lets add a <strong>components</strong> directory to our css assets.
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.
Now that our stylesheet is being imported, lets write some customs styles to finish up our card.
61
61
</p>
62
62
63
-
<h3class="step">Use USWDS core features in custom styles</h3>
63
+
<h3class="step">Use USWDS core features in custom styles.</h3>
64
64
<pclass="step-description">
65
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 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.
0 commit comments