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.
Requirements
| 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 ricogen" then run "ricogen #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.
Sass
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:
+border-radius-top-left(10px)
|
+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:
[email protected]