Posted By

terrencewood on 12/20/10

Tagged

Versions (?)

Last Edited at 12/20/10 10:32am

Statistics

Viewed 558 times

Favorited by 1 user(s)

Related snippets

GS - A less implementation of 960gs that allows for asymmetric columns

/ Published in: CSS

Highlighted TextExpand

/**
 * GS
 * A less implementation of 960gs that allows for asymmetric columns
 *
 * @author Terrence Wood <firstname dot lastname at funkive dot com>
 *
 * Define the width, gutter and number of columns in your main less file before importing this file
 * <code>
 *	@gs_width: 960px;
 *	@gs_gutter: 20px;
 *	@gs_columns: 12;
 *	@import 'gridsystem';
 * </code>
 *
 */

/**
 * Container width
 * 
 * @param {int unit} margin-left the width and unit (px, em, etc)  of the left margin
 * @param {int unit} margin-right the width and unit (px, em, etc)  of the right margin
 * @var int gs_width the document width
 *
 */
.gs_container(@margin-left: auto, @margin-right: auto) {
    margin-left:@margin-left;
    margin-right:@margin-right;
    width: @gs_width;
}

/**
 * Create a column
 * 
 * @param int col dummy to prevent this class from appearing in the css file
 *
 */
.gs_column(@col: 0) {
    display: inline;
    float: left;
    position: relative;
}

/**
 * Calculate a column width
 *
 * @method Calculates a column width from variables defined in the main less file
 * @var int gs_width the document width
 * @var int gs_gutter the gutter width
 * @var int gs_columns the number of columns
 *
 */

@gs_column_width: (@gs_width - @gs_gutter * @gs_columns) / @gs_columns;

/**
 * Create a grid column
 * 
 * @param int col the number of columns to span
 * @param int variance the number of pixels to add to this column instance
 *
 */
.gs_grid(@col: 0, @variance: 0) {
	.gs_column;
    width: (@gs_column_width + ((@col - 1) * (@gs_column_width + @gs_gutter))) + @variance;
}

/**
 * Add left and right margins to a grid column
 * Use with grid columns
 *
 * @param {int unit} the margin width and unit (px, em, etc) to use
 * <code>
 * #selector {
 *	  .gs_grid(n);
 *	  .gs_margins; // normal column with equal left & right margins
 * 	  .nestedselectorfirst{
 *		  .gs_grid(n-x);
 *		  .gs_margin_right; // alpha
 * 	  }
 * 	  .nestedselectormiddle{
 *		  .gs_grid(n-y);
 *		  .gs_margins; // normal column with equal left & right margins
 * 	  }
 * 	  .nestedselectorlast{
 *		  .gs_grid(n-z);
 *		  .gs_margin_left; // omega
 * 	  }
 * }
 * </code>
 * 
 */
.gs_margins(@margin: @gs_gutter/2) {
	margin-left: @margin;
	margin-right: @margin;
}

/**
 * Add right margin only to a grid column
 * Use on the first nested grid column (equivalent to 960gs .alpha)
 * @see .gs_margins;
 *
 */
.gs_margin_right(@margin: @gs_gutter/2) {
	margin-left: 0;
	margin-right: @margin;
	
}

/**
 * Add left margin only to a grid column
 * Use on the last nested grid column (equivalent to 960gs .omega);
 * @see .gs_margins;
 *
 */
.gs_margin_left(@margin: @gs_gutter/2) {
	margin-left: @margin;
	margin-right: 0;
}

/**
 * Add left padding to a grid column
 *
 * @param int col the number of columns to pad
 *
 */
.gs_prefix(@col: 0) {
    padding-left: (@col) * (@gs_column_width + @gs_gutter);
}

/**
 * Add right padding to a grid column
 *
 * @param int col the number of columns to pad
 *
 */
.gs_suffix(@col: 0) {
    padding-right: (@col) * (@gs_column_width + @gs_gutter);
}

/**
 * Push a grid column to the right
 *
 * @param int col the number of columns to push
 * @var int gs_column_width the calculated column width
 * @var int gs_gutter the gutter width defined in the main less file
 * @see gs_column_width
 *
 */
.gs_push(@col: 0) {
    left: (@col) * (@gs_column_width + @gs_gutter);
}

/**
 * Pull a grid column to the left
 *
 * @param int col the number of columns to pull
 * @var int gs_column_width the calculated column width
 * @var int gs_gutter the gutter width defined in the main less file
 * @see gs_column_width
 *
 */
.gs_pull(@col: 0) {
    right: (@col) * (@gs_column_width + @gs_gutter);
}

/**
 * Clear floated child elements where the child's boundaries
 * are outside the parent's boundaries. Use 'overflow:hidden' otherwise.
 *
 * @param int height dummy to prevent this class from appearing in the css file
 *
 */
.gs_clear(@height: 0) {
	min-height:@height;
	_height:@height;
	&:after {
		clear:both;
		content:"\200B";
		display:block;
		height:@height;
	}
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.