Pattern Library

Grid

.full-width
.half-width
.half-width
.one-third-width
.two-thirds-width
.two-thirds-width
.one-third-width
.one-third-width
.one-third-width
.one-third-width
.a-quarter-width
.a-quarter-width
.a-quarter-width
.a-quarter-width 
<div class="row">
	<div class="full-width">
		.full-width
	</div>
</div>

<div class="row">
	<div class="half-width">
		.half-width
	</div>
	<div class="half-width">
		.half-width
	</div>
</div>

<div class="row">
	<div class="one-third-width">
		.one-third-width
	</div>
	<div class="two-thirds-width">
		.two-thirds-width
	</div>
</div>

<div class="row">
	<div class="two-thirds-width">
		.two-thirds-width
	</div>
	<div class="one-third-width">
		.one-third-width
	</div>
</div>

<div class="row">
	<div class="one-third-width">
		.one-third-width
	</div>
	<div class="one-third-width">
		.one-third-width
	</div>
	<div class="one-third-width">
		.one-third-width
	</div>
</div>

<div class="row">
	<div class="a-quarter-width">
		.a-quarter-width
	</div>
	<div class="a-quarter-width">
		.a-quarter-width
	</div>
	<div class="a-quarter-width">
		.a-quarter-width
	</div>
	<div class="a-quarter-width">
		.a-quarter-width
	</div>
</div>
Return to top

Modules

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

Module Title

Module content goes here

<div class="row">
	<div class="module full-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>

<div class="row">
	<div class="module half-width blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module half-width dark-blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>

<div class="row">
	<div class="module one-third-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module two-thirds-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>

<div class="row">
	<div class="module two-thirds-width dark-blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module one-third-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>

<div class="row">
	<div class="module one-third-width blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module one-third-width dark-blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module one-third-width blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>

<div class="row">
	<div class="module a-quarter-width dark-blue">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module a-quarter-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module a-quarter-width blue-var">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
	<div class="module a-quarter-width">
		<header class="block-module-header">
			<h3>Sidebar Module</h3>
		</header>
		<div class="module-body">
			<p>Sidebar Module content</p>
		</div>
	</div>
</div>
Return to top

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Blockquote

Not all those who wander are lost.
J.R.R Tolkien
<blockquote>
	Not all those who wander are lost.
	<footer class="blockquote-footer">
		J.R.R Tolkien
	</footer>
</blockquote>
Return to top

Unordered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ol>
Return to top

Buttons

Button Styles

<p><button class="btn">Default style</button></p>
<p><button class="btn-primary">Primary style</button></p>
<p><button class="btn-blue">Blue style</button></p>
<p><button class="btn-green">Green style</button></p>
<p><button class="btn-orange">Orange style</button></p>
<p><button class="btn-red">Red style</button></p>

Button Sizes

<p>
	<button class="btn-small">Small size</button>
</p>
<p>
	<button class="btn">Default size</button>
</p>
<p>
	<button class="btn-large">Large size</button>
</p>

HTML Elements

Anchor Button 

<p>
	<button class="btn">Button</button>
</p>
<p>
	<a href="" class="btn">Anchor Button</a>
</p>
<p>
	<input type="submit" class="btn" value="Submit input">
</p>
<p>
	<input type="button" class="btn" value="Button input">
</p>
Return to top

Forms

Text inputs

Help text for the text input above

Please provide a password

Error text for the text input above

<div class="row">
	<label class="form-label" for="input-text">Text input label:</label>
	<input type="text" name="input-text" placeholder="Text input">
</div>
<p class="help-msg">Help text for the text input above</p>

<div class="row">
	<label class="form-label" for="password-text">Password label:</label>
	<input type="password" name="password-text" placeholder="Password input">
</div>
<p class="help-msg">Please provide a password</p>

<div class="row">
	<label class="form-label error-label" for="input-error-text">Error text input label:</label>
	<input class="error-field" type="text" name="input-error-text" placeholder="Error text input">
