Posted By

BuschFunker on 04/17/13


Tagged

generate grid less calculated


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

ivorthedesigner


Ultimate grid with LESS


 / Published in: CSS
 

Let LESS generate your grid classes! Get the .loop mixin

This is now a fully grown and flexible to use grid system on github

  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  

You need to login to post a comment.