Merge pull request #38 from uswds/jm-copy-edits

Extending: copy edits

_includes/sxs/02-extending/part-intro.html

@@ -13,14 +13,14 @@ <h3>Contents</h3>
       </a>
     </li>
     <li>
-      <a class="contents-item" href="#part-one">
+      <a class="contents-item" href="#part-two">
         <span class="contents-part">2</span>
         <span class="contents-title">Writing custom styles</span>
         <span class="material-icons right" aria-hidden="true">arrow_forward</span>
       </a>
     </li>
     <li>
-      <a class="contents-item" href="#part-one">
+      <a class="contents-item" href="#part-three">
         <span class="contents-part">3</span>
         <span class="contents-title">Extending USWDS components</span>
         <span class="material-icons right" aria-hidden="true">arrow_forward</span>

_includes/sxs/02-extending/part-one.html

@@ -1,22 +1,21 @@
 <section class="part one" id="part-one">
   <div class="alert margin-y-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>
+    <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>
     <div class="button-list">
       <a class="button primary" href="/">Return to Learn how to use USWDS<span class="material-icons right" aria-hidden="true">arrow_forward</span></a>
     </div>
   </div>
   <h2><span>Part one</span> Customize a card with theme settings</h2>
   <p>
-    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.
+    On the opposite side of the screen you'll see a USWDS Card component. Let's customize this card with theme settings.
   </p>
   <h3 class="step">View available theme settings.</h3>
   <p class="step-description">
-    Visit the <a href="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. 
+    Visit the <a href="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.
   </p>
-
-  <h3 class="step">Customize border settings</h3>
+  <h3 class="step">Customize border settings.</h3>
   <p class="step-description">
-    Let's start but updating the border to remove the border and give the card a rounder border radius.
+    Let's start with the card border. We'll remove the border and make the card rounder by increasing the border radius.
   </p>
   <p class="step-description">
     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.
@@ -32,7 +31,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 <pre class="blur">);</pre>
   </div>
 
-  <h3 class="step">Customize type settings</h3>
+  <h3 class="step">Customize type settings.</h3>
   <p class="step-description">
     Next, let's update the typesetting of our header to use a <strong>sans</strong> font, increase the size ("xl"), and use a tight line height (2).
   </p>
@@ -92,7 +91,8 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   <p class="step-description">
     Save and reload. You'll see the card's button has gotten a bit purple-er.
   </p>
+
   <p class="step-description">
-    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.
+    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.
   </p>
 </section>

_includes/sxs/02-extending/part-three.html

@@ -3,7 +3,7 @@ <h2><span>Part Three</span> Create a custom component</h2>
   <p>In this section we'll explore extending USWDS by creating a custom <strong>testimonial</strong> component not offered by the design system.</p>
   <h3 class="step">Create a the markup for a new component.</h3>
   <p class="step-description">
-    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!
+    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!
   </p>
   <p class="step-description">
     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>.
@@ -250,6 +250,6 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     This time, we don't get a warning, and our component looks even better. Not bad!
   </p>
   <p class="step-description">
-    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!
+    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!
   </p>
 </section>

_includes/sxs/02-extending/part-two.html

@@ -1,5 +1,5 @@
 <section class="part two" id="part-two">
-  <h2><span>Part Two</span> Customizing a card using custom styles.</h2>
+  <h2><span>Part Two</span> Customizing card using custom styles</h2>
   <p>
     Using custom styles, we can customize our components beyond theme settings.
   </p>
@@ -31,7 +31,7 @@ <h3 class="step">Open a new terminal window.</h3>
 
   <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
   <p class="step-description">
-    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.
+    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.
   </p>
   <div class="terminal">
     <pre>mkdir _theme/components</pre>
@@ -60,7 +60,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     Now that our stylesheet is being imported, lets write some customs styles to finish up our card. 
   </p>
 
-  <h3 class="step">Use USWDS core features in custom styles</h3>
+  <h3 class="step">Use USWDS core features in custom styles.</h3>
   <p class="step-description">
     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.
   </p>
@@ -69,7 +69,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 <pre class="add">@use "uswds-core" as *;</pre>
   </div>
 
-  <h3 class="step">Add custom class and styles</h3>
+  <h3 class="step">Add custom class and styles.</h3>
   <p class="step-description">
     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 <a href="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.
   </p>