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