An introduction to the twitter bootstrap css framework. A responsive css framework for web app development. These are the slides from a presentation given at the Software Craftsmanship of McHenry County Meetup.

1. INTRODUCTION TO BOOTSTRAP
A Responsive CSS Framework
Rand Graham
rmcore.com

2. 1. Introduction To Bootstrap Presentation
2. Cat Clicker App
Presentation Overview
rmcore.com

3. A Modern Web Page
rmcore.com

4. View The Source (if you dare)
That’s a
lot of divs.
rmcore.com

5. When you want to RTFM,
first find the manual.
See also: CSS Tricks
Help For The CSS Newbie
rmcore.com

6. Have You Heard The One About
rmcore.com

7. You can roll your own grid system.
Grid System Example
rmcore.com

8. A Responsive Page

9. /* Document level adjustments */
body {
font-size: 17px; }
@media (max-width: 900px) {
body {
font-size: 15px; }}
@media (max-width: 768px) {
body{
font-size: 13px; }}
The CSS Media Query
Example
media_type:
all, print, screen, tv
media_feature:
width, min-width, max-width
height, min-height, max-height
Types and
Features
rmcore.com

10. Bootstrap Advantages
Speeds development
Cross browser
Popularity
Tool Support
PineGrow
Bootstrap Playground
Theme Markets

11. Heavy pages
Bootstrap Disadvantage - Weight
rmcore.com

12. Silicon Valley Hierarchy of Needs
rmcore.com

13. Full bootstrap.min.
css
148KB
Customized
bootstrap.min.css
64KB
Bootstrap Customize
rmcore.com

14. “I’ve seen this website before.”
Bootstrap Disadvantage - Same samey sameness
rmcore.com

15. Common Classes by Example
navbar-fixed-top navbar-inverse search-bar
nav-bar-right
glyphicon-search
col-sm-3 left col-sm-9
list-group
list-group-item
rmcore.com

16. Visuals
The application should display
● a list of at least 5 cats, listed by name
● an area to display the selected cat
● text showing the number of clicks
In the cat display area, the following should be displayed
● the cat's name
● a picture of the cat
Interaction
● When a cat name is clicked in the list, the cat display area should update to show the data for
the selected cat.
● The number of clicks in the cat area should be unique to each cat, and should increment when the
cat's picture is clicked.
Requirements for Cat Clicker
rmcore.com

17. Mockup - Full
rmcore.com

18. Mockup - Mobile
rmcore.com

19. Let’s See Some Code
rmcore.com

20. Connect with me on twitter:
@rdg_rmcore
Read more at my website:
http://rmcore.com/
Keep in Touch
rmcore.com

21. Boots by dvids.
Kitten by poplinre.
"MaslowsHierarchyOfNeeds" by FireflySixtySeven
Credits
rmcore.com