Essential Gems - UI Kit

Essential Rails gems from @jwo: bootstrap, compass, and font-awesome

Before you hire a designer, make your site not terrrrrrrible. Get 80% of the way there with bootstrap, compass, and font-awesome.

Transcript

1. BETTER USER INTERFACES Rails Essential Gems: by @jwo for @houstonrb Wednesday, February 13, 13
2. Bootstrap The de-facto UI Kit for Websites since 2010 Built by Twitter Adopted by EVERYONE ALWAYS since Wednesday, February 13, 13
3. Getting Started 1. change application.css to application.scss 2. Add bootstrap-sass to gemfile 3. in application.scss add: @import 'bootstrap'; @import 'bootstrap-responsive'; Wednesday, February 13, 13
4. Standard Website Wednesday, February 13, 13
5. Same, bootstrapped Wednesday, February 13, 13
6. The Elements The Grid Typography Nice Alert Messages Cool Well Navigation Buttons Wednesday, February 13, 13
7. Wednesday, February 13, 13
8. “Bootstrappy” Does this look like every EVERY website lately? Wednesday, February 13, 13
9. !“Bootstrappy” Choose a different font-set Change colors of the nav-bar Add a nice subtle background Wednesday, February 13, 13
10. Easy Ways to help http://bootswatch.com/ (free) http://wrapbootstrap.com/ (premium) Wednesday, February 13, 13
11. Wednesday, February 13, 13
12. Wednesday, February 13, 13
13. Compass Cross Browser Sass Helpers Best when not using Bootstrap gem 'compass-rails' Wednesday, February 13, 13
14. Roll your own UI use Susy http://susy.oddbird.net/ for your grid rounded borders background images that really work shading, darkening easily use font-faces more at http://compass-style.org/ Wednesday, February 13, 13
15. Roll your own UI hyphenation of text static footer easy horizontal lists more at http://compass-style.org/ Wednesday, February 13, 13
16. Font-Awsome Not just a clever name MIT Licensed, Retina Ready, Awesome baked in. Fun, application, social. Everything! Wednesday, February 13, 13
17. Getting Started 1. change application.css to application.scss 2. Add font-awesome-rails to gemfile 3. in application.scss add: 4. icons: fortawesome.github.com/Font-Awesome/ @import 'font-awesome'; Wednesday, February 13, 13
18. Font-Stacks Headings and text "should" have one be Serif and one be Sans-Serif. http://awesome-fontstacks.com/ is a good place to browse free fonts for inspiration http://www.myfonts.com/ is good for buying and browsing. Wednesday, February 13, 13
19. Font-Stack Museo Slab PT Sans Fontin Sans Ubuntu Wednesday, February 13, 13
20. Background Patterns http://subtlepatterns.com/ is your friend Don’t go overboard -- but texture is better than blank colors (usually) Alternative: Add a Gradient Wednesday, February 13, 13
21. Patterns add Feeling Wednesday, February 13, 13
22. BOOSTRAP ALTERNATIVES Zurb Foundation is the best responsive framework ever. Wednesday, February 13, 13
23. Gem and Site Recap bootstrap-sass compass-rails font-awesome-rails http://awesome-fontstacks.com/ http://subtlepatterns.com/ http://foundation.zurb.com Wednesday, February 13, 13