Twitter Bootstrap

Responsive, mobile-first framework

What you need today:

• Directions: https://gist.github.com/ebigalee/
• Browser - Chrome or Firefox today please
• Text Editor
  • ​TextWrangler (free), or
  • SublimeText2 or 3 (free trial)

It's all about the phones.

Got Bootstrap?

• Provides all the basics
  Translation: "Quick start"
   
• Popular 
  Translation: "Huge support network"
   
• Project Jumpstarter
  Translation: "Especially useful for projects that will need to exist outside of your CMS"

http://getbootstrap.com/

Framework
Responsive
Mobile-First

Flexible grid

• 12 columns
   
• Columns adjust to fit within the responsive framework
   
• because hand-coding columns sucks
   

Responsive

• Media queries with mobile, tablet, laptop and desktop breaks
   
• Images set to width: 100%;
  will change size with the grid
   
• Encourages design to be built as the mobile version first, then increase in complexity for wider designs

Common components

& functionality

• Drop-down Navigation
   
• Buttons
   
• Pop-ups
   
• Slideshow / carousel
   
• Font icons
  Also try "Font Awesome"

Let's get started.

Other Options

Foundation

An alternate to Bootstrap

• Foundation provides core functionality - no extras
   
• Smaller community
   

• Mobile first
   

• Built with SASS

Pure

Lightweight CSS Modules 

• CSS modules, no JS
   
• Vertical default menus
   

• Minimalist look & feel
   

• Released 2013

Erika Lee

ebigalee@indiana.edu

@ebigalee

https://slides.com/ebigalee/nicar-2015-bootstrap