Bootstrap
HTML/CSS/JS framework
Talk by Maks (@msurguy)
Follow at slid.es/msurguy/bootstrap
SoCal Code Camp - Nov 2013
Meet Maks Surguy
B-boy from Ukraine turned FT web developer
Creator of :
Bootsnipp.com
Other Sites I built,
using Bootstrap as the frontend framework:
builtwithlaravel.com
cheatsheetr.com
mymaplist.com
filegr.am
and more
Framework
Why use a framework?
1.
When you build many projects
(or many parts of a large project),
eventually want to re-cycle the code or parts of it
Given enough frustration of
going through the same process over and over,
produce a set of reusable components.
WHY USE A FRAMEWORK?
2.
Exhibit "A" - Developer does web design:
<BOOTSTRAP>
"SLEEK, POWERFUL MOBILE-FIRST FRONT-END
FRAMEWORK
FOR FASTER AND EASIER
WEB DEVELOPMENT"
- @mdo (creator of Bootstrap)
History
Started as Twitter's internal project
by @mdo and @fat in 2010,
released as Open Source in August 2011:
Quickly gained traction,
in 7 months most popular repo on Github
Version 2.0
released in January 2011
responsive, mobile friendly, tons of new components
Version 3.0
Mobile-first, refined and rebuilt
Released in August 2013
What problems
does Bootstrap solve?
1) Responsive Layout.
Grid - 12 columns
http://getbootstrap.com/examples/grid/
Same grid on mobile:
Grid options
Nesting columns
Offsetting columns
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Selectively hiding elements
Bootsnipp Homepage =
Example of 3 column layout
Each column 4 units wide, either md or lg is fine
2) Consistency
2) Consistency
2) Consistency
-
Typography
- Borders (rounding)
- Colors
- Form elements
Sizing prefixes:
-
xs - extra small
-
sm - small
-
md - medium
-
lg - large
Feedback classes:
- *-success
- *-info
- *-warning
- *-danger
Ex. alert alert-success:
3) Design
Buttons
Button sizes
and "btn-block" - 100% width button
Forms
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Inline forms
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>Horizontal forms
<form class="form-horizontal" role="form">
...
</form>Navbars
<nav class="navbar navbar-default" role="navigation">
...
</nav>
Inverted variation
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>Panels (new)
guess the syntax
Many other components:
- button groups
- dropdowns
- breadcrumbs
- navs
- labels
- badges
- pagination
- progress bars
- list groups
- media object
Javascript-ish components
- modal windows
- tabs
- tooltips
- popovers
- collapse
- carousel
Bootstrap in the wild:
- healthcare.gov
- codecademy
- gosquared
- diy.org
- many many more
Download at
getbootstrap.com
Questions???
bootstrap
By msurguy
