Usage

In your Terminal:

bower install ssh://git@github.com/doches/shownotes-theme.git --save

In your less:

@import "../../bower_components/shownotes-theme/src/less/variables.less";

body {
  font-family: @text-family;
  padding: @grid-size;

  // and so on...
}

Develop using Gulp:

  npm install
  gulp dev

  // hackhackhack

Colours

Colours are exported as LESS variables; use 'em as you would hex codes. Example:

h1 {
  color: @red2;
}

Form Elements

Buttons

Apply the sn-button class to your buttons or links for shared button styling, plus an optional intent class for custom colours.

<button class="sn-button sn-intent-success">Submit</button>

Default

Default Info Success Warning Danger

Disabled

Default Info Success Warning Danger

Small

Add class="sn-button-small" for slightly smaller buttons.

Default Info Success Warning Danger

Input

Apply the sn-form class to your form, then nest everything inside sn-form-row to keep everything on a common baseline.

<form class="sn-form">
  <div class="sn-form-row">
    <label>
      Normal
      <input type="text" class="sn-input" placeholder="Placeholder" />
      <button class='sn-button sn-intent-success'>Submit</button>
    </label>
  </div>
</form>

Normal Submit

Small Submit

Typography

Normal text

Nunc eget velit commodo, porta metus non, molestie ligula. Nullam enim nisi, lobortis sit amet odio id, sollicitudin hendrerit sapien.

Large text

Use the text-large class to get clean, large copy. In leo purus, consequat eget faucibus id, congue at velit.

Small text

Similarly, use text-small for the fine print.

In nec magna a felis iaculis suscipit quis eget massa. Aenean semper lectus eu risus auctor vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non ultrices justo. Maecenas dui justo, posuere ut volutpat et, luctus non turpis. Nulla augue odio, porttitor sed ipsum non, eleifend ultricies tellus. Fusce facilisis est in ex mattis tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ut ante vehicula, viverra nunc et, facilisis ipsum. Duis malesuada est vitae venenatis egestas. Maecenas in scelerisque nunc, luctus tempor mi. Sed urna ligula, efficitur ac iaculis id, hendrerit sed orci.