Advanced Search

Ultimate grid with LESS

/ Published in: CSS
Save to your folder(s)
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)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*--- variables ---*/
  2. @gridMaxWidth: 960;
  3. @gridMaxCols: 16;
  4. @gutter: 20;
  5. @oneCol: (@gridMaxWidth - (@gutter * (@gridMaxCols - 1))) / @gridMaxCols;
  6.  
  7. /*--- mixins ---*/
  8. #grid {
  9. 	.span-width(@num: 1) {
  10. 		width: (@oneCol * @num) + (@gutter * (@num - 1));
  11. 	}
  12.  
  13. 	.indent(@num: 1) when (@num > 0) {
  14. 		margin-left: (@oneCol * @num) + (@gutter * (@num + 1));
  15. 	}
  16.  
  17. 	.indent(@num: 1) when (@num < 0) {
  18. 		margin-left: (@oneCol * @num) + (@gutter * (@num - 1));
  19. 	}
  20. }
  21.  
  22. /*--- base layout styles ---*/
  23. .row {
  24. 	.cf(); // clearfix
  25. 	margin: 0 0 0 -@gutter;
  26. 	padding: 0;
  27. }
  28.  
  29. .col {
  30. 	display: block;
  31. 	padding: 0;
  32. 	float: left;
  33. 	margin-left: @gutter;
  34. }
  35.  
  36. /*--- generate grid classes ---*/
  37. .loop(@gridMaxCols, span, 'gridSpan');
  38. .loop(@gridMaxCols - 1, push, 'gridPush');
  39. .loop(@gridMaxCols - 1, pull, 'gridPull');

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.