Pattern Library

Grid

.full-width
.half-width
.half-width
.two-thirds-width
.two-thirds-width
.a-quarter-width
.a-quarter-width
.a-quarter-width
.a-quarter-width

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


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Blockquote

Not all those who wander are lost.
J.R.R Tolkien

Unordered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Buttons


Forms

Text inputs

Help text for the text input above

Please provide a password

Error text for the text input above

Various widths


Syntax Highlighting

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


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.

Notifications

Information

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

Success

You have successfully acknowledged that success text goes here.

Warning

Warning: Warning text may not not go here.

Error

Error! Error text does definitely not not go here!


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

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