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
Let's start with the card border. We'll remove the border and make the card rounder by increasing the border radius.
19
19
</p>
20
20
<pclass="step-description">
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.
21
+
We want to give our card a border radius of 2 units. To do that we'll set the value of the global border radius to <strong>lg</strong> then set the value of the large border radius to 2.
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>my-testimonial</strong> div.
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:
116
+
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:
@@ -152,7 +167,7 @@ <h3 class="step">Style the testimonial icon.</h3>
152
167
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.
Using a combination of utility mixins and USWDS theme settings can help add uniformity across your project. In this example, we'll add the border settings and padding settings from earlier to help our new component sit nicely with the original card. The <strong>u-margin-x()</strong> mixin lets you set left and right margin at the same time.
@@ -199,7 +214,7 @@ <h3 class="step">Adjusting color, background, and contrast.</h3>
199
214
Finally, let's change the color of our testimonial component. The traditional way to set background and color is to use two separate rules. If we want to use our primary colors in this component, we can use the following two rules:
This time, when you save and compile you'll see a warning in the terminal. Let's update our code to use <strong>primary-lighter</strong> as our text color.
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.
23
+
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
24
</p>
25
25
<pclass="step-description">
26
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.
@@ -37,10 +37,10 @@ <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
37
37
<pre>mkdir _theme/components</pre>
38
38
</div>
39
39
<pclass="step-description">
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>).
40
+
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>).
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!
58
58
</p>
59
59
<pclass="step-description">
60
-
Now that our stylesheet is being imported, lets write some customs styles to finish up our card.
60
+
Now that our stylesheet is being imported, lets write some customs styles to finish up our card.
61
61
</p>
62
62
63
63
<h3class="step">Use USWDS core features in custom styles.</h3>
64
64
<pclass="step-description">
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.
65
+
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.
@@ -74,7 +74,7 @@ <h3 class="step">Add custom class and styles.</h3>
74
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. 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.
0 commit comments