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)


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 [email protected];
  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.