Styleguide

Generated at Thu Feb 19 2015 08:11:14 GMT+0100 (CET)

Buttons

Square buttonsToggle source

Very pretty square buttons

Typography

ParagraphsToggle source

Very pretty paragraphs

body {
  font: 16px Verdana;
}

/***
  title: Square buttons
  section: Buttons
  description: Very pretty square buttons
  example:
    <a href="" class="btn btn-small">button</a>
    <a href="" class="btn btn-medium">button</a>
    <a href="" class="btn btn-large">button</a>
***/

.btn{
  display: inline-block;
  padding: .3em .6em;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background-color: darkslateblue;
}
.btn:hover{
  background-color: #38306E;
}
.btn-small{
  font-size: .8em;
}
.btn-medium{
  font-size: 1em;
}
.btn-large{
  font-size: 1.3em;
}

/***
  title: Round buttons
  section: Buttons
  description: Very pretty rounded buttons
  example:
    <a href="" class="btn btn-small btn-round">button</a>
    <a href="" class="btn btn-medium btn-round">button</a>
    <a href="" class="btn btn-large btn-round">button</a>
***/

.btn-round{
  border-radius: 20px;
}

/***
  title: Links
  section: Buttons
  description: Very pretty rounded buttons
  example:
    <a href="" class="btn-link">button</a>
***/

.btn-link{
  background: none;
  color: darkslateblue;
}
.btn-link:hover{
  text-decoration: none;
}

/***
  title: Headings
  section: Typography
  description: Very pretty headings
  example:
    <h1 class="title-large">Heading</h1>
    <h1 class="title-medium">Heading</h1>
    <h1 class="title-small">Heading</h1>
***/

h1, h2, h3, h4, h5{
  margin: 0 0 .5em 0;
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
}
.title-large{
  font-size: 1.8em;
}
.title-medium{
  font-size: 1.4em;
}
.title-small{
  font-size: 1.1em;
}

/***
  title: Paragraphs
  section: Typography
  description: Very pretty paragraphs
  example:
    <p class="p-large">Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best. So, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon. Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.</p>
    <p class="p-medium">Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.</p>
    <p class="p-small">There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
***/

.p-large{
  font-size: 1.1em;
  line-height: 1.3;
}

.p-medium{
  font-size: .9em;
  line-height: 1.5;
}

.p-small{
  font-size: .6em;
  line-height: 1.5;
}

Styleguide

Buttons

LinksToggle source

Round buttonsToggle source

Square buttonsToggle source

Typography

HeadingsToggle source

ParagraphsToggle source