A basic SASS baseline to start projects with. Really simple.
- Reset (Based on Eric Meyer's but modified to include HTML5 elements)
- Base (basic html + typography)
- Lists
- Tables
- Form Elements
- Some Variables & Mixins
- Responsive 960 grid (Based on Skeleton.gs)
- @font-face - ALL CODE IS COMMENTED OUT HERE, REMOVE IF YOU WILL NOT USE
- screen.css file to see what is output - (DO NOT EDIT OR SASS WILL OVERWRITE)
cd /path-to-stylesheets
git clone git@github.com:michaelparenteau/bassline.git
gem install sass
sass --watch stylesheets/bassline:stylesheets
NOTE:
-
Make sure you define the _variables.sass file to your liking.
-
Be sure to look at the _mixins.sass file for what is available. This will change as time goes on.
-
Do NOT edit the screen.css file. When you
sass --watch stylesheets/bassline:stylesheetsthis will override the file with sass changes -
Use
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>in head for mobile content scaling -
Use html5shiv for adding html5 elements to the DOM
-
To output different styles of css file (ie: dev, production, or preffered formatting):
// there are 4 types of output: nested, expanded, compact, compressed sass --watch stylesheets/bassline:stylesheets -t [output-style-here-minus-square-brackets]
- For more info on SASS - http://sass-lang.com/
- For a more complete SASS Framework - http://compass-style.org/
Bassline is a work in progress. It is good enough to start with for me & also allows for me to learn more about SASS. It is not a competitor or replacement of compass! Compass is a very thorough framework. Bassline will change as I learn more. If you have good suggestions and would like to share them, please do!
Big thanks to the following for the following...
- Eric Meyer - for an awesome starting reset
- Dave Gamache - for Skeleton.gs & for the basic grid base
- Baseline Grid - for great insight into basic html/css frameworks (with typography in mind), bassline employs much of what they have in their framework.