Primary font:
Primary font italic:
Primary font bold:
Secondary font:
Secondary font italic:
Secondary font bold:
<div class="sg-fonts">
<p>Primary font: <span></span></p>
<p><em>Primary font italic: <span></span></em></p>
<p><strong>Primary font bold: <span></strong></p>
<p class="font-secondary">Secondary font: <span></span></p>
<p class="font-secondary"><em>Secondary font italic: <span></span></em></p>
<p class="font-secondary"><strong>Secondary font bold: <span></span></strong></p>
</div>
Body Copy
Larger Copy
Smaller Copy
<div class="content-block">
<p>Body Copy</p>
<p class="font-size-large">Larger Copy</p>
<p class="font-size-small">Smaller Copy</p>
</div>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p>Default Color</p>
<p><a href="#">This is a text link</a></p>
<p><a class="link-alternate" href="#">This is an alternate text color</a></p>
<p class="subtle">Subtle text</p>
Subtle text is a little lighter
Strong is used to indicate strong importance
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variarble element, such as x = y
<p class="subtle">Subtle text is a little lighter</p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p class="strong">Strong is used to indicate strong importance</p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis. Praesent et nibh magna. Donec aliquet erat at lorem feugiat eget tempor magna vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis. Praesent et nibh magna. Donec aliquet erat at lorem feugiat eget tempor magna vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.
<div class="content-block">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis. Praesent et nibh magna. Donec aliquet erat at lorem feugiat eget tempor magna vehicula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis. Praesent et nibh magna. Donec aliquet erat at lorem feugiat eget tempor magna vehicula.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at leo non orci congue venenatis.</p>
</div>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
<ol>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>Lists can be nested inside of each other
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>
<ul class="list-unstyled">
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
<ul class="list-inline">
<li>This is an inline list</li>
<li>Items show up next to eachother</li>
<li>This is the last item</li>
</ul>
dl.<dl>
<dt>Definition List</dt>
<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
<dt>This is a term.</dt>
<dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
<dt>Here is another term.</dt>
<dd>And it gets a definition too, which is this line.</dd>
<dt>Here is term that shares a definition with the term below.</dt>
<dd>And it gets a definition too, which is this line.</dd>
</dl>
<div class="spacing-small">Small Spacing</div>
<div>Small Spacing</div>
<div class="spacing-medium">Medium Spacing</div>
<div>Medium Spacing</div>
<div class="spacing-large">Large Spacing</div>
<div>Large Spacing</div>
<div class="spacing-xlarge">Extra Large Spacing</div>
<div>Extra Large Spacing</div>
This element will auto clear
After Element
<div class="clearfix">
<p>This element will auto clear</p>
<div class="pull-left">Float Left<br/>line two</div>
<div class="pull-right">Float Right</div>
</div>
<p>After Element</p>
<div class="sg-responsive">
<div>
<h3>Visible</h3>
<div>
<span class="show-tiny">Visible on Tiny</span>
<span class="hide-tiny">Tiny</span>
</div>
<div>
<span class="show-small">Visible on Small</span>
<span class="hide-small">Small</span>
</div>
<div>
<span class="show-medium">Visible on Medium</span>
<span class="hide-medium">Medium</span>
</div>
<div>
<span class="show-large">Visible on Large</span>
<span class="hide-large">Large</span>
</div>
</div>
<div>
<h3>Hidden</h3>
<div>
<span class="show-tiny">Tiny</span>
<span class="hide-tiny">Hidden on Tiny</span>
</div>
<div>
<span class="show-small">Small</span>
<span class="hide-small">Hidden on Small</span>
</div>
<div>
<span class="show-medium">Medium</span>
<span class="hide-medium">Hidden on Medium</span>
</div>
<div>
<span class="show-large">Large</span>
<span class="hide-large">Hidden on Large</span>
</div>
</div>
</div>
You turn grid columns into stacked, by adding a grid-stacked-{size} class to the grid element. For example, if you have grid-stacked-tiny and the width of the page is less than @screen-tiny-max, it will collapse.
<div class="grid">
<h2>Grid</h2>
<p>You turn grid columns into stacked, by adding a grid-stacked-{size} class to the grid element. For example, if you have grid-stacked-tiny and the width of the page is less than @screen-tiny-max, it will collapse.</p>
<h3>Stacked Tiny</h3>
<div class="grid12 grid-stacked-tiny">
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
</div>
<h3>Stacked Small</h3>
<div class="grid12 grid-stacked-small">
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
</div>
<h3>Stacked Medium</h3>
<div class="grid12 grid-stacked-medium">
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
</div>
<h3>Stacked Tiny and Small</h3>
<div class="grid12 grid-stacked-tiny grid-stacked-small">
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
<div class="column4"><div class="name">4</div></div>
</div>
</div>
<form class="form">
<fieldset>
<h2>Section 1 Header</h2>
<p>Copy for Section</p>
<div>
<label for="text" class="form--label">Some text</label>
<input type="text" id="text" class="form--input" value="Lorem ipsum"/>
</div>
<div class="form--error">
<label for="error" class="form--label form--required">Error</label>
<input type="text" id="error" class="form--input" value="Lorem ipsum"/>
<small class="form--description">Please enter some correct text</small>
</div>
<div>
<label for="password" class="form--label form--required">Password</label>
<input type="password" id="password" class="form--input" placeholder="password"/>
</div>
<div>
<label for="email" class="form--label">Email</label>
<input type="email" id="email" class="form--input" value="email@localhost"/>
</div>
<div>
<label for="search" class="form--label">Search</label>
<input type="search" id="search" class="form--input" placeholder="Search"/>
</div>
<div>
<label for="clear" class="form--label">Clear</label>
<input type="text" id="clear" class="form--input" placeholder="Value cleared" value="Clear"/>
<button class="form--clear">×</button>
</div>
</fieldset>
<fieldset>
<h2>Section 2 Header</h2>
<div>
<label for="url" class="form--label">Url</label>
<input type="url" id="url" class="form--input" placeholder="Website"/>
<small class="form--description">Your website</small>
</div>
<div>
<label for="phone" class="form--label">Phone</label>
<input type="tel" id="phone" class="form--input" placeholder="+1 (555) 555-5555"/>
</div>
<div>
<label for="count" class="form--label">Count</label>
<input type="number" id="count" class="form--input" placeholder="How many?"/>
</div>
<div>
<label for="range" class="form--label">Percent Done</label>
<input type="range" id="range" class="form--input"/>
</div>
<div>
<label for="date" class="form--label">Birthday</label>
<input type="date" id="date" class="form--input"/>
</div>
<div>
<label for="month" class="form--label">Expires</label>
<input type="month" id="month" class="form--input"/>
</div>
<div>
<label for="week" class="form--label">Week off</label>
<input type="week" id="week" class="form--input"/>
</div>
<div>
<label for="time" class="form--label">Alarm Time</label>
<input type="time" id="time" class="form--input"/>
</div>
<div>
<label for="color" class="form--label">Favorite Color</label>
<input type="color" id="color" class="form--input"/>
</div>
<div>
<label for="bio" class="form--label">Bio</label>
<textarea id="bio" class="form--input"></textarea>
<small class="form--description">Description please</small>
</div>
</fieldset>
</form>
<form class="form form--large">
<fieldset>
<h2>Large Form</h2>
<p>These inputs are massive</p>
<div>
<label for="larger" class="form--label">Large input</label>
<input type="text" id="larger" class="form--input" value="Somewhat Bigger"/>
<small class="form--description">Put some text up there</small>
</div>
</fieldset>
</form>
<form class="form">
<fieldset>
<p class="heading2">Section 1 Header</p>
<p>Copy for Section</p>
<div>
<input id="radio1" type="radio" name="radio"/>
<label for="radio1">Radio</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="radio2" type="radio" name="radio"/>
<label for="radio2">Radio</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="radio1" type="radio" name="radio" class="form--large"/>
<label for="radio1" class="form--large">Radio</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="radio2" type="radio" name="radio" class="form--large"/>
<label for="radio2" class="form--large">Radio</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="cbx" type="checkbox"/>
<label for="cbx">This is a checkbox</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="cbx" type="checkbox"/>
<label for="cbx">This is a checkbox</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="cbx" type="checkbox" class="form--large"/>
<label for="cbx" class="form--large">This is a checkbox</label>
<small class="form--description">Description please</small>
</div>
<div>
<input id="cbx" type="checkbox" class="form--large"/>
<label for="cbx" class="form--large">This is a checkbox</label>
<small class="form--description">Description please</small>
</div>
<div>
<label for="multiple" class="form--label">Multiple</label>
<select id="multiple" class="form--input" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<small class="form--description">Description please</small>
</div>
<div>
<label for="dropdown" class="form--label">Dropdown</label>
<select id="dropdown" class="form--dropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<small class="form--description">Description please</small>
</div>
</fieldset>
</form><div class="spinner"></div>
<button class="button"><span class="spinner spinner--small"></span> Loading...</button>
// adapted from http://jsfiddle.net/csswizardry/M2D4M/
.spinner {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
font-size: 32px;
border-bottom: 1px solid;
vertical-align: middle;
overflow: hidden;
text-indent: 100%;
animation: 0.5s spinner linear infinite;
&,
&:after {
border-radius: 100%;
}
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
opacity: 0.5;
}
&--small {
font-size: 16px;
}
&--large {
font-size: 64px;
}
&--light {
color: #fff;
}
&--dark {
color: #333;
}
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}