</div>
<p class="error-msg">Error text for the text input above</p>

<div class="row">
	<label class="form-label" for="textarea">Textarea:</label>
	<textarea cols="40" rows="8" name="textarea" placeholder="Type your text here"></textarea>
</div>

Various widths

<div class="row">
	<input class="full-width" type="text" name="input-text" placeholder="Full width Text input">
</div>

<div class="row">
	<input class="two-thirds-width" type="text" name="input-text" placeholder="Two thirds width Text input">
</div>

<div class="row">
	<input class="half-width" type="text" name="input-text" placeholder="Half width Text input">
</div>

<div class="row">
	<input class="one-third-width" type="text" name="input-text" placeholder="One third width Text input">
</div>

<div class="row">
	<input class="a-quarter-width" type="text" name="input-text" placeholder="A quarter width Text input">
</div>

Radio Buttons

<label class="form-label" for="radio-choice-1">
	<input type="radio" name="radio-group" id="radio-choice-1" value="choice-1" />
	Choice 1
</label>
<label class="form-label" for="radio-choice-2">
	<input type="radio" name="radio-group" id="radio-choice-2" value="choice-2" />
	Choice 2
</label>
<label class="form-label" for="radio-choice-3">
	<input type="radio" name="radio-group" id="radio-choice-3" value="choice-3" />
	Choice 3
</label>

Checkboxes

<label class="form-label" for="checkbox-1">
	<input type="checkbox" name="checkbox" id="checkbox-1" value="checkbox-1" />
	Checkbox 1
</label>
<label class="form-label" for="checkbox-2">
	<input type="checkbox" name="checkbox" id="checkbox-2" value="checkbox-2" />
	Checkbox 2
</label>
<label class="form-label" for="checkbox-3">
	<input type="checkbox" name="checkbox" id="checkbox-3" value="checkbox-3" />
	Checkbox 3
</label>

Select Dropdown

<label class="form-label" for="select-choice">Select Dropdown Label:</label>
<select name="select-choice" id="select-choice">
	<option value="Choice 1">Choice 1</option>
	<option value="Choice 2">Choice 2</option>
	<option value="Choice 3">Choice 3</option>
</select>
Return to top

Syntax Highlighting

Yellowblue uses Prism, a lightweight, extensible syntax highlighter, built with modern web standards in mind.

Markup

<div class="row">
	<div class="full-width">
		.full-width
	</div>
</div>
<div class="row">
	<div class="half-width">
		.half-width
	</div>
	<div class="half-width">
		.half-width
	</div>
</div>

CSS

body {
	background-color: blue;
	color: yellow;
}

p {
	font-size: 1em;
	margin: 1em .5em;
}

Javascript

var foo = "bar", baz = 5;

if (true) {
	while (true) {
		doSomething();
	}
}
Return to top

Icons

Yellowblue uses IcoMoon, a collection of free and quality icons. The icons come as SVG sprites.

  • SVG means vector based shapes, which do not lose quality no matter how large they are. Oh, and they look great on retina screens.
  • Sprites means that the icons are all squished inside a single file. This file is included in the html file, which means no extra http requests.

Sizes

Default

Large

Larger 

<p>
	<div class="svg-container">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Default
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Large
</p>
<p>
	<div class="svg-container-larger">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Larger
</p>

Bordered Icons

Squared

Rounded

Circled

Squared

Rounded

Circled

Squared

Rounded

Circled 

<p>
	<div class="svg-container bordered">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Squared
</p>
<p>
	<div class="svg-container rounded">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Rounded
</p>
<p>
	<div class="svg-container circled">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Circled
</p>
<p>
	<div class="svg-container-large bordered">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Squared
</p>
<p>
	<div class="svg-container-large rounded">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Rounded
</p>
<p>
	<div class="svg-container-large circled">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Circled
</p>
<p>
	<div class="svg-container-larger bordered">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Squared
</p>
<p>
	<div class="svg-container-larger rounded">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Rounded
