Posted By

BuschFunker on 06/18/13

Tagged

Versions (?)

Last Edited at 06/18/13 12:27am

Statistics

Viewed 396 times

Favorited by 0 user(s)

Related snippets

Responsibly - Responsive fluid grid with LESS

/ Published in: CSS

A simple to use yet very flexible fluid grid with less.

See an example list of [responsive grid layouts](http://snipplr.com/view/73096/example-responsive-grid-layouts-for-responsibly/)

Highlighted TextExpand

/**
 * Grid requirements
 *
 * 1. Grid must be fluid so it adjusts on every viewport's content width
 * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each)
 * 3. Grid should be applicable as HTML classes and/or mixins
 * 4. You should be able to set up responsive grid layouts
 *    e.g. different amount of columns in different viewports (see requirement 2)
 * 
 * 
 * Grid specs
 * 
 * 1. We use percentage widths and spacings to cover requirement 1
 * 2. We use a negative margin row with all left margin cols to cover requirement 2
 * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-x, .offset-x, etc.
 *    Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), .col-span(x), .offset(x), etc.
 * 4. To build a responsive grid use .layout-responsive classes on your grid .rows and declare the .cols inside those layouts.
 *    Use .col-x instead of .col-span-x as logical unit inside such a layout if columns have different sizes
 * 
 * NEW
 * Use .ordered, .pull-x and .push-x to optically reposition elements while keeping the html order!
 * credit for this goes to twitter bootstrap
 *
 *
 * Hint: since everything gets calculated within mixins you could even use float numbers for grid widths ;)
 * .col-span(3.5)
 **/

/*--- base variables ---*/
@grid-fixed-width: 960px;
@grid-fixed-gutter: 20px;
@grid-max-cols: 12;

/*-- set up fluid grid ---*/
@grid-fluid-width: 100%;
@decimal-places: 3;
// used for rounding calculated numbers

// fluid gutter is calculated relatively to the static gutter in fixed grid width
@grid-fluid-gutter: round(percentage((100 / (@grid-fixed-width / @grid-fixed-gutter)) / 100), @decimal-places);

// calculate the width of one grid column
@grid-one-col: (@grid-fluid-width - (@grid-fluid-gutter * (@grid-max-cols))) / @grid-max-cols;

/*--- mixins ---*/
#grid {
	.span-width(@num: @grid-max-cols) {
		width: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
	}

.indent(@num: 0) when (@num >= 0) {
		margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num + 1)), @decimal-places);
	}

.indent(@num: -1) when (@num < 0) {
		margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
	}

.push(@num) when (@num >= 0) {
		position: relative;
		left: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
	}

.pull(@num) when (@num >= 0) {
		position: relative;
		right: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
	}

// less loop
	.loop (@index, @class: item, @mixin: '') when (@index > 0) {
		// create the actual css selector
		.@{class}-@{index} {
			#loopMixin > .apply(@mixin, @index);
		}

// next iteration
		.loop(@index - 1, @class, @mixin);
	}

// end the loop when index is 0
	.loop (@index) when (@index = 0) {
	}
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

.clearfix {
	/*
	* For IE 6/7 only
	* Include this rule to trigger hasLayout and contain floats.
	*/
	*zoom: 1;

&:before,
	&:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}

&:after {
		clear: both;
	}
}

/*--- base layout styles ---*/
.row,
.col {
	display: block;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.row {
	.clearfix();
	margin-left: -@grid-fluid-gutter;

&.ordered {
		position: relative;
	}
}

.col {
	margin-left: @grid-fluid-gutter;
	float: left;

&.spacer {
		min-height: 1px;
	}
}

// make simpler mixins available (mainly for class/mixin name consistency)
.col-span(@num: 0) when (@num >= 0) {
	#grid > .span-width(@num);
}

.offset(@num: 0) {
	#grid > .indent(@num);
}

.push(@num: 0) when (@num >= 0) {
	#grid > .push(@num);
}

.pull(@num: 0) when (@num >= 0) {
	#grid > .pull(@num);
}

/*--- generate grid classes ---*/
/**
 * Parameters:
 * 1) amount of iterations
 * 2) class selector prefix to generate
 * 3) mixin to apply to each selector
 *
 * Example:
 * .loop(12, item, 'setTabIndex');
 *
 * NOTE: you can not use the generated classes themselves as mixins!
 */

.row {
	#grid > .loop(@grid-max-cols, col-span, 'grid-span');
	#grid > .loop(@grid-max-cols - 1, offset, 'grid-offset');
	#grid > .loop(@grid-max-cols - 1, push, 'grid-push');
	#grid > .loop(@grid-max-cols - 1, pull, 'grid-pull');
}

// mixins to call inside less loop
#loopMixin {
	// base grid loops
	.apply('grid-span', @index) {
		#grid > .span-width(@index);
	}

.apply('grid-offset', @index) {
		#grid > .indent(@index);
	}

.apply('grid-push', @index) {
		#grid > .push(@index);
	}

.apply('grid-pull', @index) {
		#grid > .pull(@index);
	}
	// grid loops end
}

Report this snippet Tweet