Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building beautiful websites with Bootstrap:
A case study

by Michael Kennedy
DevelopMentor | @mkennedy | michaelckennedy.n...
Objectives

●

Learn what Bootstrap has to offer web developers

●

Install and use Bootstrap

●

Learn the major componen...
What is Bootstrap? Why do you need it?
●
●
●
●
●

●
●

Bootstrap is a web front-end framework
With bootstrap you start fro...
How do you get Bootstrap?
A brief tour of Bootstrap
CSS:

Components:

Grid system

Glyphicons

Badges

Transitions

Typography

Dropdowns

Jumbotro...
How did we use Bootstrap at develop.com?
A brief tour of Bootstrap: What we're covering
CSS:

Components:

Grid system

Glyphicons

Badges

Transitions

Typography...
Labels
<a
class="label label-warning"
href="/course/iOS">iOS</a>
Buttons
<button class="btn btn-danger">Subscribe</button>

<a class="btn btn-success" href="...">Request onsite</a>
Images
<img class="img-circle"
src="/technicalstaff/image/Pierre_Nallet.jpg">
Jumbotrons (AKA hero units)
Jumbotrons (AKA hero units)
<section class="jumbotron">
<div class="container">
<h2 class="mission-statement">
We develop ...
Blockquotes
<blockquote>
<p>Brock Allen was a brilliant instructor....</p>
<small>Kexin Sun, <cite>Carefusion Corporation<...
Forms
<form action="/store/register/..." method="post">
<strong>Credit Card Details</strong>
<div class="form-group">
<div...
Tables
<table class="table table-striped course-list">
<!-- ... -->
</table>
Wells

<div class="well">
<h2>Full course curriculum at DevelopMentor</h2>
<div>...</div>
</div>
Dialogs
Dialogs
<div id="upcoming-classes-dialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div ...
Dialogs
<a class='btn ...' data-toggle='modal' href='#upcoming-classes-dialog'>Upcoming classes</a>

<div id="upcoming-cla...
Navigation
<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 .....
Navigation
<nav class="main navbar navbar-inverse navbar-default"> ...
<ul class="nav navbar-nav"> ...
<li class="dropdown...
Responsive utilities
Responsive utilities

Using the responsive classes allow us to keep the key navigation on the screen on smaller
devices wi...
Responsive utilities

Using the responsive classes allow us to keep the key navigation on the screen on smaller
devices wi...
Regrets

I wish I would have:
1. Used LESS for our CSS and built on Bootstrap's LESS foundation.
2. Learned and used the r...
Summary: Bootstrap, a case study

●

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

●

Installing Bootstra...
Building beautiful websites with bootstrap  a case study (DevelopMentor webcast)
Upcoming SlideShare
Loading in …5
×

Building beautiful websites with bootstrap a case study (DevelopMentor webcast)

6,427 views

Published on

Bootstrap has literally changed the game when it comes to web design. This is especially true for developers who have traditionally struggled to build beautiful and engaging sites. With Bootstrap, developers can now start from a good design and evolved.

This webcast look at how we at DevelopMentor have used bootstrap to completely redesign our website. We'll take you through a quick introduction to bootstrap and then look at the various ways we have made use of it's simple and productive design foundation.

Watch the video and get the downloads here: http://www.develop.com/webcasts/watch/5260173ad588bf08f82ac92f/building-beautiful-websites-with-bootstrap-a-case-study

Published in: Technology
  • Be the first to comment

Building beautiful websites with bootstrap a case study (DevelopMentor webcast)

  1. 1. Building beautiful websites with Bootstrap: A case study by Michael Kennedy DevelopMentor | @mkennedy | michaelckennedy.net
  2. 2. 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
  3. 3. What is Bootstrap? Why do you need it? ● ● ● ● ● ● ● 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 (who is never late) Bootstrap solves cross browser compat via a reset css Bootstrap is comprised of ○ CSS (available via LESS) ○ JavaScript ○ Fonts (which stand in for images) Open-source on Github Created by two guys who work at Twitter.
  4. 4. How do you get Bootstrap?
  5. 5. A brief tour of Bootstrap CSS: Components: Grid system Glyphicons Badges Transitions Typography Dropdowns Jumbotron Modal Code Button groups Page header Dropdown Tables Button dropdowns Thumbnails Scrollspy Forms Input groups Alerts Tab Buttons Navs Progress bars Tooltip Images Navbar Media object Popover Helper classes Breadcrumbs List group Alert Responsive utilities Pagination Panels Button Labels Wells Collapse JavaScript: Carousel Affix
  6. 6. How did we use Bootstrap at develop.com?
  7. 7. A brief tour of Bootstrap: What we're covering CSS: Components: Grid system Glyphicons Badges Transitions Typography Dropdowns Jumbotron Modal Code Button groups Page header Dropdown Tables Button dropdowns Thumbnails Scrollspy Forms Input groups Alerts Tab Buttons Navs Progress bars Tooltip Images Navbar Media object Popover List group Helper classes Breadcrumbs Alert Panels Responsive utilities Pagination Button Wells Collapse Labels JavaScript: Carousel Affix
  8. 8. Labels <a class="label label-warning" href="/course/iOS">iOS</a>
  9. 9. Buttons <button class="btn btn-danger">Subscribe</button> <a class="btn btn-success" href="...">Request onsite</a>
  10. 10. Images <img class="img-circle" src="/technicalstaff/image/Pierre_Nallet.jpg">
  11. 11. Jumbotrons (AKA hero units)
  12. 12. 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>
  13. 13. Blockquotes <blockquote> <p>Brock Allen was a brilliant instructor....</p> <small>Kexin Sun, <cite>Carefusion Corporation</cite></small> </blockquote>
  14. 14. Forms <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>
  15. 15. Tables <table class="table table-striped course-list"> <!-- ... --> </table>
  16. 16. Wells <div class="well"> <h2>Full course curriculum at DevelopMentor</h2> <div>...</div> </div>
  17. 17. Dialogs
  18. 18. 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>
  19. 19. 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>
  20. 20. Navigation <header> <nav class="navbar navbar-inverse navbar-default"> ... </nav> </header>
  21. 21. 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>
  22. 22. 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>
  23. 23. Responsive utilities
  24. 24. 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
  25. 25. 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>
  26. 26. 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.
  27. 27. 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

×