bikle.com /Opinions/Tech Tips

Style your site with ZURB

Written by Dan Bikle on 2012-11-26

Usually when I think about launching a new site, I visualize the look of the site with pencil and paper. After 15 minutes or so, I add color to my idea with colored pencils. Once I have some drawings I like, I start the task of coding up HTML and CSS files.

Coding up HTML and CSS is a chore. An obvious short-cut I can take is to find existing HTML and CSS files from one of my past projects which are similar to what I want. Then I bend copies of them to my will. Another short-cut is to work with copies of other people's HTML and CSS which is both licensed for use and has a beautiful look.

Colored_pencils

ZURB

Generally though, I find that working with other people's HTML and CSS is more difficult than working with something I wrote several months or years ago. The site you are reading now, bikle.com, uses much HTML and CSS from a framework named Foundation by ZURB. I prefer to just call it ZURB. Although it is other people's code, I find it relatively easy to work with.

Bootstrap

A similar framework is Twitter Bootstrap. Or more precisely, twitter-bootstrap-rails which is integration software to connect Twitter Bootstrap with Ruby-on-Rails. Before I found ZURB, I tried using twitter-bootstrap-rails but learned to steer clear of it after I bumped into a bug which causes Rails to frequently look for favicon.ico at a non-existent route: twitter-bootstrap-rails/issues/198

I list below the general path I followed to style bikle.com, the site you are looking at now, with ZURB.

Ubuntu vs Mac

I started with an Ubuntu based development environment: Ubuntu 10.04 LTS (Lucid Lynx)

In my home office I run Ubuntu on a small desktop server I bought from: ZaReason Many of my friends do web development on Macs. I dislike web development on Macs because Apple upgrades OS/X so often. I've seen many situations where my Mac-friends are wrestling with some issue related to library incompatibilities because their copy of OS/X is too old, too new, or just hosed in some strange way. Ubuntu 10.04 LTS is nice and stable and will stay that way until 2015.

Ruby

The next step down this path is to install Ruby. My preference is to use software called RVM: https://rvm.io/ The version of Ruby I currently work with is: 1.9.3p194

Rails

After installing Ruby you want to install Rails. The version of Rails I currently work with is: 3.2.9

If Ruby is properly installed, you use a Ruby-utility named 'gem' to install Rails. The shell command is displayed below: 

ws@z3:/tmp$ gem install rails -v 3.2.9


You will find some discussion about installing Rails at this URL:
http://guides.rubyonrails.org/getting_started.html#installing-rails

With Rails 3.2.9 installed in the dev-env, you are ready to see the main ideas behind this blog post.

I used the rails-shell-command to create a Rails application: 

ws@z3:/tmp$ rails new biklecom -d sqlite3


If you are new to Rails you can read about the rails-shell-command here:
http://guides.rubyonrails.org/command_line.html#rails-new

Next, I studied this page: http://foundation.zurb.com/docs/rails.php

Gemfile

I edited my Rails-Gemfile so it looked like this: 


source 'http://rubygems.org'

gem 'rails', '3.2.9'

group :development,:test do
  gem 'sqlite3','1.3.6'
  gem 'debugger-linecache', '1.1.2'
  gem 'debugger-ruby_core_source','1.1.4'
  gem 'debugger','1.2.1'
  gem 'thin','1.4.1'
end

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
  gem 'therubyracer', :platforms => :ruby
  gem 'zurb-foundation','3.2.2'
  gem 'compass-rails','1.0.3'
end

gem 'jquery-rails'
gem 'haml','3.2.0.beta.3'
gem 'haml-rails','0.3.4'

group :production do
  gem 'pg','0.14.1'
end

What is a gem?

A gem is a software component for Ruby software. When you work with Rails you frequently encounter gems. The shell command you use to copy a gem from rubygems.org is 'gem'. Additionally, gem is a declaration in a Rails-Gemfile. So the term, gem, is used at least three different ways.

If you are new to Rails, think of the Gemfile as a list of gems which the Rails site depends upon. If the site has fewer gems that is usually better. Our intent is zippier performance and fewer pieces in the puzzle.

After I edited the Gemfile, I used a shell command to transform the human-readable Gemfile into Gemfile.lock which is something useful for the Rails framework but less human-readable: 

ws@z3:/tmp/biklecom$ bundle install --binstubs


Notice that I passed '--binstubs' option to the shell command. Many Rails developers don't use '--binstubs' but I find the result to be convenient. That option creates a directory named bin and fills it with stubs which act as useful shell commands like rake. Now, if I want to issue the rake-shell command I can do so via 'bin/rake' and I can be assured that I'm calling a rake command which is appropriate for this situation. I'm not calling an inappropriate rake which has an early position in my $PATH.

