Merge pull request #41 from uswds/jm-more-edits

Extending: more edits

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

@@ -81,7 +81,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 
   <h3 class="step">Add stylesheet partial.</h3>
   <p class="step-description">
-    Create a new stylesheet partial for our new component by entering the following in the free temrinal window:
+    Create a new stylesheet partial for our new component by entering the following in the free terminal window:
   </p>
   <div class="terminal">
     <pre>touch assets/css/components/_my-testimonial.scss</pre>
@@ -93,12 +93,12 @@ <h3 class="step">Add stylesheet partial.</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
 @forward "../assets/css/styles.scss";
-@forward "../assets/css/_my-card.scss"; 
-</pre><pre class="add">@forward "../assets/css/_my-testimonial.scss";</pre>
+@forward "../_theme/components/_my-card.scss";
+</pre><pre class="add">@forward "../_theme/components/_my-testimonial.scss";</pre>
   </div>
   <h3 class="step">Start styling the component.</h3>
   <p class="step-description">
-    Just like using the <strong>color()</strong> function to use USWDS color tokens, we can use <strong>units()</strong> and other token functions to use USWDS tokens in native CSS properties. To get our base styles for our new component, add the following styles to the new stylesheet:
+    Just like using the <strong>color()</strong> function to use USWDS color tokens, we can use <strong>units()</strong> and other token functions to use tokens in native CSS properties. To get our base styles for our new component, add the following styles to the new stylesheet:
   </p>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
@@ -140,7 +140,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 .my-testimonial__profile-title {
   font-size: font-size("body", 5);
   margin-top: units(0);
-}  
+}
 </pre>
   </div>
   <p class="step-description">

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

@@ -20,7 +20,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 
   <h3 class="step">Open a new terminal window.</h3>
   <p class="step-description">
-    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. 
+    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.
   </p>
   <p class="step-description">
     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.
@@ -37,7 +37,7 @@ <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
     <pre>mkdir _theme/components</pre>
   </div>
   <p class="step-description">
-   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>).
+    Now let's add our new <strong>my-card</strong> stylesheet. It's standard naming convention to prefix SCSS partials with an underscore (as we've already seen in <strong>_uswds-theme</strong> and <strong>_uswds-theme-custom-styles</strong>).
   </p>
   <div class="terminal">
     <pre>touch assets/css/components/_my-card.scss</pre>
@@ -50,19 +50,19 @@ <h3 class="step">Import the new stylesheet into USWDS custom styles.</h3>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
-@forward "../assets/css/styles.scss";  
-</pre><pre class="add">@forward "../assets/css/_my-card.scss";</pre>
+@forward "../assets/css/styles.scss";
+</pre><pre class="add">@forward "../_theme/components/_my-card.scss";</pre>
   </div>
   <p class="step-description">
     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!
   </p>
   <p class="step-description">
-    Now that our stylesheet is being imported, lets write some customs styles to finish up our card. 
+    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>
   <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.
+    We'll want to use USWDS design tokens in our stylesheets using USWDS style 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>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
@@ -97,7 +97,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 }</pre>
   </div>
   <p class="step-description">
-    Now we're making progress. This component is looking pretty good. 
+    Now we're making progress. This component is looking pretty good.
   </p>
   <p class="step-description">In our next section, we'll take a look at using everything USWDS has to offer to create a custom component!</p>
 </section>