YAL Style Guide

Built using Bootstrap 3, SASS, Gulp, and other goodies.

More styles

Typography

Headings

.h1 Hero heading

.h2 Section heading

.h3 Component heading

.h4 Sub heading

.h5 Label heading
.h6 Misc heading
Lead

.lead Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.lead-md Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

.lead-sm Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

Content

.content p

Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.

Lists

ul.list-default

ul.list-arrows

ol.list-default

  1. Access to exclusive resources
  2. Join thousands of activists
  3. Earn points for your chapter
  4. Get YAL member gear

ol.list-numbered

  1. Access to exclusive resources
  2. Join thousands of activists
  3. Earn points for your chapter
  4. Get YAL member gear

.split-list

  1. Access to exclusive resources
  2. Join thousands of activists
  3. Earn points for your chapter
  4. Get YAL member gear
Contextual colors
text-light or text-white text-muted text-grey text-black text-primary text-success text-info text-warning text-danger
Labels
.label-default .label-primary .label-secondary .label-success .label-info .label-warning .label-danger
Label modifiers
.label-lg .label-md .label-sm
Badges
.badge 42 .badge-round 42

Wells

Well sizes
well-sm
well text-center
well-lg

Alerts

Alert styles
Alert modifiers

Form Elements

Basic
Fancy Checkboxes
Basic

Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

Checkboxes without label text

Inline checkboxes

Circled

.checkbox-circle for roundness.

Disabled

Disabled state also supported.

Fancy Radios
Basic

Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

Radios without label text

Inline radios

Squared

.radio-square for squareness.

Disabled

Disabled state also supported.

As Checkboxes

Radios can be made to look like checkboxes.

Select2 Dropdowns
Select2 Modifiers
Sliders

Responsive Utilities

Learn more about Bootstrap's responsive utilities here

.visible-xs this is visible only on mobile devices

.visible-sm this is visible only on tablet devices

.visible-md this is visible only on desktop devices

.hidden-md this is hidden only on desktop devices

.visible-lg this is visible only on large desktop devices