</p>
<p>
	<div class="svg-container-larger circled">
		<svg class="icon icon-html52" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Circled
</p>

Colored Icons

Blue

Light Blue

Green

Orange

Red

Gray 

<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-blue" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Blue
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-light-blue" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Light Blue
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-green" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Green
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-orange" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Orange
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-red" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Red
</p>
<p>
	<div class="svg-container-large">
		<svg class="icon icon-html52 icon-gray" viewBox="0 0 32 32">
			<use xlink:href="#icon-html52"></use>
		</svg>
	</div> Gray	
</p>
Return to top

Notifications

Information

I would like to inform you that information text goes here.

<div class="alert-info">
	<div class="line1"></div>
	<div class="line2"></div>
	<h3>Information</h3>
	<p>I would like to inform you that information text goes here.</p>
</div>

Success

You have successfully acknowledged that success text goes here.

<div class="alert-success">
	<div class="line1"></div>
	<div class="line2"></div>
	<h3>Success</h3>
	<p>You have successfully acknowledged that success text goes here.</p>
</div>

Warning

Warning: Warning text may not not go here.

<div class="alert-warning">
	<div class="line1"></div>
	<div class="line2"></div>
	<h3>Warning</h3>
	<p>Warning: Warning text may not <span class="bold">not</span> go here.</p>
</div>

Error

Error! Error text does definitely not not go here!

<div class="alert-error">
	<div class="line1"></div>
	<div class="line2"></div>
	<h3>Error</h3>
	<p>Error! Error text does definitely not <span class="bold">not</span> go here!</p>
</div>
Return to top

Tables

I really like the tables from Pure CSS, so the basic styling for tables is taken from there.

Default Table

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Bordered Table

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Table with Horizontal Borders

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Striped Table

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010 
<div class="row">
	<div class="half-width" >
		<h3>Default Table</h3>
		<div class="table-container">
			<table class="pure-table full-width">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>

	<div class="half-width">
		<h3>Bordered Table</h3>
		<div class="table-container">
			<table class="pure-table pure-table-bordered full-width">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>
</div>

<div class="row">
	<div class="half-width">
		<h3>Table with Horizontal Borders</h3>
		<div class="table-container">
			<table class="pure-table pure-table-horizontal full-width">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>

	<div class="half-width">
		<h3>Striped Table</h3>
		<div class="table-container">
			<table class="pure-table pure-table-striped full-width">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>
</div>

Default Table (Yellow Variation)

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Bordered Table (Blue Variation)

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Table with Horizontal Borders (Light Blue Variation)

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Striped Table (Blue Variation)

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010 
<div class="row">
	<div class="half-width">
		<h3>Default Table (Yellow Variation)</h3>
		<div class="table-container">
			<table class="pure-table full-width yellow-var">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>

	<div class="half-width">
		<h3>Bordered Table (Blue Variation)</h3>
		<div class="table-container">
			<table class="pure-table pure-table-bordered full-width blue-var">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>
</div>

<div class="row">
	<div class="half-width">
		<h3>Table with Horizontal Borders (Light Blue Variation)</h3>
		<div class="table-container">
			<table class="pure-table pure-table-horizontal full-width light-blue-var">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>

	<div class="half-width">
		<h3>Striped Table (Blue Variation)</h3>
		<div class="table-container">
			<table class="pure-table pure-table-striped full-width blue-var">
			    <thead>
			        <tr>
			            <th>#</th>
			            <th>Make</th>
			            <th>Model</th>
			            <th>Year</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			            <td>1</td>
			            <td>Honda</td>
			            <td>Accord</td>
			            <td>2009</td>
			        </tr>
			        <tr>
			            <td>2</td>
			            <td>Toyota</td>
			            <td>Camry</td>
			            <td>2012</td>
			        </tr>
			        <tr>
			            <td>3</td>
			            <td>Hyundai</td>
			            <td>Elantra</td>
			            <td>2010</td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>
</div>
Return to top