Installation
Singularity is a next generation grid framework built from the ground up to be responsive built for use with Sass and Compass. Below are instructions for setting up Singularity.
Singularity is a Compass extension, so you're going to need both Sass and Compass installed. If you do not already have them installed, please read Installing Sass and Compass Across All Platforms.
If you are using CodeKit, you are going to need to both follow the above linked instructions to install the actual Sass and Compass gems, as well as tell CodeKit to use those gems. To do so, open up CodeKit's preferences, go to Languages, and click on Compass. There will be an "Advanced Compiler Settings" section. Under that section, switch to "Use the Compass executable at this path:" option; a popup should open inside of /usr/bin. From there, look for compass and select that. You will now be able to use Compass extensions with CodeKit. Your CodeKit Compass settings should now look like this:
Once you have Sass and Compass installed, installing Singularity is easy Simply open up your Terminal if you're on a Mac or Unix computer, or Command Prompt with Ruby if you're on a Windows computer, and type in the following:
gem install singularitygs
If you are on an Mac or Unix computer, you may need to append that command with sudo , and then type in your password to continue. The following installation instructions must be done from the command line.
If you'd like to create a new project using Singularity, in the directory you would like to create the project, type in the following:
compass create {project name} -r singularitygs --using singularitygs
This will create a new Compass project for you with Singularity set up and ready to go.
If you plan on supporting IE6 and IE7, you are going to need to also include the Box Sizing polyfill. In the root of your project's folder, at the same level as the directory that holds your stylesheets, type the following:
compass install singularitygs/box-sizing
This will install Christian Schaefer's Box Sizing Polyfill with Suzi Arnold's PHP Wrapper to allow you to use box-sizing: border-box on IE6 and IE7, making your fluid grids awesome there too. Remember to change $legacy-support-for-ie6 and/or $legacy-support-for-ie7 to true.
If you would like to see demos of Singularity for both the Isolation and Float Output Styles, type in the following to create a new Demo project:
compass create demo -r singularitygs --using singularitygs/demos