1 / 38

Bootstrap, from Twitter

Bootstrap, from Twitter. A Developers Best Friend. Senior Developer First Comp Adobe Community Professional Manager Cleveland Adobe User Group Cleveland Sports Fan Running / Coding / Music / Poker Toys For Shots (www.toysforshots.com). About Me. What Is Bootstrap.

max
Download Presentation

Bootstrap, from Twitter

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bootstrap, from Twitter A Developers Best Friend

  2. Senior Developer First Comp • Adobe Community Professional • Manager Cleveland Adobe User Group • Cleveland Sports Fan • Running / Coding / Music / Poker • Toys For Shots (www.toysforshots.com) About Me

  3. What Is Bootstrap

  4. “Simple and flexible HTML, CSS, and JavaScript for popular user interface components and interactions.”

  5. “An extensive front-end toolkit for developing web sites and applications”

  6. History of Bootstrap • Early Days at Twitter • Bootstrap @twbootstrap • github stats • 28,130 Watchers • 5,472 Forks • 22.5K Twitter Followers • v 1.0 – 08/19/2011 • v 2.0 – 01/31/2012

  7. Reasons To Love Bootstrap • For all skill levels • Documentation • Cross Everything • Lightweight • Responsive Design • Custom jQuery plugins • Open Source • Built on LESS

  8. Getting Started • HTML 5 DOCTYPE Required • Upgrading from 1.4 • Downloading Bootstrap • Source • Ready to go • Customize • Starter Templates

  9. Getting Started DEMOS

  10. Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system. Scaffolding

  11. Layouts

  12. DEFAULT GRID SYSTEM

  13. Layouts & Grid Demos

  14. RESPONSIVE DESIGN

  15. RESPONSIVE DESIGN Demo

  16. On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel. Base css

  17. TYPOGRAPHY

  18. code

  19. BUTTONS

  20. ICONS

  21. Typography / Icons / Buttons (local docs) CSS DEMO

  22. TABLES ARE FOR TABLUAR DATA

  23. TABLES OPTIONS

  24. FORMS • Four Layouts • Vertical (default) • Search • Inline • Horizontal • Form Controls • Base • Custom

  25. /bootstrap/demos Tables / Forms DEMO

  26. Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more. COMPONENTS

  27. ALERTS

  28. THUMBNAILS DEMO

  29. JAVASCRIPT PLUGINS

  30. Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS. LESS

  31. LOOK AND FEEL • Built With Bootstrap • http://builtwithbootstrap.com/ • Customize CSS • http://twitter.github.com/bootstrap/download.html • Bootswatch • http://bootswatch.com/ • jQuery UI theme • http://addyosmani.github.com/jquery-ui-bootstrap/ • Mura CMS • https://github.com/blueriver/MuraBootstrap

  32. RESOURCES • My Presentations • http://www.danvega.org/presentations • Twitter Bootstrap • http://twitter.github.com/bootstrap • LESS CSS • http://lesscss.org • Google Group • http://bit.ly/KTUw1o • Bootswatch • http://bootswatch.com

  33. Bootstrap, from Twitter http://www.danvega.orgdanvega@gmail.com@cfaddict

More Related