Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jesse Wolgamott

February 12, 2013
Tweet

More Decks by Jesse Wolgamott

Other Decks in Programming

Transcript

  1. Bootstrap The de-facto UI Kit for Websites since 2010 Built

    by Twitter Adopted by EVERYONE ALWAYS since Wednesday, February 13, 13
  2. 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
  3. The Elements The Grid Typography Nice Alert Messages Cool Well

    Navigation Buttons Wednesday, February 13, 13
  4. !“Bootstrappy” Choose a different font-set Change colors of the nav-bar

    Add a nice subtle background Wednesday, February 13, 13
  5. Compass Cross Browser Sass Helpers Best when not using Bootstrap

    gem 'compass-rails' Wednesday, February 13, 13
  6. 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
  7. Roll your own UI hyphenation of text static footer easy

    horizontal lists more at http://compass-style.org/ Wednesday, February 13, 13
  8. Font-Awsome Not just a clever name MIT Licensed, Retina Ready,

    Awesome baked in. Fun, application, social. Everything! Wednesday, February 13, 13
  9. 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
  10. 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
  11. 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