Save 37% off PRO during our Black Friday Sale! »

Essential Gems - UI Kit

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.

3b5cb0411cbd1012acab1b60f7ce3606?s=128

Jesse Wolgamott

February 12, 2013
Tweet

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