Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Pull request Compare This branch is 14 commits ahead, 15 commits behind hcatlin:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
templates
*CMD
.gitignore
README.md
SNIPPETS.md
init.rb

README.md

Shawn's Rails 3 Template


Requirements

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

Getting Started

Invoke the creation a new Rails application in the command line as normal, but add the -m flag followed by the path that points to the init.rb file located in this project.

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.

I also prefer prefixing the : to the start of the attribute selector as opposed to the more CSS/SCSS syntax of the colon being the suffix. This is just me being set in my ways and, in all honesty, doesn't effect the end-user functionality of the project if you choose to do otherwise.



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

Something went wrong with that request. Please try again.