Advanced Search

Return to Snippet

Revision: 63222
at April 17, 2013 02:20 by BuschFunker
Updated Code 
/*--- variables ---*/
@gridMaxWidth: 960;
@gridMaxCols: 16;
@gutter: 20;
@oneCol: (@gridMaxWidth - (@gutter * (@gridMaxCols - 1))) / @gridMaxCols;

/*--- mixins ---*/
#grid {
	.span-width(@num: 1) {
		width: (@oneCol * @num) + (@gutter * (@num - 1));
	}

	.indent(@num: 1) when (@num > 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num + 1));
	}

	.indent(@num: 1) when (@num < 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num - 1));
	}
}

/*--- base layout styles ---*/
.row {
	.cf(); // clearfix
	margin: 0 0 0 -@gutter;
	padding: 0;
}

.col {
	display: block;
	padding: 0;
	float: left;
	margin-left: @gutter;
}

/*--- generate grid classes ---*/
.loop(@gridMaxCols, span, 'gridSpan');
.loop(@gridMaxCols - 1, push, 'gridPush');
.loop(@gridMaxCols - 1, pull, 'gridPull');

Revision: 63221
at April 17, 2013 01:54 by BuschFunker
Initial Code 
/*--- variables ---*/
@gridMaxWidth: @contentWidth;
@gridMaxCols: 16;
@gutter: @hSpacing;
@oneCol: (@gridMaxWidth - (@gutter * (@gridMaxCols - 1))) / @gridMaxCols;

/*--- mixins ---*/
#grid {
	.span-width(@num: 1) {
		width: (@oneCol * @num) + (@gutter * (@num - 1));
	}

	.indent(@num: 1) when (@num > 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num + 1));
	}

	.indent(@num: 1) when (@num < 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num - 1));
	}
}

/*--- base layout styles ---*/
.row {
	.cf(); // clearfix
	margin: 0 0 0 -@gutter;
	padding: 0;
}

.col {
	display: block;
	padding: 0;
	float: left;
	margin-left: @gutter;
}

/*--- generate grid classes ---*/
.loop(@gridMaxCols, span, 'gridSpan');
.loop(@gridMaxCols -1, push, 'gridPush');
.loop(@gridMaxCols -1, pull, 'gridPull');
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Let LESS generate your grid classes!
[Get the .loop mixin](http://snipplr.com/view/70819/less-loop-to-generate-classes/)

This is now a fully grown and flexible to use [grid system on github](https://github.com/SimonHarte/responsibly)

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Ultimate grid with LESS

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS