Skip to content

Commit 78e838b

Browse files
thisisdanothisisdano
committed
Use html filetype since we don't use markdown
1 parent 420cc07 commit 78e838b

5 files changed

Lines changed: 126 additions & 35 deletions

File tree

‎_includes/sxs/part-five.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ <h2><span>Part five</span> Add the USWDS Banner</h2>
33
<h3 class="step">Get the USWDS Banner HTML.</h3>
44
<p class="step-description">Head over to the <a href="https://designsystem.digital.gov/components/banner">USWDS Banner component page</a>. Expand the <strong>Component code</strong> accordion and copy the first section of markup, from <strong>&lt;section class="usa-banner"...&gt;</strong> to <strong>&lt;/section&gt;</strong></p>
55
<h3 class="step">Add the Banner HTML into the tutorial markup.</h3>
6-
<p class="step-description">Paste the Banner markup into the top of the tutorial index file (<strong>index.md</strong>), right after the front matter.</p>
6+
<p class="step-description">Paste the Banner markup into the top of the tutorial index file (<strong>index.html</strong>), right after the front matter.</p>
77
<div class="editor">
8-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.md</h4>
8+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.html</h4>
99
<pre class="blur">---
1010
layout: default
1111
title: USWDS Tutorial
@@ -24,10 +24,10 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
2424
</div>
2525
<h3 class="step">Update image paths.</h3>
2626
<p class="step-description">Now the banner is on your page. But when you look at it <a href="http://localhost:8080/">in the browser window</a>, it won't look right. The links are broken. That's because the image path in our tutorial is different from the image path on the USWDS website. Let's update all the image paths to our project path.</p>
27-
<p class="step-description">In <strong>index.md</strong>, search for all instances of the broken path (<strong>/assets/img</strong>) and replace each one with the our project's USWDS image path (<strong>/assets/uswds/img</strong>).</p>
27+
<p class="step-description">In <strong>index.html</strong>, search for all instances of the broken path (<strong>/assets/img</strong>) and replace each one with the our project's USWDS image path (<strong>/assets/uswds/img</strong>).</p>
2828
<p class="step-description">The example shows each of these replacements. Use find/replace to replace all of them.</p>
2929
<div class="editor">
30-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.md</h4>
30+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.html</h4>
3131
<pre class="remove">src="/assets/img/us_flag_small.png"</pre><pre class="add">
3232
src="/assets/uswds/img/us_flag_small.png"
3333

