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. Singularity 2.1.x requires Sass 3.2.x and Compass 0.12.x and is incompatible with Sass 3.3.x.
It is HIGHLY RECOMMENDED that you run all Sass and Compass commands through Bundler
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:
**BE AWARE that CodeKit and most other GUI compilers do not support Bundler and are therefore NOT RECOMMENDED **
The preferred way to install and use Singularity is through Bundler. To do so, add the following to your Gemfile (Sass and Compass are provided to ensure the correct versions are used):
gem "sass", "~>3.2.0"
gem "compass", "~>0.12.0"
gem "singularitygs", "~>1.1.2"Once you have done so, run bundle install to install your dependencies, and remember to run all of your compilation through bundle exec.
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 already have a project made and you'd like to use Singularity with it, add the following to your config.rb file:
require 'singularitygs'
Then, add the following to your Sass file towards the top:
@import "singularitygs";
If you would like to use grid-toggle to visualize your grids, you will need to download the grid.js file separately from here.
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 sgs-demos -r singularitygs --using singularitygs/demos
If, for some reason, you'd like to stay on Singularity 0.x, you are going to need to install and configure Bundler. If you are going to be using Bundler, be sure to include all Compass Extensions and the versions you'd like to stay at in order to have them all available. Your Gemfile including Singularity could look something like the following:
gem 'singularitygs', '~>0.0.17'Once you've set up your Gemfile, run bundle install to install the Gem versions and lock in the dependencies. Then, to compile your Sass, instead of running compass watch, you'd run bundle exec compass watch, which will run Compass Watch using only the gems that are locked in.