Pre-requisites

Bootstrap 101

Using the Grid:

• • Every page uses a container that holds rows and columns
  • Bootstrap uses a 12-column layout per row (by default)
  • Each element uses a specific class to pull in native Bootstrap styling
    (example class names: .container, .row, .col-md-4)
  • References: Bootstrap 3 Site & Bootstrap Tutorial

Native Components:

• • Bootstrap styles native components using specific class names
    (.nav, .navbar, .carousel, .jumbotron, .tabs, .accordions, etc.)
  • SCORE default components inherit Bootstrap's native component styles
  • Bootstrap.js included in project scaffolding for use with components that require JavaScript
    (Carousel, tabs, accordions, navigation)
  • References: Bootstrap 3 Components  & Javascript Components

SCORE Component Docs

• • Parent Page for Bootstrap UI Components
      > Containers
      > Content
      > Navigation
  • Includes example screenshot and HTML output

LESS Basics:

• • CSS pre-processor - compiles into CSS. All valid CSS is valid LESS
  • Allows nesting, which is wonderful - most of the time!
  • Try to keep nesting no more than 4 levels deep

LESS Variables:

• • Declared locally or globally and prefixed with @
  • Can be a color, font, another variable, etc.
  • Code is easily maintained - changing the value of the variable will change all occurrences
  • Bootstrap includes native variables for colors, fonts, and common mobile breakpoints

LESS Mixins:

• • Create easily reusable and maintainable blocks of code
  • Commonly used for styles that require browser prefixes
  • Can accept parameters to use different values in different locations
    
    

List of popular compilers