Matteo Scandolo | 2500e39 | 2016-03-25 17:20:27 -0700 | [diff] [blame] | 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 | } |