Skip to content

Commit 01cc977

Browse files
author
Ethan Muller
committed
feat: facelift for design system interface
This adds a bunch of styles to make the interface of the design system a bit prettier. This loads a couple fonts and adds some (easily customizable) colors. This is meant to help differentiate between the contents of the system and the interface of the system.
1 parent 73e3a41 commit 01cc977

File tree

13 files changed

+15589
-147
lines changed

13 files changed

+15589
-147
lines changed

‎package-lock.json

+15,155
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"npm-run-all": "^4.1.5",
5454
"pa11y": "^5.1.0",
5555
"postcss-cli": "^6.0.1",
56+
"prism-themes": "^1.1.0",
5657
"rimraf": "^2.5.4",
5758
"shelljs": "^0.8.3",
5859
"stylelint": "^9.9.0",

‎src/js/design-system-interface/variant-selector.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const variantSets = [...document.querySelectorAll('.drizzle-variant-set')];
1+
const variantsBoxes = [...document.querySelectorAll('.drizzle-pattern__variant-box')];
22

3-
const variantsData = variantSets.map((v) => {
4-
const root = v.closest('.drizzle-Item');
5-
const patternContainer = root.querySelector('.drizzle-pattern');
6-
const source = root.querySelector('.drizzle-source');
3+
const variantsData = variantsBoxes.map((v) => {
4+
const root = v.closest('.drizzle-pattern');
5+
const patternContainer = root.querySelector('.drizzle-pattern__demo-box--view');
6+
const source = root.querySelector('.drizzle-pattern__source');
77
const originalPattern = patternContainer.children[0].cloneNode(true);
8-
const variantGroups = [...v.querySelectorAll('.drizzle-variant-set__group')];
8+
const variantGroups = [...v.querySelectorAll('.drizzle-pattern__variant-group')];
99

1010
return {
1111
dom: v,
@@ -79,10 +79,10 @@ function onLoad() {
7979
}
8080

8181
function onChange(e) {
82-
const v = getVariantData(e.target.closest('.drizzle-variant-set'));
82+
const v = getVariantData(e.target.closest('.drizzle-pattern__variant-box'));
8383
renderVariant(v);
8484
}
8585

86-
variantSets.forEach(v => v.addEventListener('change', onChange));
86+
variantsBoxes.forEach(v => v.addEventListener('change', onChange));
8787

8888
onLoad();

‎src/markup/layout/collection.hbs

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
---
2-
title: Components
3-
---
4-
51
{{#extend "drizzle"}}
62
{{#content "main"}}
7-
<h1 class="drizzle-u-capitalize">{{name}}</h1>
3+
<h1 class="drizzle-collection-heading drizzle-u-capitalize">
4+
<span class="drizzle-collection-heading__sub">Components/</span>
5+
<span class="drizzle-collection-heading__text">{{name}}</span>
6+
</h1>
87

98
{{#if notes}}
10-
{{{markdown notes}}}
9+
<div class="drizzle-p">
10+
{{{markdown notes}}}
11+
</div>
1112
{{/if}}
1213

1314

‎src/markup/layout/drizzle.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
<meta name="description" content="">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88

9-
<title>{{title}} | {{data "global.companyName"}} Design System</title>
9+
<title>{{title}}{{name}} | {{data "global.companyName"}} Design System</title>
1010

1111
{{> patterns.drizzle.partials.stylesheet-link-tags}}
1212
</head>
1313
<body class="drizzle-Layout-body">
1414
{{> patterns.drizzle.partials.sidebar}}
1515

16-
<main id="mainContent" class="drizzle-Layout-main drizzle-u-cf">
16+
<main id="mainContent" class="drizzle-Layout-main drizzle-u-cf {{main-class}}">
1717
<div class="drizzle-u-pad drizzle-u-rhythm">
1818
{{#block "body"}}
1919
{{#block "main"}}

‎src/markup/pages/documentation/grid.hbs

+32-32
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@ layout: drizzle
1212
<p>Most grid layouts are going to use either a two, three, or four column layout. The basic grid system includes all of the classes needed to create a simple layout with class names that are spelled out and easy to read.</p>
1313

1414
<div class="o-grid">
15-
<div class="o-grid__full" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
15+
<div class="o-grid__full drizzle-grid-example"></div>
1616

17-
<div class="o-grid__half" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
18-
<div class="o-grid__half" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
17+
<div class="o-grid__half drizzle-grid-example"></div>
18+
<div class="o-grid__half drizzle-grid-example"></div>
1919

20-
<div class="o-grid__third" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
21-
<div class="o-grid__third" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
22-
<div class="o-grid__third" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
20+
<div class="o-grid__third drizzle-grid-example"></div>
21+
<div class="o-grid__third drizzle-grid-example"></div>
22+
<div class="o-grid__third drizzle-grid-example"></div>
2323

24-
<div class="o-grid__quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
25-
<div class="o-grid__quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
26-
<div class="o-grid__quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
27-
<div class="o-grid__quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
24+
<div class="o-grid__quarter drizzle-grid-example"></div>
25+
<div class="o-grid__quarter drizzle-grid-example"></div>
26+
<div class="o-grid__quarter drizzle-grid-example"></div>
27+
<div class="o-grid__quarter drizzle-grid-example"></div>
2828

29-
<div class="o-grid__third" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
30-
<div class="o-grid__two-third" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
29+
<div class="o-grid__third drizzle-grid-example"></div>
30+
<div class="o-grid__two-third drizzle-grid-example"></div>
3131

32-
<div class="o-grid__quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
33-
<div class="o-grid__three-quarter" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #003763;"></div>
32+
<div class="o-grid__quarter drizzle-grid-example"></div>
33+
<div class="o-grid__three-quarter drizzle-grid-example"></div>
3434
</div>
3535

3636
<pre class="drizzle-u-borderTop drizzle-u-pad">
@@ -99,13 +99,13 @@ layout: drizzle
9999
<p>To adjust a the width of a column at different breakpoints you can add <code class="language-css">@sm</code>, <code class="language-css">@md</code>, <code class="language-css">@lg</code>, <code class="language-css">@xl</code> after any of the grid classes:</p>
100100

101101
<div class="o-grid">
102-
<div class="o-grid__half o-grid__third@sm" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
103-
<div class="o-grid__half o-grid__third@sm" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
104-
<div class="o-grid__full o-grid__third@sm" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
102+
<div class="o-grid__half o-grid__third@sm drizzle-grid-example"></div>
103+
<div class="o-grid__half o-grid__third@sm drizzle-grid-example"></div>
104+
<div class="o-grid__full o-grid__third@sm drizzle-grid-example"></div>
105105

106-
<div class="o-grid__full o-grid__quarter@md" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
107-
<div class="o-grid__full o-grid__half@md" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
108-
<div class="o-grid__full o-grid__quarter@md" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #F7A700;"></div>
106+
<div class="o-grid__full o-grid__quarter@md drizzle-grid-example"></div>
107+
<div class="o-grid__full o-grid__half@md drizzle-grid-example"></div>
108+
<div class="o-grid__full o-grid__quarter@md drizzle-grid-example"></div>
109109
</div>
110110

111111
<pre class="drizzle-u-borderTop drizzle-u-pad">
@@ -128,23 +128,23 @@ layout: drizzle
128128

129129

130130
<div class="o-grid">
131-
<div class="o-grid__1-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
132-
<div class="o-grid__11-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
131+
<div class="o-grid__1-12 drizzle-grid-example"></div>
132+
<div class="o-grid__11-12 drizzle-grid-example"></div>
133133

134-
<div class="o-grid__2-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
135-
<div class="o-grid__10-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
134+
<div class="o-grid__2-12 drizzle-grid-example"></div>
135+
<div class="o-grid__10-12 drizzle-grid-example"></div>
136136

137-
<div class="o-grid__3-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
138-
<div class="o-grid__9-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
137+
<div class="o-grid__3-12 drizzle-grid-example"></div>
138+
<div class="o-grid__9-12 drizzle-grid-example"></div>
139139

140-
<div class="o-grid__4-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
141-
<div class="o-grid__8-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
140+
<div class="o-grid__4-12 drizzle-grid-example"></div>
141+
<div class="o-grid__8-12 drizzle-grid-example"></div>
142142

143-
<div class="o-grid__5-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
144-
<div class="o-grid__7-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
143+
<div class="o-grid__5-12 drizzle-grid-example"></div>
144+
<div class="o-grid__7-12 drizzle-grid-example"></div>
145145

146-
<div class="o-grid__6-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
147-
<div class="o-grid__6-12" style="box-shadow: inset 0 0 0px 2px white;height: 100px; background: #9FB4CE;"></div>
146+
<div class="o-grid__6-12 drizzle-grid-example"></div>
147+
<div class="o-grid__6-12 drizzle-grid-example"></div>
148148
</div>
149149

150150
<pre class="drizzle-u-borderTop drizzle-u-pad">

‎src/markup/pages/index.hbs

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
---
2+
title: Home
23
layout: drizzle
4+
main-class: drizzle-white-bg
35
---
46

5-
<h1>{{data "global.companyName"}} Design System</h1>
7+
<h1 class="drizzle-heading-1">{{data "global.companyName"}} Design System</h1>
68

7-
<h2>Demo Pages</h2>
9+
<p class="drizzle-p u-margin-bottom-xl">This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts. It includes working examples, code snippets and documentation.</p>
10+
11+
<h2 class="drizzle-heading-2">Demo Pages</h2>
812
<div class="u-margin-bottom-lg">
913
<ul>
1014
{{#each (pages "demos" sortby="order")}}

‎src/markup/patterns/components/buttons/btn-with-icon.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: Btn (with Icon)
2+
name: Button (with Icon)
33
order: 5
44
notes: |
55
Icons can be added to buttons by using the [SVG sprite sheet](/svg/symbol/sprite.symbol.html)

‎src/markup/patterns/components/buttons/btn.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: Btn
2+
name: Button
33
order: 1
44
55
variantGroups:

‎src/markup/patterns/components/buttons/collection.yaml

-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
21
notes: |
32
Buttons are used to indicate that an element is clickable. These button styles can be applied to a, button, or input elements

‎src/markup/patterns/drizzle/partials/item.hbs

+41-41
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,50 @@
33
# the pattern builder script fails
44
hidden: true
55
---
6-
<div class="drizzle-Item drizzle-u-rhythm">
7-
{{!-- Header, labels --}}
8-
<div class="drizzle-u-marginEnds">
9-
{{#> drizzle.labelheader tag="h2" id="(toSlug name)-pattern" labels=data.labels}}
10-
<h2 class="" id="{{toSlug name}}">
11-
<a href="#{{toSlug name}}">
12-
{{name}}
13-
</a>
6+
<div class="drizzle-pattern">
7+
{{#> drizzle.labelheader tag="h2" id="(toSlug name)-pattern" labels=data.labels}}
8+
<div class="drizzle-pattern__header">
9+
<h2 class="drizzle-pattern__title" id="{{toSlug name}}">
10+
{{name}}
1411
</h2>
15-
{{/drizzle.labelheader}}
16-
</div>
12+
13+
{{#if data.variantGroups}}
14+
<button class="js-toggler drizzle-pattern__variant-button" aria-expanded="false" id="{{toSlug name}}-variants-toggle">
15+
Variants
16+
<span class="c-btn__icon c-btn__icon--flip-when-expanded">
17+
<svg class="c-icon c-icon--chevron" focusable="false" aria-hidden="true">
18+
<use xlink:href="/svg/symbol/svg/sprite.symbol.svg#icon-chevron"></use>
19+
</svg>
20+
</span>
21+
</button>
22+
{{/if}}
23+
</div>
24+
{{/drizzle.labelheader}}
25+
1726

1827
{{#if data.variantGroups}}
19-
<div class="c-expandable-content">
20-
21-
<button class="js-toggler c-expandable-content__button drizzle-variant-button" aria-expanded="false" id="{{toSlug name}}-variants-toggle">
22-
Variants
23-
<span class="c-btn__icon c-btn__icon--flip-when-expanded">
24-
<svg class="c-icon c-icon--chevron" focusable="false" aria-hidden="true">
25-
<use xlink:href="/svg/symbol/svg/sprite.symbol.svg#icon-chevron"></use>
26-
</svg>
27-
</span>
28-
</button>
29-
<div class="drizzle-variant-set c-expandable-content__content u-padding-top-lg" aria-labelledby="{{toSlug name}}-variants-toggle" aria-hidden="false">
30-
{{#each data.variantGroups}}
31-
<fieldset class="drizzle-variant-set__group">
32-
<legend class="drizzle-variant-set__legend">{{this.name}}</legend>
33-
{{#each this.set}}
34-
<label>
35-
<input type="radio" name="variant-{{toSlug ../../name}}-{{toSlug ../name}}" value="{{this}}">
36-
{{#is this ""}}
37-
<em>none</em>
38-
{{else}}
39-
<code>{{this}}</code>
40-
{{/is}}
41-
</label>
42-
{{/each}}
43-
</fieldset>
44-
{{/each}}
45-
</div>
28+
<div class="drizzle-pattern__variant-box c-expandable-content__content u-padding-top-lg" aria-labelledby="{{toSlug name}}-variants-toggle" aria-hidden="false">
29+
{{#each data.variantGroups}}
30+
<fieldset class="drizzle-pattern__variant-group">
31+
<legend class="drizzle-pattern__variant-legend">{{this.name}}</legend>
32+
{{#each this.set}}
33+
<label>
34+
<input type="radio" name="variant-{{toSlug ../../name}}-{{toSlug ../name}}" value="{{this}}">
35+
{{#is this ""}}
36+
<em>none</em>
37+
{{else}}
38+
<code>{{this}}</code>
39+
{{/is}}
40+
</label>
41+
{{/each}}
42+
</fieldset>
43+
{{/each}}
4644
</div>
4745
{{/if}}
4846

4947
{{!-- Notes --}}
5048
{{#if data.notes}}
51-
<div class="drizzle-Item-notes drizzle-u-rhythm">
49+
<div class="drizzle-Item-notes drizzle-u-rhythm drizzle-pattern__info">
5250
{{{data.notes}}}
5351
</div>
5452
{{/if}}
@@ -115,13 +113,15 @@ hidden: true
115113
</div>
116114
{{/if}}
117115
{{!-- Preview --}}
118-
<div class="drizzle-u-border">
119-
<div class="drizzle-pattern drizzle-u-pad drizzle-u-cf drizzle-u-posRelative {{data.previewClass}}">
116+
<div class="u-margin-top-lg">
117+
<h3 class="drizzle-pattern__demo-box-title">View</h3>
118+
<div class="drizzle-pattern__demo-box drizzle-pattern__demo-box--view {{data.previewClass}}">
120119
{{{pattern id @root}}}
121120
</div>
122121
{{!-- Code sample --}}
123122
{{#unless data.sourceless}}
124-
<pre class="drizzle-u-borderTop drizzle-u-pad"><code class="drizzle-source language-markup">{{{patternSource id @root}}}</code></pre>
123+
<h3 class="drizzle-pattern__demo-box-title">HTML</h3>
124+
<pre class="drizzle-pattern__demo-box drizzle-pattern__demo-box--code"><code class="drizzle-pattern__source language-markup">{{{patternSource id @root}}}</code></pre>
125125
{{/unless}}
126126
</div>
127127
</div>

‎src/markup/patterns/drizzle/partials/sidebar.hbs

+37-32
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,50 @@
22
hidden: true
33
---
44
{{#*inline "nav-item"}}
5-
<a class="drizzle-Nav-item" href="{{@root.baseurl}}/{{url}}">{{label}}</a>
5+
<a class="drizzle-nav__link drizzle-Nav-item" href="{{@root.baseurl}}/{{url}}">{{label}}</a>
66
{{/inline}}
77

8-
<div class="drizzle-Layout-nav drizzle-Nav" id="nav">
9-
<div class="drizzle-Nav-header">
10-
<a href="/" class="drizzle-Nav-title">{{data "global.companyName"}} Design System</a>
8+
<div class="drizzle-Layout-nav drizzle-nav" id="nav">
9+
<div class="drizzle-nav__header">
10+
<p class="drizzle-nav__title"><a href="/" class="x">{{data "global.companyName"}} Design System</a></p>
1111

12-
<a class="drizzle-Nav-header-toggle" href="#nav">
13-
<svg viewBox="-1 -1 12 7" width="16" height="16">
14-
<title>Menu</title>
15-
<polyline fill="none" stroke="currentColor" stroke-width="2" points="0 0 5 5 10 0"/>
16-
</svg>
17-
</a>
18-
</div>
12+
<button class="drizzle-nav__toggle c-expandable-content__button js-toggler" id="nav-content">Menu</button>
1913

20-
<div class="drizzle-Nav-main" id="nav-menu">
21-
<ul class="drizzle-Nav-menu">
22-
<li><a href="/" class="drizzle-Nav-item">Overview</a></li>
23-
</ul>
14+
<!-- <a href="/" class="drizzle-Nav-title">{{data "global.companyName"}} Design System</a>
15+
16+
<!--
17+
This is hidden, because it's not used.
18+
But it's here, because the JS would throw errors if it wasn't. :(
19+
-->
20+
<a class="drizzle-Nav-header-toggle" href="#nav" style="display: none;">a</a>
21+
</div>
2422

25-
<h5 class="drizzle-Nav-item drizzle-u-marginTop">Components</h5>
26-
<ul class="drizzle-Nav-menu">
27-
{{#each (collections "components" sortby="order")}}
28-
<li>
29-
{{> nav-item label=name}}
30-
</li>
31-
{{/each}}
32-
</ul>
23+
<div class="drizzle-nav__content c-expandable-content__content" aria-hidden="false" id="nav-menu" aria-labelledby="nav-content">
3324

34-
<h5 class="drizzle-Nav-item drizzle-u-marginTop">Documentation</h5>
35-
<ul class="drizzle-Nav-menu">
36-
{{#each (pages "documentation" sortby="order")}}
25+
<div>
26+
<h2 class="drizzle-nav__collection-title">Components</h2>
27+
<ul class="drizzle-nav__collection-list drizzle-Nav-menu">
28+
{{#each (collections "components" sortby="order")}}
29+
<li>
30+
{{> nav-item label=name}}
31+
</li>
32+
{{/each}}
33+
</ul>
34+
</div>
35+
36+
<div>
37+
<h2 class="drizzle-nav__collection-title">Documentation</h2>
38+
<ul class="drizzle-nav__collection-list drizzle-Nav-menu">
39+
{{#each (pages "documentation" sortby="order")}}
40+
<li>
41+
{{> nav-item label=data.title}}
42+
</li>
43+
{{/each}}
3744
<li>
38-
{{> nav-item label=data.title}}
45+
{{> nav-item label="SVG Sprite" url="/svg/symbol/sprite.symbol.html"}}
3946
</li>
40-
{{/each}}
41-
<li>
42-
{{> nav-item label="SVG Sprite" url="/svg/symbol/sprite.symbol.html"}}
43-
</li>
44-
</ul>
47+
</ul>
48+
</div>
49+
4550
</div>
4651
</div>

0 commit comments

Comments
 (0)