If you are new to Rails, you can read more about the bundle-shell command at this URL:
http://railscasts.com/episodes/201-bundler?view=asciicast

Database/Heroku

Next, I used shell commands to help my site find its database: 

ws@z3:/tmp/biklecom$ bin/rake db:create
ws@z3:/tmp/biklecom$ bin/rake db:migrate


If you are new to Rails, you can read more about the rake-shell command at this URL:
http://guides.rubyonrails.org/command_line.html#rake

With a new site, I try to establish database connectivity as soon as possible. If I encounter database problems I like to uncover them early in the process. With that thought in mind I worked towards deploying my new Rails site to Heroku. My intent here is to see if I encounter any database connectivity problems inside Heroku.

If you are new to Heroku, perhaps this page will help you understand how to deploy a Rails site to Heroku: https://devcenter.heroku.com/articles/git

When I deploy a Rails site to Heroku I follow this checklist:

  • Create a Rails site in my laptop or desktop
  • Commit it to a local git repo
  • Create a Heroku account via: https://api.heroku.com/signup/devcenter
  • Download the Heroku-toolbelt
  • Use the toolbelt to create a blank app on Heroku
  • Use git to push my local Rails site into the blank app
  • Use the toolbelt to connect my Rails site on Heroku to its database
  • Use a browser to see if my Rails site is up on Heroku
  • Use the toolbelt and stackoverflow.com to troubleshoot problems

After I verifed that my site was behaving well on heroku, I returned to studying this page: http://foundation.zurb.com/docs/rails.php

Rails Generator

I ran two shell commands: 

ws@z3:/tmp/biklecom$ script/rails g foundation:install
ws@z3:/tmp/biklecom$ script/rails g foundation:layout


If you are new to Rails, 'script/rails g' is a shell command I call the Rails Generator:
http://guides.rubyonrails.org/command_line.html#rails-generate

Anyway what is going on here is that the ZURB-people are asking me to install some ZURB related files into my Rails site using the Rails Generator.

The second shell command replaces the default Rails-layout with a ZURB-layout.

If you are new to Rails, the layout is a type of file (residing in a dir named "layouts") which acts like a picture frame. The content in the frame frequently changes but the frame stays the same. You see this behavior in most websites.

Next I create a 'route' in my new Rails site. If you are new to Rails, think of a route as a path you are allowed to type into the browser URL field. The route I created was this: /welcome/index

I used a Rails Generator shell command to create my route: 

ws@z3:/tmp/biklecom$ script/rails g controller welcome index


In addition to my route, the Rails Generator created a Ruby class called the WelcomeController. If you are new to Rails you can read about controllers here: http://guides.rubyonrails.org/action_controller_overview.html

I sometimes think of a controller as the 'destination' of a route. For example if I type http://ibm.com/jobs into a browser, I expect the route, /jobs, to connect my browser to some software (a controller) which has access to a database full of IBM jobs.

Rails Server

Next, I did 2 things to test this route and controller in my dev-env.

First, I started my Rails Webserver: 

ws@z3:/tmp/biklecom$ script/rails s -p 3334


Then I loaded this URL into a browser running on the same host as the Webserver

http://localhost:3334/welcome/index/


The browser rendered some HTML and the shell-window which was running the Rails Webserver on port 3334 issued no errors. Also I used view-source in the browser to verify that the layout supplied by the ZURB people was getting served to my browser from the Rails Webserver.

So, I deployed the site to Heroku and used my browser to verify that my site behaved well in that environment.

ZURB Templates

I found ZURB Templates at this URL:
http://foundation.zurb.com/templates.php

The above page suggests you download any template by pressing option/alt

I have both a standard keyboard and a laptop keyboard in front of me now. Neither has an option key. Maybe the option key is Mac-only.

Anyway, the page you are currently reading uses the 'Blog' template:
http://foundation.zurb.com/page-templates/blog.html

I used view-source in my browser to study the HTML in the above Blog-template.

I compared it to the HTML I saw in the layout-file which the Rails-generator gave me and described here:
http://foundation.zurb.com/docs/rails.php
and located in app/views/layouts/application.html.erb in my Rails installation. and also visible at this URL:
https://github.com/zurb/foundation-rails/blob/master/lib/foundation/generators/templates/application.html.erb

The code is easy to read. It is easy to see that the template consists of all HTML between the body-tags.

So I copied the template-HTML into my layout file:
http://pastie.org/5480548