Bootstrap Workshop
Will Klein
Intro to Bootstrap
Responsive, mobile-first HTML/CSS framework
Includes some JavaScript widgets
Powered by LESS under the hood
Responsive Design
Flexible user interface that adapts to fit different mediums
Three main features:
fluid grids
flexible images
media queries
More info:
http://alistapart.com/article/responsive-web-design
CSS Basics
CSS defines the style and layout of HTML elements
CSS rules are comprised of selectors and one or more properties
Selectors are combinations
of HTML element types, IDs, and classes
Properties define how the "selected elements"
should look or lay out.
CSS Basics
Example CSS rule:
h1.title is the selector, finds all h1 elements w/ class "title"
color is the property,
grey is the value applied to all matching elements
IDs vs Classes
IDs are unique per page
ID = identifier
Classes can be used many times per page
Class = classification
Example:
<h1 id="featured" class="title">Featured Item</h1>
There is only one h1 element that is the page "featured."
There might be several h1 elements that are a "title."
Box Model Basics
Margin vs Padding
Block vs Inline
Floats
Back to Bootstrap
Takes care of 90% of the CSS out of the box
Can override/extend the base CSS with your own
Can dive into LESS for a more powerful CSS flavor
You don't need to master HTML/CSS layouts
Focus your content and/or functionality!
Back to Bootstrap
Also gives you some JavaScript widgets (requires jQuery)
model
carousel
tooltip
....
and more
Workshop Time!
Follow the instructions at:
https://github.com/willklein/bootstrap-workshop
Short URL:
http://wkle.in/innovatecu-bootstrap