grid-framework.less 2.8 KB

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