pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
grid.less
(1793B)
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 @media (min-width: @screen-sm) {
10 width: @container-sm;
11 }
12 @media (min-width: @screen-md) {
13 width: @container-md;
14 }
15 @media (min-width: @screen-lg-min) {
16 width: @container-lg;
17 }
18 }
19
20 // mobile first defaults
21 .row {
22 .make-row();
23 }
24
25 // Common styles for small and large grid columns
26 .make-grid-columns();
27
28
29 // Extra small grid
30 //
31 // Columns, offsets, pushes, and pulls for extra small devices like
32 // smartphones.
33
34 .make-grid-columns-float(xs);
35 .make-grid(@grid-columns, xs, width);
36 .make-grid(@grid-columns, xs, pull);
37 .make-grid(@grid-columns, xs, push);
38 .make-grid(@grid-columns, xs, offset);
39
40
41 // Small grid
42 //
43 // Columns, offsets, pushes, and pulls for the small device range, from phones
44 // to tablets.
45
46 @media (min-width: @screen-sm-min) {
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 @media (min-width: @screen-md-min) {
60 .make-grid-columns-float(md);
61 .make-grid(@grid-columns, md, width);
62 .make-grid(@grid-columns, md, pull);
63 .make-grid(@grid-columns, md, push);
64 .make-grid(@grid-columns, md, offset);
65 }
66
67
68 // Large grid
69 //
70 // Columns, offsets, pushes, and pulls for the large desktop device range.
71
72 @media (min-width: @screen-lg-min) {
73 .make-grid-columns-float(lg);
74 .make-grid(@grid-columns, lg, width);
75 .make-grid(@grid-columns, lg, pull);
76 .make-grid(@grid-columns, lg, push);
77 .make-grid(@grid-columns, lg, offset);
78 }
79