‎_includes/sxs/part-seven.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,9 @@ <h3 class="step">Use USWDS color tokens for project colors.</h3>
5959
<p class="step-description">To use these USWDS functions, we'll first tell Sass where to find USWDS functions, and that's in a package called <strong>uswds-core</strong>. We'll add a Sass <strong>use</strong> directive to make this connection.</p>
6060
<p class="step-description"><strong>Advanced note:</strong> If you're already familiar with Sass and functions, you'll see that when writing CSS custom properties, you need to use <a href="https://sass-lang.com/documentation/interpolation">Sass interpolation syntax</a> instead of regular functions. Anywhere else in the codebase, you can use regular functions, but custom properties require Sass interpolation.</p>
6161
<div class="editor">
62-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/styles.scss</h4>
63-
<pre class="add">@use "uswds-core" as *;
62+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
63+
<pre class="blur">@use "uswds-core" as *;
64+
@forward "../assets/css/styles.scss";</pre><pre class="add">
6465
:root {
6566
--blue-2: #{color("blue-warm-20v")};
6667
--blue-3: #{color("blue-warm-30v")};
@@ -83,16 +84,13 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
8384
--teal-2: #{color("mint-30v")};
8485
--yellow-1: #{color("gold-10v")};
8586
--yellow-7: #{color("gold-30v")};
86-
}</pre><pre class="blur">
87-
88-
:where(html) {
89-
color-scheme: light;</pre>
87+
}</pre>
9088
</div>
9189
<p class="step-description">Save, wait for the Sass to compile, do a hard reload, and you'll see the new colors!</p>
9290
<h3 class="step">Use USWDS font tokens for project fonts.</h3>
9391
<p class="step-description">Similarly, we can use <a href="https://designsystem.digital.gov/design-tokens/typesetting/font-family/">USWDS font family tokens</a> with our CSS custom properties.</p>
9492
<div class="editor">
95-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/styles.scss</h4>
93+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
9694
<pre class="blur">:root {
9795
...
9896
--yellow-1: #{color("gold-10v")};

‎_includes/sxs/part-six.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ <h2><span>Part six</span> Add the USWDS Identifier</h2>
44
<h3 class="step">Get the USWDS Identifier HTML.</h3>
55
<p class="step-description">Head over to the <a href="https://designsystem.digital.gov/components/identifier">USWDS Identifier component page</a>. Expand the <strong>Component code</strong> accordion and copy the first section of markup, from <strong>&lt;div class="usa-identifier"...&gt;</strong> to its closing <strong>&lt;/div&gt;</strong></p>
66
<h3 class="step">Add the Identifier HTML into the tutorial markup.</h3>
7-
<p class="step-description">Paste the Identifier markup into the bottom of the tutorial index file (<strong>index.md</strong>), right after the footer.</p>
7+
<p class="step-description">Paste the Identifier markup into the bottom of the tutorial index file (<strong>index.html</strong>), right after the footer.</p>
88
<div class="editor">
9-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.md</h4>
9+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.html</h4>
1010
<pre class="blur">...
1111
&lt;/main&gt;
1212
&lcub;% include footer.html %&rcub;
@@ -24,10 +24,10 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
2424
</pre>
2525
</div>
2626
<h3 class="step">Update image paths.</h3>
27-
<p class="step-description">Just like we did in <a href="#part-five">Part Five</a>, we'll need to update the image paths. In <strong>index.md</strong>, search for all instances of the broken path (<strong>/assets/img</strong>) and replace it with the USWDS image path in our project (<strong>/assets/uswds/img</strong>).</p>
27+
<p class="step-description">Just like we did in <a href="#part-five">Part Five</a>, we'll need to update the image paths. In <strong>index.html</strong>, search for all instances of the broken path (<strong>/assets/img</strong>) and replace it with the USWDS image path in our project (<strong>/assets/uswds/img</strong>).</p>
2828
<p class="step-description">This time, there's only one path to replace.</p>
2929
<div class="editor">
30-
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.md</h4>
30+
<h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> index.html</h4>
3131
<pre class="remove">src="/assets/img/circle-gray-20.svg"</pre><pre class="add">
3232
src="/assets/uswds/img/circle-gray-20.svg"</pre>
3333
</div>

‎index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
layout: default
3+
title: USWDS Tutorial
4+
---
5+
6+
<section
7+
class="usa-banner"
8+
aria-label="Official website of the United States government"
9+
>
10+
<div class="usa-accordion">
11+
<header class="usa-banner__header">
12+
<div class="usa-banner__inner">
13+
<div class="grid-col-auto">
14+
<img
15+
aria-hidden="true"
16+
class="usa-banner__header-flag"
17+
src="/assets/uswds/img/us_flag_small.png"
18+
alt=""
19+
/>
20+
</div>
21+
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
22+
<p class="usa-banner__header-text">
23+
An official website of the United States government
24+
</p>
25+
<p class="usa-banner__header-action">Here’s how you know</p>
26+
</div>
27+
<button
28+
type="button"
29+
class="usa-accordion__button usa-banner__button"
30+
aria-expanded="false"
31+
aria-controls="gov-banner-default-default"
32+
>
33+
<span class="usa-banner__button-text">Here’s how you know</span>
34+
</button>
35+
</div>
36+
</header>
37+
<div
38+
class="usa-banner__content usa-accordion__content"
39+
id="gov-banner-default-default"
40+
>
41+
<div class="grid-row grid-gap-lg">
42+
<div class="usa-banner__guidance tablet:grid-col-6">
43+
<img
44+
class="usa-banner__icon usa-media-block__img"
45+
src="/assets/uswds/img/icon-dot-gov.svg"
46+
role="img"
47+
alt=""
48+
aria-hidden="true"
49+
/>
50+
<div class="usa-media-block__body">
51+
<p>
52+
<strong>Official websites use .gov</strong><br />A
53+
<strong>.gov</strong> website belongs to an official government
54+
organization in the United States.
55+
</p>
56+
</div>
57+
</div>
58+
<div class="usa-banner__guidance tablet:grid-col-6">
59+
<img
60+
class="usa-banner__icon usa-media-block__img"
61+
src="/assets/uswds/img/icon-https.svg"
62+
role="img"
63+
alt=""
64+
aria-hidden="true"
65+
/>
66+
<div class="usa-media-block__body">
67+
<p>
68+
<strong>Secure .gov websites use HTTPS</strong><br />A
69+
<strong>lock</strong> (
70+
<span class="icon-lock"
71+
><svg
72+
xmlns="http://www.w3.org/2000/svg"
73+
width="52"
74+
height="64"
75+
viewBox="0 0 52 64"
76+
class="usa-banner__lock-image"
77+
role="img"
78+
aria-labelledby="banner-lock-description-default"
79+
focusable="false"
80+
>
81+
<title id="banner-lock-title-default">Lock</title>
82+
<desc id="banner-lock-description-default">Locked padlock icon</desc>
83+
<path
84+
fill="#000000"
85+
fill-rule="evenodd"
86+
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
87+
/>
88+
</svg> </span
89+
>) or <strong>https://</strong> means you’ve safely connected to
90+
the .gov website. Share sensitive information only on official,
91+
secure websites.
92+
</p>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
<header class="opener">
100+
{% include "hero.html" %}
101+
</header>
102+
<main id="tutorial-start">
103+
{% include "sxs/part-intro.html" %}
104+
{% include "sxs/part-one.html" %}
105+
{% include "sxs/part-two.html" %}
106+
{% include "sxs/part-three.html" %}
107+
{% include "sxs/part-four.html" %}
108+
{% include "sxs/part-five.html" %}
109+
{% include "sxs/part-six.html" %}
110+
{% include "sxs/part-seven.html" %}
111+
{% include "sxs/part-eight.html" %}
112+
</main>
113+
{% include "footer.html" %}

‎index.md‎

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

0 commit comments

Comments
 (0)