grid-framework.less 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. // Framework grid generation
  2. //
  3. // Used only by Bootstrap to generate the correct number of grid classes given
  4. // any value of `@grid-columns`.
  5. .make-grid-columns() {
  6. // Common styles for all sizes of grid columns, widths 1-12
  7. .col(@index) { // initial
  8. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  9. .col((@index + 1), @item);
  10. }
  11. .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
  12. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  13. .col((@index + 1), ~"@{list}, @{item}");
  14. }
  15. .col(@index, @list) when (@index > @grid-columns) { // terminal
  16. @{list} {
  17. position: relative;
  18. // Prevent columns from collapsing when empty
  19. min-height: 1px;
  20. // Inner gutter via padding
  21. padding-left: (@grid-gutter-width / 2);
  22. padding-right: (@grid-gutter-width / 2);
  23. }
  24. }
  25. .col(1); // kickstart it
  26. }
  27. .float-grid-columns(@class) {
  28. .col(@index) { // initial
  29. @item: ~".col-@{class}-@{index}";
  30. .col((@index + 1), @item);
  31. }
  32. .col(@index, @list) when (@index =< @grid-columns) { // general
  33. @item: ~".col-@{class}-@{index}";
  34. .col((@index + 1), ~"@{list}, @{item}");
  35. }
  36. .col(@index, @list) when (@index > @grid-columns) { // terminal
  37. @{list} {
  38. float: left;
  39. }
  40. }
  41. .col(1); // kickstart it
  42. }
  43. .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  44. .col-@{class}-@{index} {
  45. width: percentage((@index / @grid-columns));
  46. }
  47. }
  48. .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  49. .col-@{class}-push-@{index} {
  50. left: percentage((@index / @grid-columns));
  51. }
  52. }
  53. .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  54. .col-@{class}-push-0 {
  55. left: auto;
  56. }
  57. }
  58. .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  59. .col-@{class}-pull-@{index} {
  60. right: percentage((@index / @grid-columns));
  61. }
  62. }
  63. .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  64. .col-@{class}-pull-0 {
  65. right: auto;
  66. }
  67. }
  68. .calc-grid-column(@index, @class, @type) when (@type = offset) {
  69. .col-@{class}-offset-@{index} {
  70. margin-left: percentage((@index / @grid-columns));
  71. }
  72. }
  73. // Basic looping in LESS
  74. .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  75. .calc-grid-column(@index, @class, @type);
  76. // next iteration
  77. .loop-grid-columns((@index - 1), @class, @type);
  78. }
  79. // Create grid for specific class
  80. .make-grid(@class) {
  81. .float-grid-columns(@class);
  82. .loop-grid-columns(@grid-columns, @class, width);
  83. .loop-grid-columns(@grid-columns, @class, pull);
  84. .loop-grid-columns(@grid-columns, @class, push);
  85. .loop-grid-columns(@grid-columns, @class, offset);
  86. }