Twitter Bootstrap

Transcript

1. TWITTER BOOTSTRAP Darby Frey darbyfrey@gmail.com @darbyfrey Thursday, November 1, 12
2. Thursday, November 1, 12
3. http://www.blueprintcss.org/ http://foundation.zurb.com/ http://960.gs/ http://www.99lime.com/ Thursday, November 1, 12
4. SMACSS http://smacss.com/ • Opinionated style guide • Aims to create a consistent methodology to building with CSS Jonathan Snook Thursday, November 1, 12
5. INSTALLATION • Download jQuery & Bootstrap http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js http://twitter.github.com/bootstrap/assets/bootstrap.zip • Unzip file. Put CSS, Javascripts and Images in the correct folders. • Add <link> and <script> tags to your layout. The Less Easy Way Thursday, November 1, 12
6. INSTALLATION The Less Easy Way Thursday, November 1, 12
7. INSTALLATION • twitter-bootstrap-rails gem https://github.com/seyhunak/twitter-bootstrap-rails • In your Gemfile: gem “twitter-bootstrap-rails” • Install the required JS & CSS files with: “rails g bootstrap:install” • Generate a layout with: rails g bootstrap:layout LAYOUT_NAME fixed/fluid i.e. “rails g boostrap:layout application fixed” • See Railscasts: http://railscasts.com/episodes/328-twitter-bootstrap-basics http://railscasts.com/episodes/329-more-on-twitter-bootstrap The Easy Way (Rails) Thursday, November 1, 12
8. GRID : FLUID GRID : FIXED LAYOUT / FLUID LAYOUT RESPONSIVE DESIGN : TYPOGRAPHY : CODE VIEW TABLES : FORMS : BUTTONS : ICONS : BUTTON GROUPS : TABS : PILLS : NAV LISTS : NAVBAR BREADCRUMBS : PAGINATION : PAGER : INLINE LABELS BADGES : PAGE HEADER UNIT : HERO UNIT THUMBNAILS : ALERTS : PROGRESS BARS : WELLS CLOSE ICON : MODALS : DROPDOWNS : SCROLLSPY TOGGLABLE TABS : TOOLTIPS : POPOVERS : COLLAPSE CAROUSEL : TYPEAHEAD Thursday, November 1, 12
9. GRID • 12 column grid • 940px wide fixed layout • Responsive • Fixed or Fluid layouts defined with: class=”container” / class=”row” class=”container-fluid” / class=”row-fluid” • Define columns with class=”span*” and class=”offset*” * = your column size Thursday, November 1, 12
10. GRID Thursday, November 1, 12
11. RESPONSIVE Thursday, November 1, 12
12. NAVBAR • Navbar / Fixed Navbar (top/bottom) • Brand • Nav links • Dropdown menus • Embedded Forms Thursday, November 1, 12
13. NAVBAR scaffold nav links Thursday, November 1, 12
14. NAVBAR brand nav links Thursday, November 1, 12
15. BUTTONS • Super easy to make nice looking buttons • 3 sizes, 7 colors • Can be added to any <a>, <button> or <input> element. • <button class=”btn”>BUTTON</button> • <button class=”btn btn-primary”>BUTTON</button> Thursday, November 1, 12
16. BUTTONS .btn { padding: 4px 14px; font-size: 14px; color: #333333; background-color: #f5f5f5; .... } .btn-primary { color: #ffffff; background-color: #006dcc; .... } .btn-warning { color: #ffffff; background-color: #faa732; .... } .btn-primary { padding: 4px 14px; font-size: 14px; color: #ffffff; background-color: #006dcc; .... } .btn-warning { padding: 4px 14px; font-size: 14px; color: #ffffff; background-color: #faa732; .... } Thursday, November 1, 12
17. TOOLTIPS & POPOVERS • Tooltips & Popovers provide 2 ways of adding contextual information within an interface. • Content included in <a> tag using the title or data attributes. Thursday, November 1, 12
18. TOOLTIPS Thursday, November 1, 12
19. POPOVERS Thursday, November 1, 12
20. GRID : FLUID GRID : FIXED LAYOUT / FLUID LAYOUT RESPONSIVE DESIGN : TYPOGRAPHY : CODE VIEW TABLES : FORMS : BUTTONS : ICONS : BUTTON GROUPS : TABS : PILLS : NAV LISTS : NAVBAR BREADCRUMBS : PAGINATION : PAGER : INLINE LABELS BADGES : PAGE HEADER UNIT : HERO UNIT THUMBNAILS : ALERTS : PROGRESS BARS : WELLS CLOSE ICON : MODALS : DROPDOWNS : SCROLLSPY TOGGLABLE TABS : TOOLTIPS : POPOVERS : COLLAPSE CAROUSEL : TYPEAHEAD Thursday, November 1, 12
21. RAILS RESOURCES • https://github.com/seyhunak/twitter-bootstrap-rails • https://github.com/thomas-mcdonald/bootstrap-sass • http://railscasts.com/episodes/328-twitter-bootstrap-basics • http://railscasts.com/episodes/329-more-on-twitter-bootstrap • https://github.com/gabetax/twitter-bootstrap-kaminari-views Thursday, November 1, 12
22. KICKSTRAP http://ajkochanowicz.github.com/Kickstrap/ Thursday, November 1, 12
23. FONT AWESOME http://gregoryloucas.github.com/Font-Awesome-More/ .icon-twitter { color: green; } .icon-twitter { color: maroon; } Thursday, November 1, 12
24. BOOTSTRAP PSD http://gui.repixdesign.com/#freebies Thursday, November 1, 12
25. BALSAMIQ https://mockupstogo.mybalsamiq.com/projects/web/Bootstrap Thursday, November 1, 12
26. THEMES https://wrapbootstrap.com/ http://bootswatch.com/ Thursday, November 1, 12
27. Darby Frey darbyfrey@gmail.com @darbyfrey QUESTIONS? Thursday, November 1, 12