styledown-skins

Introduction

This is an example styleguide demonstrating the Default skin from styledown-skins. The components and associated documentation are borrowed from the Pure Framework.

Buttons

Default Buttons

To create a Pure Button, add the pure-buttonclassname to any <a>or <button>element.

A Pure Button

<a href="#" class="pure-button">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Disabled Buttons

To mark a button as disabled, add the pure-button-disabledclassname alongside pure-button.

A Disabled Button

<a href="#" class="pure-button pure-button-disabled">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>

Primary Buttons

To indicate that a button represents a primary action, add the pure-button-primaryclassname alongside pure-button.

A Primary Button

<a href="#" class="pure-button pure-button-primary">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>

Tables

Default Table

To style an HTML table, add the pure-tableclassname. This class adds padding and borders to table elements, and emphasizes the header.

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

<table class="pure-table">
  <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>