Your SlideShare is downloading. ×
CSS Frameworks for Rapid Site Designs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Frameworks for Rapid Site Designs

772

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
772
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Frameworks forRapid Site Designs• Ben MacNeillben.macneill@extension.org• Presentation at:slideshare.net/chillnc/
  • 2. What is a CSS framework?• Two CSS files (core + responsive)• A single Javascript file (dependent on jQuery)• Two image files
  • 3. 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
  • 4. Scaffolding• 12 Column Grid• Fixed / Fluid• Both have responsive capabilities
  • 5. What is ResponsiveWeb Design?
  • 6. Flexible, Device-Independent Design
  • 7. Single Sourceof Content(HTML)
  • 8. Why Responsive Design?• Designing for specific devices — too many• Siloed pages: /mobile/page.html — trapped
  • 9. Three Components• A flexible grid-based layout• Flexible images and media• Media queries (CSS3)
  • 10. Make it Responsive• Set viewport• Include bootstrap-responsive.css
  • 11. Short Detour:Reseting theViewport• Modern mobile browsers pretend that webpages are desktop-browser size (~900px)• They render them at that size• Then shrink the resulting page to fit in thedevice window
  • 12. Override the Default<meta name="viewport" content="initial-scale=1.0, width=device-width" />• Makes width of the browser’s viewportequal to the width of the device’s screen
  • 13. ResetViewport320pxDefaultViewport980px
  • 14. Base CSS• Typography (font-size: 14px; line-height: 20px;)• Tables• Forms• Buttons• Icons by Glyphicons
  • 15. Form Examples
  • 16. Icon Examples
  • 17. Components• Dropdowns• Button groups• Button dropdowns• Navs• Navbar• Breadcrumbs• Pagination• Labels and badges• Typography• Thumbnails• Alerts• Progress bars• Media object• Misc
  • 18. Javascript• Transitions• Modal• Dropdown• Scrollspy• Tab• Tooltip• Popover• Alert• Button• Collapse• Carousel• Typeahead• Affix
  • 19. 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>
  • 20. Bootstrap offers customization(But I prefer an override.css)
  • 21. Thanks!• Ben MacNeillben.macneill@extension.org• Presentation at:slideshare.net/chillnc/

×