Inputs

Input styles are included in the default form styles:

%input.form-control{value: 'Test text'}

You can also add icons to inputs:

.input-overlay
  %input.form-control{placeholder: 'Search…'}
  .input-overlay__addon= icon 'search'

Dropdowns

Dropdown styles are included in the default form styles:

Option 1 Option 2 Option 3 Option 4

%select.form-control.form-control--dropdown
  %option Option 1
  %option Option 2
  %option Option 3
  %option Option 4

Form Groups & labels

Form elements and their labels can be grouped together:

.form-group
  = label_tag 'message[email]', "Email", class: 'form-label form-label--required'
  = text_field_tag 'message[email]', nil, class: 'form-control', required: true

.form-group
  = label_tag 'message[subject]', "Subject", class: 'form-label form-label--required'
  = text_field_tag 'message[subject]', nil, class: 'form-control', required: true

Buttons

Button styles are not included by default. To add button files to your app scss file, please inlcude the following BEM block:

@import "bem-blocks/buttons"

To create a button, simply add the button CSS class to an element:

Button

%button.button Button

This class can be applied to any element, not just HTML button elements. You can also use it on anchors (links) for example.

The modifier class button--medium gives a slightly darker background -- good for use over gray page backgrounds.

Medium button

%button.button.button--medium Medium button

The modifier class button--blue gives the button light text on a blue background:

Blue button

%button.button.button--blue Blue button

The modifier class button--red gives the button light text on a red background:

Red button

%button.button.button--red Red button

The modifier class button--dark gives the button light text on a dark background:

Dark button

%button.button.button--dark Dark button

The modifier class button--wide makes the button a block-level element:

Wide button

%button.button.button--wide Wide button

Combo (dropdown with input)

A combo jQuery UI widget is available and can be applied to standard select boxes:

Please select a language JavaScript PHP Ruby

%select.form-control.form-control--dropdown#combo
  %option{value: ''} Please select a language
  %option{value: 'JavaScript'} JavaScript
  %option{value: 'PHP'} PHP
  %option{value: 'Ruby'} Ruby

$('#combo').combo({
  source: [
    'ActionScript', 'AppleScript', 'Asp', 'BASIC',
    'C', 'C++', 'Clojure', 'COBOL', 'ColdFusion',
    'Erlang', 'Fortran', 'Groovy', 'Haskell',
    'Java', 'JavaScript', 'Lisp',
    'Perl', 'PHP', 'Python', 'Ruby',
    'Scala', 'Scheme'
  ]
});

Please be sure to include the 'lib/widgets/combo' AMD dependency in your JavaScript when you want to use the combo widget, and the 'blocks/combo' dependency in your Sass.