demo stylus

buttons.styl

/*
# Core/Buttons

Basic definitions of how use the grid and its containers

.button   - Main container

Markup:
<button class="button {{modifier_class}}">
  Button
</button>
<button class="button {{modifier_class}}" disabled="disabled">
  Disabled
</button>

## Layout Modifiers
.is-primary - Main actions (submit, buy, activate)
.is-danger  - Main actions, destructive (delete, leave, clear)
.is-info    - Navigation actions (open modal, show tooltip)
...


## Size Modifiers

.is-small  - Small size
.is-medium - Regular size
.is-large  - Large size

*/

.button
  align-items center
  background $color__gray--dark
  border 1px solid transparent
  border-radius ($baseline / 8)
  white-space nowrap
  // ETC ...
    

  &:hover
    background $color__gray--darker

  &:active
    background $color__gray--darkest

  &[disabled]
    background none

  +tablet()
    line-height 2.5rem
  
  +desktop()
    line-height 2rem
    
  &.is-primary
    background $color__white
    color $color__gray--dark
    // ETC ...

    

index.styl

/*
Core

Here you'll find the list of all elements available in the project.

Styleguide: Elements
*/

@import 'buttons'
@import 'label'

label.styl

/*
# Core/labels

Basic definitions of how use the grid and its containers

.label   - Main container

Markup:
<label class="label {{modifier_class}}">
  label
</label>
<label class="label {{modifier_class}}" disabled="disabled">
  Disabled
</label>

## Layout Modifiers
.is-primary - Main actions (submit, buy, activate)
.is-danger  - Main actions, destructive (delete, leave, clear)
.is-info    - Navigation actions (open modal, show tooltip)
...


## Size Modifiers

.is-small  - Small size
.is-medium - Regular size
.is-large  - Large size

*/

.label
  align-items center
  background $color__gray--dark
  border 1px solid transparent
  border-radius ($baseline / 8)
  white-space nowrap
  // ETC ...
    

  &:hover
    background $color__gray--darker

  &:active
    background $color__gray--darkest

  &[disabled]
    background none

  +tablet()
    line-height 2.5rem
  
  +desktop()
    line-height 2rem
    
  &.is-primary
    background $color__white
    color $color__gray--dark
    // ETC ...