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
Copy file name to clipboardExpand all lines: src/markup/pages/documentation/grid.hbs
+8-8
Original file line number
Diff line number
Diff line change
@@ -3,13 +3,13 @@ title: Grid
3
3
layout: drizzle
4
4
---
5
5
6
-
<h1>{{title}}</h1>
6
+
<h1class="drizzle-heading-1">{{title}}</h1>
7
7
8
-
<p>The grid system we are using for page layouts is based on a 12 column grid with 20px gutters between each column. Grid classes can be nested if needed for more complex layouts.</p>
8
+
<pclass="drizzle-p">The grid system we are using for page layouts is based on a 12 column grid with 20px gutters between each column. Grid classes can be nested if needed for more complex layouts.</p>
9
9
10
-
<h2>Simple Grid</h2>
10
+
<h2class="drizzle-heading-2">Simple Grid</h2>
11
11
12
-
<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>
12
+
<pclass="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>
<p>To adjust a the width of a column at different breakpoints you can add <codeclass="language-css">@sm</code>, <codeclass="language-css">@md</code>, <codeclass="language-css">@lg</code>, <codeclass="language-css">@xl</code> after any of the grid classes:</p>
99
+
<pclass="drizzle-p">To adjust a the width of a column at different breakpoints you can add <codeclass="language-css">@sm</code>, <codeclass="language-css">@md</code>, <codeclass="language-css">@lg</code>, <codeclass="language-css">@xl</code> after any of the grid classes:</p>
<p>In addition to the simple grid system there is an extended grid system that allows for any combination of a 12 column grid system. The extended grid system can also be used responsively in the same way that as the gimple grid system.</p>
127
+
<pclass="drizzle-p">In addition to the simple grid system there is an extended grid system that allows for any combination of a 12 column grid system. The extended grid system can also be used responsively in the same way that as the gimple grid system.</p>
<p>By default, text will touch the edge of the browser, like this.</p>
11
+
<pclass="drizzle-p">By default, text will touch the edge of the browser, like this.</p>
12
12
</div>
13
13
14
14
<divclass="o-width-limiter u-margin-bottom-xxl">
15
15
16
-
<p>The <code>o-width-limiter</code> object has two primary functions:</p>
16
+
<pclass="drizzle-p">The <code>o-width-limiter</code> object has two primary functions:</p>
17
17
18
18
<ol>
19
-
<li><strong>Apply horizontal padding to create a page margin.</strong> When the screen is small, this prevents text from touching the edge of the browser.</li>
20
-
<li><strong>Apply a max-width, and center the element when the max width is reached.</strong> When the screen is large, this element will be horizontally centered within its parent. This often means the element is centered within the whole page.</li>
19
+
<liclass="drizzle-p"><strong>Apply horizontal padding to create a page margin.</strong> When the screen is small, this prevents text from touching the edge of the browser.</li>
20
+
<liclass="drizzle-p"><strong>Apply a max-width, and center the element when the max width is reached.</strong> When the screen is large, this element will be horizontally centered within its parent. This often means the element is centered within the whole page.</li>
<p>If you want to use a <code>o-width-limiter</code> but don't want the included page margin, add an additional <code>o-width-limiter--no-page-margin</code> modifier class.</p>
26
+
<pclass="drizzle-p">If you want to use a <code>o-width-limiter</code> but don't want the included page margin, add an additional <code>o-width-limiter--no-page-margin</code> modifier class.</p>
<p>To adjust margin and padding at different breakpoints you can add <codeclass="language-css">@sm</code>, <codeclass="language-css">@md</code>, <codeclass="language-css">@lg</code>, <codeclass="language-css">@xl</code> after any of the spacing classes:</p>
<pclass="drizzle-p">To adjust margin and padding at different breakpoints you can add <codeclass="language-css">@sm</code>, <codeclass="language-css">@md</code>, <codeclass="language-css">@lg</code>, <codeclass="language-css">@xl</code> after any of the spacing classes:</p>
0 commit comments