Intro to Twitter Bootstrap Workshop

Transcript

1. TACTICAL HTML & CSS TWITTER BOOTSTRAP Darby Frey @darbyfrey darbyfrey.com Saturday, October 19, 13
2. @darbyfrey Introduction to Twitter Bootstrap Saturday, October 19, 13
3. @darbyfrey Introduction to Twitter Bootstrap • Created by Mark Otto & Jacob Thornton at Twitter • Open sourced in 2011 • The first major styleguide to be open sourced Saturday, October 19, 13
4. @darbyfrey Introduction to Twitter Bootstrap http://foundation.zurb.com/ http://www.blueprintcss.org/ http://960.gs/ http://www.99lime.com/ OTHER FRAMEWORKS Saturday, October 19, 13
5. @darbyfrey Introduction to Twitter Bootstrap SMACSS • Opinionated style guide • Aims to create a consistent methodology to building with CSS • http://smacss.com Jonathan Snook Saturday, October 19, 13
6. @darbyfrey Introduction to Twitter Bootstrap INSTALLATION 1. Download and copy files into place 2. Compile with 3.Bootstrap CDN 3 Ways to install Bootstrap: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> Saturday, October 19, 13
7. @darbyfrey Introduction to Twitter Bootstrap CSS Grid System Typography Tables Forms Buttons Images Helper classes Responsive utilities COMPONENTS Components Icons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells JAVASCRIPT Javascript Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Saturday, October 19, 13
8. @darbyfrey Introduction to Twitter Bootstrap EXAMPLES <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> Saturday, October 19, 13
9. @darbyfrey Introduction to Twitter Bootstrap EXAMPLES <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> Saturday, October 19, 13
10. @darbyfrey Introduction to Twitter Bootstrap EXAMPLES <table class="table table-striped"> ... </table> Saturday, October 19, 13
11. @darbyfrey Introduction to Twitter Bootstrap LET’S WRITE SOME CODE! http://bit.ly/bootstrap-workshop Saturday, October 19, 13
12. @darbyfrey Introduction to Twitter Bootstrap GOING FURTHER • Play around with other features (there are a bunch we didn’t cover) • Look at the source code, see how it works • Themes (be sure to check the version) Saturday, October 19, 13
13. @darbyfrey Introduction to Twitter Bootstrap LEARN.SHAYHOWE.COM Saturday, October 19, 13
14. @darbyfrey Introduction to Twitter Bootstrap KICKSTRAP http://ajkochanowicz.github.com/Kickstrap/ Saturday, October 19, 13
15. @darbyfrey Introduction to Twitter Bootstrap FONT AWESOME http://gregoryloucas.github.com/Font-Awesome-More/ Saturday, October 19, 13
16. @darbyfrey Introduction to Twitter Bootstrap BOOTSTRAP PSD http://gui.repixdesign.com/#freebies Saturday, October 19, 13
17. @darbyfrey Introduction to Twitter Bootstrap BALSAMIQ https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap Saturday, October 19, 13
18. @darbyfrey Introduction to Twitter Bootstrap THANK YOU! Questions? Saturday, October 19, 13