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 {
    color: grey;}
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

Wrap Up!



Thanks!

Bootstrap Workshop

By Will Klein

Made with Slides.com

Bootstrap Workshop

InnovateCU MakeItHappen Series, Dec 9, 2013

  • 2,441

More from Will Klein