BETTER USER INTERFACES
Rails Essential Gems: by @jwo for @houstonrb
Wednesday, February 13, 13
Slide 2
Slide 2 text
Bootstrap
The de-facto UI Kit for Websites since 2010
Built by Twitter
Adopted by EVERYONE ALWAYS since
Wednesday, February 13, 13
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Standard Website
Wednesday, February 13, 13
Slide 5
Slide 5 text
Same, bootstrapped
Wednesday, February 13, 13
Slide 6
Slide 6 text
The Elements
The Grid
Typography
Nice Alert Messages
Cool Well
Navigation
Buttons
Wednesday, February 13, 13
Slide 7
Slide 7 text
Wednesday, February 13, 13
Slide 8
Slide 8 text
“Bootstrappy”
Does this look like every EVERY
website lately?
Wednesday, February 13, 13
Slide 9
Slide 9 text
!“Bootstrappy”
Choose a different font-set
Change colors of the nav-bar
Add a nice subtle background
Wednesday, February 13, 13
Slide 10
Slide 10 text
Easy Ways to help
http://bootswatch.com/ (free)
http://wrapbootstrap.com/ (premium)
Wednesday, February 13, 13
Slide 11
Slide 11 text
Wednesday, February 13, 13
Slide 12
Slide 12 text
Wednesday, February 13, 13
Slide 13
Slide 13 text
Compass
Cross Browser Sass Helpers
Best when not using Bootstrap
gem 'compass-rails'
Wednesday, February 13, 13
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Roll your own UI
hyphenation of text
static footer
easy horizontal lists
more at http://compass-style.org/
Wednesday, February 13, 13
Slide 16
Slide 16 text
Font-Awsome
Not just a clever name
MIT Licensed, Retina Ready, Awesome baked in.
Fun, application, social. Everything!
Wednesday, February 13, 13
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Font-Stack
Museo Slab
PT Sans
Fontin Sans
Ubuntu
Wednesday, February 13, 13
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Patterns add Feeling
Wednesday, February 13, 13
Slide 22
Slide 22 text
BOOSTRAP ALTERNATIVES
Zurb Foundation is the best responsive framework ever.
Wednesday, February 13, 13
Slide 23
Slide 23 text
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