building beautiful websites with bootstrap: a case...

Building beautiful websites with Bootstrap: A case study

by Michael Kennedy DevelopMentor | @mkennedy | michaelckennedy.net

Objectives

●  Learn what Bootstrap has to offer web developers

●  Install and use Bootstrap

●  Learn the major components / features of Bootstrap

●  See a real-world application of these features to a website redesign

●  Bootstrap is a web front-end framework ●  With bootstrap you start from a beautiful site and add to it ●  Bootstrap is the designer we never had (and who is never late) ●  Bootstrap solves cross browser compat via a reset css ●  Bootstrap is comprised of

o  CSS (available via LESS) o  JavaScript o  Fonts (which stand in for images)

●  Open-source on Github ●  Created by two guys who work at Twitter.

What is Bootstrap? Why do you need it?

Invest a little and (really) learn CSS

http://www.amazon.com/CSS-The-Missing-Manual-Manuals/dp/0596802447

How do you get Bootstrap?

JavaScript: Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix

A brief tour of Bootstrap Components: Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels

CSS: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities

Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells

How did we use Bootstrap at develop.com?

JavaScript: Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix

A brief tour of Bootstrap: What we're covering Components: Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels

CSS: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities

Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells

<a            class="label  label-­‐warning"          href="/course/iOS">iOS</a>  

Labels

<button  class="btn  btn-­‐danger">Subscribe</button>        

     <a  class="btn  btn-­‐success"  href="...">Request  onsite</a>  

Buttons

<img  class="img-­‐circle"            src="/technicalstaff/image/Pierre_Nallet.jpg">  

Images

Jumbotrons (AKA hero units)

<section  class="jumbotron">    <div  class="container">            <h2  class="mission-­‐statement">                    We  develop  people<br>                    who  develop  software            </h2>  

                       <div  class="visible-­‐sm  visible-­‐xs"></div>            <img  class="jumbotron-­‐image"  src="/images/macbook-­‐pro-­‐vs.jpg">    </div>  

</section>  

Jumbotrons (AKA hero units)

<blockquote>    <p>Brock  Allen  was  a  brilliant  instructor....</p>    <small>Kexin  Sun,  <cite>Carefusion  Corporation</cite></small>  

</blockquote>        

Blockquotes

<form  action="/store/register/..."  method="post">              <strong>Credit  Card  Details</strong>              <div  class="form-­‐group">  

 <div>          <label  class="form-­‐label"  for="CreditCardNumber">Card  Number</label>          <input  class="form-­‐control"  data-­‐val="true"  type="text"></div>    </div>      

           </div>    </form>    

Forms

<table  class="table  table-­‐striped  course-­‐list">          <!-­‐-­‐  ...  -­‐-­‐>  </table>    

Tables

           <div  class="well">  

 <h2>Full  course  curriculum  at  DevelopMentor</h2>    <div>...</div>  

</div>    

Wells

Dialogs

<div  id="upcoming-­‐classes-­‐dialog"  class="modal  fade"  tabindex="-­‐1"  role="dialog">      <div  class="modal-­‐dialog">          <div  class="modal-­‐content">              <div  class="modal-­‐header">  

 <button  type="button"  class="close"  data-­‐dismiss="modal">&times;</button>    <h4  class="modal-­‐title">...</h4>  

           </div>              <div  class="modal-­‐body">                      ...              </div>              <div  class="modal-­‐footer">  

 <button  type="button"  class="btn  btn-­‐success"  data-­‐dismiss="modal">Close</button>              </div>          </div><!-­‐-­‐  /.modal-­‐content  -­‐-­‐>      </div><!-­‐-­‐  /.modal-­‐dialog  →  </div>    

Dialogs

<a  class='btn  ...'  data-­‐toggle='modal'  href='#upcoming-­‐classes-­‐dialog'>Upcoming  classes</a>                              <div  id="upcoming-­‐classes-­‐dialog"  class="modal  fade"  tabindex="-­‐1"  role="dialog">        ...  </div>    

Dialogs

         <header>                  <nav  class="navbar  navbar-­‐inverse  navbar-­‐default">                        ...                  </nav>  </header>    

Navigation

<nav  class="main  navbar  navbar-­‐inverse  navbar-­‐default">          <div>                  <a  class="navbar-­‐brand"  href="/">DEVELOPMENTOR  ...</a>          </div>            <ul  class="nav  navbar-­‐nav">                  <li><a  href="...">Classroom</a></li>                  <li><a  href="...">Online</a></li>                  <li><a  href="...">Courses</a></li>                  ...                  <li>  class="dropdown">                          ...                  </li>          </ul>  </nav>    

Navigation

 <nav  class="main  navbar  navbar-­‐inverse  navbar-­‐default">  ...          <ul  class="nav  navbar-­‐nav">  ...                  <li  class="dropdown">                          <a  class="dropdown-­‐toggle"  data-­‐toggle="dropdown"  href="#">                                  More  <span  class="glyphicon  glyphicon-­‐circle-­‐arrow-­‐down"></span>                          </a>  

                 <ul  class="dropdown-­‐menu"  role="menu">                      <li><a  href="...">Training  curriculum</a></li>                      <li><a  href="...">Public  course  schedule</a></li>                        ...                    </ul>  

               </li>          </ul>  </nav>    

Navigation

Responsive utilities

Responsive utilities Using  the  responsive  classes  allow  us  to  keep  the  key  navigation  on  the  screen  on  smaller  devices  without  creating  an  overly  crowded  navigation:                                                                            wide                                                                            medium                                                                              small                                                                              phone  

Responsive utilities  Using  the  responsive  classes  allow  us  to  keep  the  key  navigation  on  the  screen  on  smaller  devices  without  creating  an  overly  crowded  navigation:    <li  class="hidden-­‐sm"><a  href="...">Classroom</a></li>    <li  class="hidden-­‐sm"><a  href="...">Online</a></li>  <li><a  href="...">Courses</a></li>  <li  class="hidden-­‐sm  hidden-­‐md"><a  href="...">Search</a></li>    <img  class="img  img-­‐responsive"  .../>    

Responsive Grids

Font Icons

Themes

https://bootswatch.com/ http://startbootstrap.com/ https://wrapbootstrap.com/

Bower Bower is a great way to install and manage bootstrap •  Install node.js •  npm install -g bower •  bower install bootstrap (may require git)

Product / App Images Placeit.net is a sweet way to feature your product

Regrets I wish I would have: 1. Used LESS for our CSS and built on Bootstrap's LESS foundation. 2. Learned and used the responsive utilities earlier.

Summary: Bootstrap, a case study

●  Bootstrap is that designer you always which you had (or were)

●  Installing Bootstrap is easy (getbootstrap.com or NuGet)

●  Bootstrap offers a wide range of features from CSS layouts, to styles, to

behaviors driven via data-* attributes.

●  We saw a real-world application of these features to a website redesign