Styleguide
  • Home
  • Buttons

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  '1.1' do %>
  <button class="$modifier_class">Example 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.