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
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Building beautiful websites with bootstrap a case study (DevelopMentor webcast)
1. Building beautiful websites with Bootstrap:
A case study
by Michael Kennedy
DevelopMentor | @mkennedy | michaelckennedy.net
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. 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.
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:
wide
medium
small
phone
26. 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>
27. 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.
28. 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