bikle.com
/Opinions/Tech Tips

Style your site with ZURB

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.

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.

Linux vs Mac

In my home office I run CentOS on a small desktop server I bought from:
ZaReason

Many of my friends do web development on Macs.
Although I respect Apple technology,
I dislike web development on Macs because
Apple upgrades OS/X so often. I've seen situations where my Mac-friends are wrestling
with library incompatibilities because their copy of OS/X is too old,
too new, or just hosed in some strange way.
CentOS 6.x is stable and is intended to stay useful until November of 2020.

Also OS/X is not at parity with the production OS which is usually Linux.
I look like a clueless developer if I check in code which passes tests on my Mac
but then "breaks the build" in the Linux production environment.
My Mac-friends who want dev-production-parity, make use of software called Virtualbox (and VMware also) to
build Rails sites on Linux running on their Macs:

Answer: 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.
On the other hand, gems allow me to extend the abilities of my sites using reusable blocks of code
written by developers who have more time and/or talent than I have.

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:

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 html2haml.

Note that in Rails 4, the bin directory is already there and populated with three files: bundle, rails, rake.
I prefer those files to reside in a directory named scripts so I move them to scripts before I run bundle install.
Now, if I want to issue the html2haml-shell command I can do so via 'bin/html2haml' and I can
be assured that I'm calling a command which is appropriate for this situation.
I'm not calling an inappropriate command which has an early position in my $PATH.

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.

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.

One of the files is the 'layout':

app/views/layouts/application.html.erb

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

Next I created 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: /blog/index

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.

After I generated both the route and controller, I created a layout for them with a simple shell command:

Rails Server

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

http://localhost:3334/blog/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.

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

In order to use this template in my Rails site, I needed to categorize HTML in the template into two types.
The first type of HTML is used to render content which is relatively static.
For example, the links across the top of this page are relatively static.
Often content like this does not change when you navigate to various pages in a site.
I see this type of content as being like a picture frame.
The second type of HTML is used to render content which is relatively dynamic.
For example the sentence you are reading now is relatively dynamic since you would
expect it to change if you navigated to another page in bikle.com.

As a Rails developer I put relatively static HTML in a layout file.
The layout file for the page you are currently reading resides at this location:
app/views/layouts/blog.html.erb

And the file which contains the dynamic content you are currently reading is in
this directory: app/views/blog/

Question: How is blog.html.erb related to application.html.erb?

Answer: blog.html.erb is the layout file for the blog controller. application.html.erb is the default layout file for any controller which has no layout file.
So, if bikle.com is a simple site with one controller, I could remove blog.html.erb and place all my layout-syntax in application.html.erb.

Question: How does Rails combine the static and dynamic content so that it
appears as a single page in your browser?

Answer: I sprinkle lines of ERB syntax at various locations
in the static content which tells
Rails, "Put some dynamic content here."

Question: Why is Rails designed this way?

Answer: Only the static content "knows" the relative locations of
elements which make up the single page served to the browser.

CSS

According to the Zurb documentation, I should see a file named scss/app.scss

The Rails-Zurb-generator failed to install it
so I used the app/assets/stylesheets/blog.css.scss
file to enhance the CSS.
Rails had created this file when I generated the blog-controller.

I consider the default Zurb-font to be too small.
Also I inspected it with Firebug and found it to be
'#222222' which is dark-grey.
I added these lines to blog.css.scss:

Categories

Featured

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.