Buttons

Buttons come in a couple of different flavors. The m-button-* mixins allow you to create buttons based on HTML button elements (+m-button), buttons based on HTML anchor tags (+m-button-a), and buttons based on HTML input elements (+m-button-input).

+m-button Simple Button
+m-button-a Anchor Button
+m-button-input(type="submit" value="Submit Button")

If you need buttons for a specific purpose, then there are modifier classes for those specific situations. Again, all these modifier classes have a m-* prefix.

+m-button.m-primary Primary
+m-button.m-warning Warning
+m-button.m-success Success
+m-button.m-info Info
+m-button.m-danger Danger

Layout

In order to generate a title, using either one of the +m-title-* mixins. Use the +m-container mixin to have the library provided container — although that might make sense only in cases where you intend to use the libraries' grid, which is not something promoted.

+m-container
  +m-title-1 Title 1
  +m-title-2 Title 2
  +m-title-3 Title 3
  +m-title-4 Title 4
  +m-title-5 Title 5
  +m-title-6 Title 6

Forms

There are currently four different form-based mixins. All of them accept an additional attribute called m-label, which is the label that should be associated to the component.

form
  +m-input#name(m-label="Name" type="text")
  +m-input#password(m-label="Password" type="password" placeholder="Password")
  +m-textarea#message(m-label="Message")
  +m-select(m-label="Subject")
    option Select dropdown
    option With options
  +m-checkbox#agreed(m-label="I agree")