Skip to content

Commit f79c79d

Browse files
author
Ethan Muller
committed
feat: consistent grid & spacing example styles
1 parent 6e2fd03 commit f79c79d

File tree

3 files changed

+36
-36
lines changed

3 files changed

+36
-36
lines changed

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

+32-32
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@ layout: drizzle
1212
<p class="drizzle-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 drizzle-grid-example"></div>
15+
<div class="o-grid__full drizzle-example-block"></div>
1616

17-
<div class="o-grid__half drizzle-grid-example"></div>
18-
<div class="o-grid__half drizzle-grid-example"></div>
17+
<div class="o-grid__half drizzle-example-block"></div>
18+
<div class="o-grid__half drizzle-example-block"></div>
1919

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>
20+
<div class="o-grid__third drizzle-example-block"></div>
21+
<div class="o-grid__third drizzle-example-block"></div>
22+
<div class="o-grid__third drizzle-example-block"></div>
2323

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>
24+
<div class="o-grid__quarter drizzle-example-block"></div>
25+
<div class="o-grid__quarter drizzle-example-block"></div>
26+
<div class="o-grid__quarter drizzle-example-block"></div>
27+
<div class="o-grid__quarter drizzle-example-block"></div>
2828

29-
<div class="o-grid__third drizzle-grid-example"></div>
30-
<div class="o-grid__two-third drizzle-grid-example"></div>
29+
<div class="o-grid__third drizzle-example-block"></div>
30+
<div class="o-grid__two-third drizzle-example-block"></div>
3131

32-
<div class="o-grid__quarter drizzle-grid-example"></div>
33-
<div class="o-grid__three-quarter drizzle-grid-example"></div>
32+
<div class="o-grid__quarter drizzle-example-block"></div>
33+
<div class="o-grid__three-quarter drizzle-example-block"></div>
3434
</div>
3535

3636
<pre class="drizzle-u-borderTop drizzle-u-pad">
@@ -99,13 +99,13 @@ layout: drizzle
9999
<p class="drizzle-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 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>
102+
<div class="o-grid__half o-grid__third@sm drizzle-example-block"></div>
103+
<div class="o-grid__half o-grid__third@sm drizzle-example-block"></div>
104+
<div class="o-grid__full o-grid__third@sm drizzle-example-block"></div>
105105

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>
106+
<div class="o-grid__full o-grid__quarter@md drizzle-example-block"></div>
107+
<div class="o-grid__full o-grid__half@md drizzle-example-block"></div>
108+
<div class="o-grid__full o-grid__quarter@md drizzle-example-block"></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 drizzle-grid-example"></div>
132-
<div class="o-grid__11-12 drizzle-grid-example"></div>
131+
<div class="o-grid__1-12 drizzle-example-block"></div>
132+
<div class="o-grid__11-12 drizzle-example-block"></div>
133133

134-
<div class="o-grid__2-12 drizzle-grid-example"></div>
135-
<div class="o-grid__10-12 drizzle-grid-example"></div>
134+
<div class="o-grid__2-12 drizzle-example-block"></div>
135+
<div class="o-grid__10-12 drizzle-example-block"></div>
136136

137-
<div class="o-grid__3-12 drizzle-grid-example"></div>
138-
<div class="o-grid__9-12 drizzle-grid-example"></div>
137+
<div class="o-grid__3-12 drizzle-example-block"></div>
138+
<div class="o-grid__9-12 drizzle-example-block"></div>
139139

140-
<div class="o-grid__4-12 drizzle-grid-example"></div>
141-
<div class="o-grid__8-12 drizzle-grid-example"></div>
140+
<div class="o-grid__4-12 drizzle-example-block"></div>
141+
<div class="o-grid__8-12 drizzle-example-block"></div>
142142

143-
<div class="o-grid__5-12 drizzle-grid-example"></div>
144-
<div class="o-grid__7-12 drizzle-grid-example"></div>
143+
<div class="o-grid__5-12 drizzle-example-block"></div>
144+
<div class="o-grid__7-12 drizzle-example-block"></div>
145145

146-
<div class="o-grid__6-12 drizzle-grid-example"></div>
147-
<div class="o-grid__6-12 drizzle-grid-example"></div>
146+
<div class="o-grid__6-12 drizzle-example-block"></div>
147+
<div class="o-grid__6-12 drizzle-example-block"></div>
148148
</div>
149149

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ layout: drizzle
6464
<p class="drizzle-p">To adjust margin and padding 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 spacing classes:</p>
6565

6666
<div>
67-
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg" style="width: 100%; height: 100px; background: #0065A0;"></div>
68-
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg" style="width: 100%; height: 100px; background: #0065A0;"></div>
69-
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg" style="width: 100%; height: 100px; background: #0065A0;"></div>
67+
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg drizzle-example-block"></div>
68+
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg drizzle-example-block"></div>
69+
<div class="u-margin-bottom-sm u-margin-bottom-md@md u-margin-bottom-lg@lg drizzle-example-block"></div>
7070
</div>
7171

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

‎src/scss/design-system-interface.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ $c-pale: #F5F1F6;
309309
background-color: mix($c-base, $c-pale, 90%) !important;
310310
}
311311

312-
.drizzle-grid-example {
312+
.drizzle-example-block {
313313
height: 100px;
314314
background: $c-base;
315315
box-shadow: inset 0 0 0 2px white;

0 commit comments

Comments
 (0)