Rails 3 template. Wow!!!
Ruby JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Hampton's Shawn's Rails 3 Generator

This is a fork of Shawn's Rails 3 Templates. Shawn is the greatest front-end coder I've ever known. Flat out. And, this combines his default setup and some of my own personal preferences. This is basically a simple Rails project generator that gives you a good simple place to start.

The philosophy is not to install everything ever. I'm trying to keep the original stack thin.

Also, the other philosophy is that I built this for me. Not for you. You are welcome to use it, but no bitching about what you prefer. Feel free to fork this to your black little heart's content.


ruby ≥ 1.9.2
rails ≥ 3.0.0
haml ≥ 3.0.18
bundler ≥ 0.9.26
colored ≥ 1.2

Getting Started

Install the gem with "gem install hamgen" then run "hamgen #{app_name}" which app_name is your app name... duh!

Then it builds something I like.

Internet Explorer Support

The defaults in this project do not support anything below IE8. Instead, using conditional comments, all javascript is removed and IE 7 and below are served with the Universal IE CSS stylesheet. The content is readable and accessible in these browsers, but presented with a simpler style.

There is also meta information setup in application.html.haml to set IE8 to edge compatibility and also to check for Google Chrome Frame, if it exists.


Directory Structure

  • /sass
    • _setup.sass (START HERE!)
    • application.sass (Where all @imports are linked.)
    • /lib (Default libraries. Basically, don't touch these!)
      • _extend.sass
      • _mixins.sass
      • _reset.sass
      • _variables.sass
    • /styles (Place your project-specific Sass in these files.)
      • _common.sass
      • _extend.sass
      • _mixins.sass
      • _template.sass
      • _variables.sass

Default Variables and Mixins in Sass

The following variables $ and mixins + have been included in the project's Sass lib directory.

Cross-browser Mixins

name function
+border-radius(string) Creates rounded corners that work in modern browsers. If you wish to target less than four corners, append the position to the mixin like so:
+box-shadow(string) Creates a drop shadow that works in modern browsers.
+column-count(string) Sets the number of CSS3-style columns.
+column-gap(string) Sets the size of the gaps between CSS3-style columns.
+columns(count string, gap string) Sets both column -count and -gap in one mixin.
+opacity(integer) Sets the opacity of an entire element.
+tranform(string) Create a CSS3 transformation.
+transition(string) Create a CSS3 transition.

Font Stack Variables

name value
$geneva geneva, tahoma, "dejavu sans condensed", sans-serif
$helvetica "helvetica neue", helvetica, arial, freesans, "liberation sans", "numbus sans l", sans-serif
$lucida "lucida grande", "lucida sans unicode", lucida sans, lucida, sans-serif
$verdana verdana, "bitstream vera sans", "dejavu sans", "liberation sans", geneva, sans-serif
$georgia georgia, "bitstream charter", "century schoolbook l", "liberation serif", times, serif
$palatino palatino, "palatino linotype", palladio, "urw palladio l", "book antiqua", "liberation serif", times, serif
$times times, "times new roman", "nimbus roman no9 l", freeserif, "liberation serif", serif
$courier "courier new", courier, freemono, "nimbus mono l", "liberation mono", monospace
$monaco monaco, "lucida console", "dejavu sans mono", "bitstream vera sans mono", "liberation mono", monospace

Font Size Variables

name value
$x-small 9px
$small 11px
$medium 13px
$x-medium 17px
$large 21px
$x-large 34px
$xx-large 55px
$huge 72px
$x-huge 89px

@extend Classes

There are a number of classes contained in lib/_extend.sass that can be used in conjunction with the Sass @extend function. Please see that file for what's included.

Sass Syntax

I have been using and writing Sass since its original inception. Thus you'll notice I use the original Sass syntax and not the newer SCSS implementation.

I am not a fan of the SCSS style and will never be converting this project to it. If you'd prefer the SCSS style of writing your Sass, it should be easy enough to fork this project and convert the formatting styles. Check the SASS Documentation for more.

If you have questions or concerns, feel free to give me a shout at: hcatlin@gmail.com