Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Grid system | |
3 | // -------------------------------------------------- | |
4 | ||
5 | // Set the container width, and override it for fixed navbars in media queries | |
6 | .container { | |
7 | .container-fixed(); | |
8 | } | |
9 | ||
10 | // mobile first defaults | |
11 | .row { | |
12 | .make-row(); | |
13 | } | |
14 | ||
15 | // Common styles for small and large grid columns | |
16 | .make-grid-columns(); | |
17 | ||
18 | ||
19 | // Extra small grid | |
20 | // | |
21 | // Grid classes for extra small devices like smartphones. No offset, push, or | |
22 | // pull classes are present here due to the size of the target. | |
23 | // | |
24 | // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since | |
25 | // it's full-width. | |
26 | ||
27 | .make-grid-columns-float(xs); | |
28 | .make-grid(@grid-columns, xs, width); | |
29 | .make-grid(@grid-columns, xs, pull); | |
30 | .make-grid(@grid-columns, xs, push); | |
31 | .make-grid(@grid-columns, xs, offset); | |
32 | ||
33 | ||
34 | // Small grid | |
35 | // | |
36 | // Columns, offsets, pushes, and pulls for the small device range, from phones | |
37 | // to tablets. | |
38 | // | |
39 | // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since | |
40 | // it's full-width. | |
41 | ||
42 | @media (min-width: @screen-sm-min) { | |
43 | .container { | |
44 | width: @container-sm; | |
45 | } | |
46 | ||
47 | .make-grid-columns-float(sm); | |
48 | .make-grid(@grid-columns, sm, width); | |
49 | .make-grid(@grid-columns, sm, pull); | |
50 | .make-grid(@grid-columns, sm, push); | |
51 | .make-grid(@grid-columns, sm, offset); | |
52 | } | |
53 | ||
54 | ||
55 | // Medium grid | |
56 | // | |
57 | // Columns, offsets, pushes, and pulls for the desktop device range. | |
58 | // | |
59 | // Note that `.col-md-12` doesn't get floated on purpose--there's no need since | |
60 | // it's full-width. | |
61 | ||
62 | @media (min-width: @screen-md-min) { | |
63 | .container { | |
64 | width: @container-md; | |
65 | } | |
66 | ||
67 | .make-grid-columns-float(md); | |
68 | .make-grid(@grid-columns, md, width); | |
69 | .make-grid(@grid-columns, md, pull); | |
70 | .make-grid(@grid-columns, md, push); | |
71 | .make-grid(@grid-columns, md, offset); | |
72 | } | |
73 | ||
74 | ||
75 | // Large grid | |
76 | // | |
77 | // Columns, offsets, pushes, and pulls for the large desktop device range. | |
78 | // | |
79 | // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since | |
80 | // it's full-width. | |
81 | ||
82 | @media (min-width: @screen-lg-min) { | |
83 | .container { | |
84 | width: @container-lg; | |
85 | } | |
86 | ||
87 | .make-grid-columns-float(lg); | |
88 | .make-grid(@grid-columns, lg, width); | |
89 | .make-grid(@grid-columns, lg, pull); | |
90 | .make-grid(@grid-columns, lg, push); | |
91 | .make-grid(@grid-columns, lg, offset); | |
92 | } | |
93 |