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-three.html
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -3,10 +3,10 @@ <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/sxs/02-extending/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
+
Visit <strong>_includes/sxs/02-extending/testimonial.html</strong>. This will be where we'll add the markup for our new component. Once the markup is added, it will appear under our custom card component!
7
7
</p>
8
8
<pclass="step-description">
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>ut-testimonial</strong>.
9
+
Start by adding the basic skeleton of the component. Similar to card, we'll need an outer div, a body, and footer section. We'll call this component <strong>ut-testimonial</strong>.
Lastly, lets add a quotation icon for some visual flare! Visit the <ahref="https://designsystem.digital.gov/components/icon/">Icon component</a> page, search for <strong>quote</strong>, and click the search result to copy the icons markup. Paste this markup directly after the opening <strong>ut-testimonial</strong> div.
52
+
Lastly, let's add a quotation icon for some visual flare! Visit the <ahref="https://designsystem.digital.gov/components/icon/">Icon component</a> page, search for <strong>quote</strong>, and click the search result to copy the icons markup. Paste this markup directly after the opening <strong>ut-testimonial</strong> div.
<h3class="step">Styling the testimonial icon.</h3>
124
124
<pclass="step-description">
125
-
USWDS uses variables to maintain consistent styles across different definitions. Lets create a variable for our icon stroke and fill at the top of our stylesheet.
125
+
USWDS uses variables to maintain consistent styles across different definitions. let's create a variable for our icon stroke and fill at the top of our stylesheet.
<h3class="step">Using USWDS theme tokens with mixins.</h3>
161
161
<pclass="step-description">
162
-
Finally, lets use a combination of utility mixins and uswds theme settings to display how you can add uniformity across your project! In this example, we'll add the border settings from step one to help our new component sit nicely with the original card.
162
+
Finally, let's use a combination of utility mixins and uswds theme settings to display how you can add uniformity across your project! In this example, we'll add the border settings from step one to help our new component sit nicely with the original card.
Copy file name to clipboardExpand all lines: _includes/sxs/02-extending/part-two.html
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ <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 three letter 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, lets use <strong>ut-</strong>card as our custom class.
11
+
When adding custom classes we recommend using a two to three letter 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.
<h3class="step">Create a custom stylesheet for our custom card component.</h3>
21
21
<pclass="step-description">
22
-
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.
22
+
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
23
</p>
24
24
<divclass="terminal">
25
25
<pre>mkdir assets/css/components</pre>
26
26
</div>
27
27
<pclass="step-description">
28
-
This pattern will allow us to organize CSS partials an 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.
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.
<h3class="step">Use USWDS utilities in custom styles.</h3>
47
47
<pclass="step-description">
48
-
Now that our stylesheet is being imported, lets write some customs styles to really make this card stand out!
48
+
Now that our stylesheet is being imported, let's write some custom styles to really make this card stand out!
49
49
</p>
50
50
<pclass="step-description">
51
-
We'll want to use USWDS design tokens in our stylesheets using USWDS 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.
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.
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 set the text and background color with USWDS <ahref="https://designsystem.digital.gov/design-tokens/color/overview/">color tokens</a>.
59
+
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>.
If you inspect the compilation messages in the terminal, you'll actually see a warning these colors do not pass color contrast requirements! Lets use the magic number of 50+ to resolve this issue.
86
+
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