Buttons

Buttons can be styled using a combinations of mixins and extends. Instead of using Bootstrap's button markup (class="btn-large"), use Equip's built-in overrides.

Mixins

Mixins (+button, +button-big, +button-mini) are used to select the appropriate button size. They each provide a customised version of the Bootstrap's buttons.

#big-button
  +button-big

Extends & Classes

You may use the button class provided by Bootstrap or extend the classes in your own SASS selectors.

Semantic classnames in your HTML:

<a href="#" class="btn btn-primary">Primary Button</a>
<input type="submit" class="btn btn-danger" value="Delete" />

The @extend method allows us to import Bootstrap's styles in our own CSS selectors.

Available styles:

• .btn-primary
• .btn-warning
• .btn-danger
• .btn-success
• .btn-info
• .btn-inverse

For example:

#button
  +button
  @extend .btn-primary
#big-button
  +button-big
  @extend .btn-info
#mini-button
  +button-mini
  @extend .btn-warning