|
1 // |
|
2 // Grid system |
|
3 // -------------------------------------------------- |
|
4 |
|
5 |
|
6 // Container widths |
|
7 // |
|
8 // Set the container width, and override it for fixed navbars in media queries. |
|
9 |
|
10 .container { |
|
11 @include container-fixed; |
|
12 |
|
13 @media (min-width: $screen-sm-min) { |
|
14 width: $container-sm; |
|
15 } |
|
16 @media (min-width: $screen-md-min) { |
|
17 width: $container-md; |
|
18 } |
|
19 @media (min-width: $screen-lg-min) { |
|
20 width: $container-lg; |
|
21 } |
|
22 } |
|
23 |
|
24 |
|
25 // Fluid container |
|
26 // |
|
27 // Utilizes the mixin meant for fixed width containers, but without any defined |
|
28 // width for fluid, full width layouts. |
|
29 |
|
30 .container-fluid { |
|
31 @include container-fixed; |
|
32 } |
|
33 |
|
34 |
|
35 // Row |
|
36 // |
|
37 // Rows contain and clear the floats of your columns. |
|
38 |
|
39 .row { |
|
40 @include make-row; |
|
41 } |
|
42 |
|
43 |
|
44 // Columns |
|
45 // |
|
46 // Common styles for small and large grid columns |
|
47 |
|
48 @include make-grid-columns; |
|
49 |
|
50 |
|
51 // Extra small grid |
|
52 // |
|
53 // Columns, offsets, pushes, and pulls for extra small devices like |
|
54 // smartphones. |
|
55 |
|
56 @include make-grid(xs); |
|
57 |
|
58 |
|
59 // Small grid |
|
60 // |
|
61 // Columns, offsets, pushes, and pulls for the small device range, from phones |
|
62 // to tablets. |
|
63 |
|
64 @media (min-width: $screen-sm-min) { |
|
65 @include make-grid(sm); |
|
66 } |
|
67 |
|
68 |
|
69 // Medium grid |
|
70 // |
|
71 // Columns, offsets, pushes, and pulls for the desktop device range. |
|
72 |
|
73 @media (min-width: $screen-md-min) { |
|
74 @include make-grid(md); |
|
75 } |
|
76 |
|
77 |
|
78 // Large grid |
|
79 // |
|
80 // Columns, offsets, pushes, and pulls for the large desktop device range. |
|
81 |
|
82 @media (min-width: $screen-lg-min) { |
|
83 @include make-grid(lg); |
|
84 } |