madewithsalt / 960-Upgrade

A SASS-Based Responsive Framework that takes off from the popular 960 grid.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

=======================================
960 Upgrade is created by: Kristi Bonner
http://kristi.theresnobox.net

This framework is pretty much a frankenstein of my favorite pieces of various grid systems and schools of thought.

Based off of the work by Ethan Marcoette and his Responsive Design
And the popular 960 grid by Nathan Smith: http://960.gs/

But adapted the smart approach of Twitter's Bootstrap responsive grid, converted to SASS.

The file structure of this framework is based off of the excellent work by Jonathan Snook and his book,
Scalable and Modular Architecture for CSS: http://smacss.com/


=======================================
The goal of this framework is to:

1. Leverage the clean organized awesomeness of SASS
2. Build on top of a framework most people already know
3. Assist in taking an existing 960-designed site and 'upgrading' it to a responsive design.


=======================================
Changes to your 960 markup:

The biggest change is the abolishment of clear divs, and the adoption of 'rows'.

No more alpha and omega tagging for nested grids! No more stupid clearfix divs!

Example:
`<div class="container_12">
	<div class="row">
		<div class="grid_6">block 1><div class="grid_6">block 2</div>
	</div>
</div>
`

=======================================
Override Mixins to force fluid widths:

There's 3 override mixins available to change the default behavior of a grid cell when it reaches a certain width threshold. For example, all grids flip to 100% width below 480px wide. You can override this by adding this mixin to that div:
`
@media (max-width: 480px)
	.grid_3
		+override-half
`

Will produce:
`.grid_3 { width: 50% }`

When the browser has a width of less than 480px.

=======================================
REQUIREMENTS:

* SASS. You should have this installed and know how to use it.
http://sass-lang.com

Command-line access - so you can watch your entire SASS folder with the super-awesome command:

sass -w .:.. (or something similar)

There's also a bash script set up inside the sass folder which you can run to watch your sass files. This assumes you're saving them to a css folder on the same level as your sass folder. 

OPTIONAL:
 * Compass. A super handy SASS-based framework. Instructions on how to configure Compass with this framework in the git wiki. http://compass-style.org/



About

A SASS-Based Responsive Framework that takes off from the popular 960 grid.


Languages

Language:Shell 100.0%