Styleguide Template

Boilerplate for creating components based style guides using Jekyll. Here is the Github repository for it, should you want to have a peek at the code, fork it or report an issue.

Buttons

Sass file: /_scss/components/buttons.scss

Button text 
<a href="fake.html" class="button">Button text</a>
<button class="button">Button text</button>
<input type="button" class="button" value="Button text">

Button group

Sass file: /_scss/components/buttons.scss

Button text 
<div class="button-group  clearfix">
  <a href="fake.html" class="button">Button text</a>
  <button class="button">Button text</button>
  <input type="button" class="button" value="Button text">
</div>

button sizes

Sass file: /_scss/components/buttons.scss

Button text 
<a href="fake.html" class="button  button--large">Button text</a>
<button class="button  button--small">Button text</button>

Headings

Sass file: /_scss/base/typography.scss

This is a level one heading

This is a level two heading

This is a level three heading

This is a level four heading

This is a level five heading
This is a level six heading
<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>

Texts

Sass file: /_scss/base/typography.scss

Level one title

Large text (21px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

Level two title

Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • list item
  • list item
  • list item

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. list item
  2. list item
  3. list item

Small text (14px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h1>Level one title</h1>
<div class="text-big">
  <p>Large text (21px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.</p>
</div>
<h2>Level two title</h2>
<p>Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ol>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>
<p class="text-small">Small text (14px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>