Bootstrap

TotT 2014

Bootstrap

"... front-end framework for developing responsive, mobile first projects on the web."
- getbootstrap.com

Use Cases

• Responsive design
• Site bootstrapping
• Site design

Major Features

• Basic styles
• Grid layout
• Components
• JavaScript add-ons

Example: Awesome Co.

^* Resize, rearrange, or hide panels to view the responsive output

Example: The Grid

^* Mouse-over the HTML and click the top-right arrow. Resize the browser window to study responsiveness.

Example: Some JavaScript

Opaque?

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>

Better?

<section class="ingredient">
  <div class="ingredient-name"></div>
  <div class="ingredient-amount"></div>
</section>

Semantics are important.

But how can we do it?

Less

"... extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable."
- lesscss.org

Demo: Semantic Bootstrap

bootstrap.less, Less mixins

Demo: Semantic Bootstrap

Review

• Use Cases
• Features
• Components
• Grid
• JS Add-ons
• Less
• Semantics