Skip to content

timpotter/bass-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Bass Grid

##Development is happening on the dev-flexbox branch I'm working towards a v2.0 release, with the grid rebuilt using Flexbox. Other updates include, better nesting of child columns and auto-generation of columns based on the $columns variable.

###A smart, lightweight responsive grid, built with Sass.

alt text

Install

###Manually Download the latest release and copy the bass-grid.scss file over to your project.

###Bower

$ bower install timpotter/bass-grid

Usage

Bass uses the power of Sass to calculate flexible column widths and layouts based on the following customisable variables.

$base-width: 100%; 				// Best to leave this at 100%

$columns: 12; 					// Number of columns. 12 is used as default it's easily divisible, but you could also have 16, 24 etc

$base: $base-width/$columns; 	// Calculates single column width - 100% / 12 = 8.33333%

$gutter: 2%; 					// Space between columns (Must be a percentage)

$breakpoint: 640px; 			// Point to snap to single column layout

$container-width: 960px; 		// Sets the width of the container if needed

Want to change the number of columns or the breakpoint? Simply amend these values and using a Sass pre-processor, compile bass-grid.scss:bass-grid.css.

About

A smart, lightweight responsive grid, built with Sass

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages