Skip to content

Commit 3e13c79

Browse files
thisisdanothisisdano
authored
Merge pull request #40 from uswds/dw-add-part-two
Add Part Two
2 parents c3c90cf + ce1fed0 commit 3e13c79

24 files changed

Lines changed: 911 additions & 82 deletions

‎.eleventy.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
module.exports = function (eleventyConfig) {
22
eleventyConfig.addPassthroughCopy("assets");
3+
eleventyConfig.addWatchTarget("./_theme/");
4+
eleventyConfig.setWatchThrottleWaitTime(2000); // in milliseconds
35
let pathPrefix = "/";
46

57
if (process.env.BASEURL) {

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
18
1+
20

‎.tool-versions‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodejs 20.9.0

‎_includes/card.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="usa-card">
2+
<div class="usa-card__container">
3+
<div class="usa-card__header">
4+
<h2 class="usa-card__heading">Card component</h2>
5+
</div>
6+
<div class="usa-card__body">
7+
<p>
8+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.
9+
</p>
10+
</div>
11+
<div class="usa-card__footer">
12+
<a href="#" class="usa-button">Visit Florida Keys</a>
13+
</div>
14+
</div>
15+
</div>

‎_includes/hero.html‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

_includes/footer.html renamed to _includes/site/footer.html

File renamed without changes.

_includes/head.html renamed to _includes/site/head.html

File renamed without changes.

‎_includes/site/hero.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<section class="hero">
2+
<h1 class="hero-message">
3+
<span>{{ hero.heading_alt }}</span>
4+
<span>{{ hero.heading }}</span>
5+
</h1>
6+
<p class="under-hero">
7+
{{ hero.body }}
8+
</p>
9+
{% if hero.button_group %}
10+
<div class="button-list">
11+
12+
{% for button in hero.button_group %}
13+
<a
14+
class="button primary {% if secondary %}secondary{% endif %}"
15+
href="{{ button.href }}">
16+
{{ button.label }}
17+
<span
18+
class="material-icons right"
19+
aria-hidden="true">arrow_forward</span>
20+
</a>
21+
{% endfor %}
22+
</div>
23+
{% endif %}
24+
</section>
25+
<picture class="promo-art">
26+
<img src="https://doodleipsum.com/700x700/outline" height="800" width="800" alt="a random doodle">
27+
</picture>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<section class="part intro">
2+
<h1>Part Two</h1>
3+
<h2>Theming, customizing, extending</h2>
4+
<p class="subhed">Take USWDS and make it your own.</p>
5+
<p class="subhed">In this section of the tutorial, you'll expand on theming components. Then you'll learn creating custom project styles for our components. Finally, you'll extend a component to create a custom component!</p>
6+
<h3>Contents</h3>
7+
<ul class="contents">
8+
<li>
9+
<a class="contents-item" href="#part-one">
10+
<span class="contents-part">1</span>
11+
<span class="contents-title">Theming USWDS components</span>
12+
<span class="material-icons right" aria-hidden="true">arrow_forward</span>
13+
</a>
14+
</li>
15+
<li>
16+
<a class="contents-item" href="#part-two">
17+
<span class="contents-part">2</span>
18+
<span class="contents-title">Writing custom styles</span>
19+
<span class="material-icons right" aria-hidden="true">arrow_forward</span>
20+
</a>
21+
</li>
22+
<li>
23+
<a class="contents-item" href="#part-three">
24+
<span class="contents-part">3</span>
25+
<span class="contents-title">Extending USWDS components</span>
26+
<span class="material-icons right" aria-hidden="true">arrow_forward</span>
27+
</a>
28+
</li>
29+
</ul>
30+
</section>

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<section class="part one" id="part-one">
2+
<div class="alert margin-y-3">
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+
<div class="button-list">
5+
<a class="button primary" href="/">Return to Learn how to use USWDS<span class="material-icons right" aria-hidden="true">arrow_forward</span></a>
6+
</div>
7+
</div>
8+
<h2><span>Part one</span> Customize a card with theme settings</h2>
9+
<p>
10+
On the opposite side of the screen you'll see a USWDS Card component. Let's customize this card with theme settings.
11+
</p>
12+
<h3 class="step">View available theme settings.</h3>
13+
<p class="step-description">
14+
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.
15+
</p>
16+
<h3 class="step">Customize border settings.</h3>
17+
<p class="step-description">
18+
Let's start with the card border. We'll remove the border and make the card rounder by increasing the border radius.
19+
</p>
20+
<p class="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 global border radius to <strong>lg</strong> then set the value of the large border radius to 2.
22+
</p>
23+
<div class="editor">
24+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
25+
<pre class="blur">@use "uswds-core" with (
26+
...
27+
</pre><pre class="add"> $theme-border-radius-lg: 2,
28+
$theme-card-border-radius: "lg",
29+
$theme-card-border-width: 0,
30+
</pre>
31+
<pre class="blur">);</pre>
32+
</div>
33+
34+
<h3 class="step">Customize type settings.</h3>
35+
<p class="step-description">
36+
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).
37+
</p>
38+
<div class="editor">
39+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
40+
<pre class="blur">@use "uswds-core" with (
41+
...
42+
$theme-border-radius-lg: 2,
43+
$theme-card-border-radius: "lg",
44+
$theme-card-border-width: 0,</pre>
45+
<pre class="add"> $theme-card-header-typeset: ("sans", "xl", 2),
46+
</pre><pre class="blur">);</pre>
47+
</div>
48+
<p class="step-description">
49+
Save, wait for the Sass to compile, and reload. You'll see the updated border and font settings shape the card component! All without having to write any custom CSS.
50+
</p>
51+
52+
<h3 class="step">Customize perimeter padding settings</h3>
53+
<p class="step-description">
54+
And while we're add it, let's add a bit more padding to help the component feel a little more comfortable and less cramped.
55+
</p>
56+
<div class="editor">
57+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
58+
<pre class="blur">@use "uswds-core" with (
59+
...
60+
$theme-border-radius-lg: 2,
61+
$theme-card-border-radius: "lg",
62+
$theme-card-border-width: 0,
63+
$theme-card-header-typeset: ("sans", "xl", 2),
64+
</pre><pre class="add"> $theme-card-padding-perimeter: 4,</pre>
65+
</div>
66+
<p class="step-description">
67+
Save and reload. Ah, that's nicer.
68+
</p>
69+
70+
71+
<h3 class="step">Customize primary color settings</h3>
72+
<p class="step-description">
73+
Finally, let's update our project's primary color, from blue to indigo.
74+
</p>
75+
<div class="editor">
76+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>
77+
<pre class="blur">@use "uswds-core" with (
78+
...
79+
$theme-border-radius-lg: 2,
80+
$theme-card-border-radius: "lg",
81+
$theme-card-border-width: 0,
82+
$theme-card-header-typeset: ("sans", "xl", 2),
83+
$theme-card-padding-perimeter: 4,
84+
85+
</pre><pre class="add"> $theme-color-primary-lighter: "indigo-20v",
86+
$theme-color-primary-light: "indigo-40v",
87+
$theme-color-primary: "indigo-60v",
88+
$theme-color-primary-dark: "indigo-70v",
89+
$theme-color-primary-darker: "indigo-80v",</pre><pre class="blur">);</pre>
90+
</div>
91+
<p class="step-description">
92+
Save and reload. You'll see the card's button has gotten a bit purple-er.
93+
</p>
94+
95+
<p class="step-description">
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.
97+
</p>
98+
</section>

0 commit comments

Comments
 (0)