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???

Made with Slides.com