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
- Bootstrap styles native components using specific class names
SCORE Component Docs
- Parent Page for Bootstrap UI Components
> Containers
> Content
> Navigation - Includes example screenshot and HTML output
- Parent Page for Bootstrap UI Components
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