1. CSS Frameworks for
Rapid Site Designs
• Ben MacNeill
ben.macneill@extension.org
• Presentation at:
slideshare.net/chillnc/

3. What is a CSS framework?
• Two CSS files (core + responsive)
• A single Javascript file (dependent on jQuery)
• Two image files

4. Why use Bootstrap?
• Faster development
• Instant grid
• Library of commonly used elements (components)
• Typography
• Responsive CSS (optional)
• Compatibility (down to IE 7)
• Open source
• Active: https://github.com/popular/starred

6. Scaffolding
• 12 Column Grid
• Fixed / Fluid
• Both have responsive capabilities

7. What is Responsive
Web Design?

8. Flexible, Device-
Independent Design

9. Single Source
of Content
(HTML)

10. Why Responsive Design?
• Designing for specific devices — too many
• Siloed pages: /mobile/page.html — trapped

11. Three Components
• A flexible grid-based layout
• Flexible images and media
• Media queries (CSS3)

12. Make it Responsive
• Set viewport
• Include bootstrap-responsive.css

13. Short Detour:
Reseting theViewport
• Modern mobile browsers pretend that web
pages are desktop-browser size (~900px)
• They render them at that size
• Then shrink the resulting page to fit in the
device window

15. Override the Default
<meta name="viewport" content="initial-
scale=1.0, width=device-width" />
• Makes width of the browser’s viewport
equal to the width of the device’s screen

16. ResetViewport
320px
DefaultViewport
980px

17. Base CSS
• Typography (font-size: 14px; line-height: 20px;)
• Tables
• Forms
• Buttons
• Icons by Glyphicons

18. Form Examples

19. Icon Examples

20. Components
• Dropdowns
• Button groups
• Button dropdowns
• Navs
• Navbar
• Breadcrumbs
• Pagination
• Labels and badges
• Typography
• Thumbnails
• Alerts
• Progress bars
• Media object
• Misc

21. Javascript
• Transitions
• Modal
• Dropdown
• Scrollspy
• Tab
• Tooltip
• Popover
• Alert
• Button
• Collapse
• Carousel
• Typeahead
• Affix

22. Data Attributes
• Trigger Bootstrap plugins without writing any JS
• Use data-toggle to call the plugin
• Use data-target or href to set your target
<a href="#myModal" data-toggle="modal">
Click me
</a>

23. Bootstrap offers customization
(But I prefer an override.css)

24. Thanks!
• Ben MacNeill
ben.macneill@extension.org
• Presentation at:
slideshare.net/chillnc/