CFObjective Notes: Responsive Apps using Bootstrap 2.0 - Dan Vega

May 18, 2013

Responsive Apps using Bootstrap 2.0 - Dan Vega

(I didn't take a ton of notes on this preso. Dan's slide deck was SO good, it wasn't really necessary to take a lot of notes, so I eventually stopped and just listened to him talk. At the end of this entry, I have listed the URL for Dan's blog; just go there and get his slide deck, it is extremely well put together.)

Today's web developer
html5, css3, javascript,
server side language
DBMS
NOSQL databases

after we figure out all of that, we have content we have to delivery to a huge variety of devices

mobile traffic will outnumber desktop traffic by 2014

different OS's, and different screen resolutions

NOT considering all those factors is a death sentence

So what is our answer to this problem?
dedicated apps (which sometimes is the right solution, but not in all cases)
device specific apps
Responsive Apps...built w/ Bootstrap

What is Bootstrap?
Scaffolding - to create our layouts, grid systems, fluid grid system, responsive design
Base CSS - typography, tables, forms, buttons, icons
Components - Dozens of reusable components
dropdowns
navbar
breadcrumbs
alerts
progress bars

Documentation is great.
for all skills levels

2 requirements to use it
html5 doctype
include bootstrap.css

starter templates included

Fixed Layout vs Fluid Layout
<div>
or
<div class="container-fliud">

Grid system - to put things on the page.
...inside here is a 12-column grid:

or to do that w/ fluid grid, do this:
<div class="row-fliud">
that's it!

(Bootstrap 3.0 will have "row-fluid" on by default.)

Responsive Design
uses media quires
modify the width of the column in the grid

Plugins
include bootstrap.min.js
-- gets you ALL the plugins
-- or you can do a custom download to just pick/choose which ones you want.

You can use ALL the plugins thru the API so you can use them all via TAGS, and never have to write a single line of JS code.

Less CSS
Bootstrap is built on LESS
Variables
Mixins
-- like function calls in CSS
...and the way Dan explained it, it actually makes sense!

Preso files will be up on Dan's site later (The slides are GREAT and really informative. )
www.danvega.org/presentations

Google HTML5 Slides are also good (on code.google.com)