Styleguide

Modules

Reusable elements that can be used across the site. So far this just includes buttons.

1.1 Buttons

A majority of buttons in the site are built from the same base class.

  • .primary -

    Indicate that the button is the primary feature of this form.

  • .remove -

    Indicate that the button will remove a feature, or other negative connotations.

  • :hover -

    Highlight the button when hovered.

  • :disabled -

    Make the button change appearance to reflect it being disabled.

  • :active -

    "Press" the button down when clicked.

Link Button
.primary Link Button
.remove Link Button
:hover Link Button
:disabled Link Button
:active Link Button
<a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>
<input type="button" class="button {$modifiers}" value="input[type='button']"/>