Styleguide
  • Overview
  • 1.0 Page Structure
  • 2.0 Colors
  • 3.0 Typography
  • 4.0 Links
  • 5.0 Buttons
  • 6.0 Forms
  • 7.0 Tables
  • 8.0 Dialogs
  • 9.0 Graphic Elements
  • 10.0 Navigation
  • 11.0 Modules

5.0 — Buttons

5.1 — Form Buttons

Buttons suitable for form actions.

5.1.1 _button.scss

Your standard form button.

  • :hover - Highlights when hovering.
  • :disabled - Dims the button when disabled.
  • .primary - Indicates button is the primary action.
  • .smaller - A smaller button
:hover
:disabled
.primary
.smaller

This block above was created with a simple template call:

<% styleguide_block '5.1.1' do %>
  <button class="$modifier_class">Default Button</button>
<% end %>

Take a look at the source code to this Sinatra app for more details. The goal is to remove the pain from creating a styleguide — document your CSS, have example HTML in your templates and automate as much as possible.

5.2 — Other Buttons

© 2011-2012 Stephen Tudor.