CSS Frameworks for Rapid Site Designs
0 likes1,309 views
CSS frameworks like Bootstrap provide tools for rapidly building responsive website designs. Bootstrap includes CSS files for core styling and responsive layouts, a JavaScript file, and image files. It offers features like a grid system, common elements, and compatibility down to older browsers. To make a site responsive, Bootstrap uses a flexible grid, flexible images and media, and media queries. Developers can add Bootstrap and make minor changes to HTML and CSS to create a responsive site.
CSS Frameworks for Rapid Site Designs
- 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?
- 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
- 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/