]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | Bootstap Media Breakpoints: |
2 | ||
3 | @include media-breakpoint-up(xs) { ... } | |
4 | @include media-breakpoint-up(sm) { ... } | |
5 | @include media-breakpoint-up(md) { ... } | |
6 | @include media-breakpoint-up(lg) { ... } | |
7 | @include media-breakpoint-up(xl) { ... } | |
8 | ||
9 | // Example usage: | |
10 | @include media-breakpoint-up(sm) { | |
11 | .some-class { | |
12 | display: block; | |
13 | } | |
14 | } | |
15 | ||
16 | @include media-breakpoint-down(xs) { ... } | |
17 | @include media-breakpoint-down(sm) { ... } | |
18 | @include media-breakpoint-down(md) { ... } | |
19 | @include media-breakpoint-down(lg) { ... } | |
20 | ||
21 | @include media-breakpoint-only(xs) { ... } | |
22 | @include media-breakpoint-only(sm) { ... } | |
23 | @include media-breakpoint-only(md) { ... } | |
24 | @include media-breakpoint-only(lg) { ... } | |
25 | @include media-breakpoint-only(xl) { ... } | |
26 | ||
27 | ||
28 | ||
29 | GRID | |
30 | ||
31 | $grid-columns: 12; | |
32 | $grid-gutter-width-base: 30px; | |
33 | ||
34 | $grid-gutter-widths: ( | |
35 | xs: $grid-gutter-width-base, // 30px | |
36 | sm: $grid-gutter-width-base, // 30px | |
37 | md: $grid-gutter-width-base, // 30px | |
38 | lg: $grid-gutter-width-base, // 30px | |
39 | xl: $grid-gutter-width-base // 30px | |
40 | ) | |
41 | ||
42 | $grid-breakpoints: ( | |
43 | // Extra small screen / phone | |
44 | xs: 0, | |
45 | // Small screen / phone | |
46 | sm: 576px, | |
47 | // Medium screen / tablet | |
48 | md: 768px, | |
49 | // Large screen / desktop | |
50 | lg: 992px, | |
51 | // Extra large screen / wide desktop | |
52 | xl: 1200px | |
53 | ); | |
54 | ||
55 | $container-max-widths: ( | |
56 | sm: 540px, | |
57 | md: 720px, | |
58 | lg: 960px, | |
59 | xl: 1140px | |
60 | ); | |
61 | ||
62 | // Creates a wrapper for a series of columns | |
63 | @mixin make-row($gutters: $grid-gutter-widths) { | |
64 | display: flex; | |
65 | flex-wrap: wrap; | |
66 | ||
67 | @each $breakpoint in map-keys($gutters) { | |
68 | @include media-breakpoint-up($breakpoint) { | |
69 | $gutter: map-get($gutters, $breakpoint); | |
70 | margin-right: ($gutter / -2); | |
71 | margin-left: ($gutter / -2); | |
72 | } | |
73 | } | |
74 | } | |
75 | ||
76 | // Make the element grid-ready (applying everything but the width) | |
77 | @mixin make-col-ready($gutters: $grid-gutter-widths) { | |
78 | position: relative; | |
79 | // Prevent columns from becoming too narrow when at smaller grid tiers by | |
80 | // always setting `width: 100%;`. This works because we use `flex` values | |
81 | // later on to override this initial width. | |
82 | width: 100%; | |
83 | min-height: 1px; // Prevent collapsing | |
84 | ||
85 | @each $breakpoint in map-keys($gutters) { | |
86 | @include media-breakpoint-up($breakpoint) { | |
87 | $gutter: map-get($gutters, $breakpoint); | |
88 | padding-right: ($gutter / 2); | |
89 | padding-left: ($gutter / 2); | |
90 | } | |
91 | } | |
92 | } | |
93 | ||
94 | @mixin make-col($size, $columns: $grid-columns) { | |
95 | flex: 0 0 percentage($size / $columns); | |
96 | width: percentage($size / $columns); | |
97 | // Add a `max-width` to ensure content within each column does not blow out | |
98 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari | |
99 | // do not appear to require this. | |
100 | max-width: percentage($size / $columns); | |
101 | } | |
102 | ||
103 | // Get fancy by offsetting, or changing the sort order | |
104 | @mixin make-col-offset($size, $columns: $grid-columns) { | |
105 | margin-left: percentage($size / $columns); | |
106 | } | |
107 | ||
108 | @mixin make-col-push($size, $columns: $grid-columns) { | |
109 | left: if($size > 0, percentage($size / $columns), auto); | |
110 | } | |
111 | ||
112 | @mixin make-col-pull($size, $columns: $grid-columns) { | |
113 | right: if($size > 0, percentage($size / $columns), auto); | |
114 | } | |
115 | ||
116 | .container { | |
117 | max-width: 60em; | |
118 | @include make-container(); | |
119 | } | |
120 | .row { | |
121 | @include make-row(); | |
122 | } | |
123 | .content-main { | |
124 | @include make-col-ready(); | |
125 | ||
126 | @media (max-width: 32em) { | |
127 | @include make-col(6); | |
128 | } | |
129 | @media (min-width: 32.1em) { | |
130 | @include make-col(8); | |
131 | } | |
132 | } | |
133 | .content-secondary { | |
134 | @include make-col-ready(); | |
135 | ||
136 | @media (max-width: 32em) { | |
137 | @include make-col(6); | |
138 | } | |
139 | @media (min-width: 32.1em) { | |
140 | @include make-col(4); | |
141 | } | |
1423222c S |
142 | } |
143 | ||
144 | // NAVBAR | |
145 | ||
146 | <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> | |
147 | <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
148 | <span class="navbar-toggler-icon"></span> | |
149 | </button> | |
150 | <a class="navbar-brand" href="#">Navbar</a> | |
151 | ||
152 | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
153 | <ul class="navbar-nav mr-auto"> | |
154 | <li class="nav-item active"> | |
155 | <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | |
156 | </li> | |
157 | <li class="nav-item"> | |
158 | <a class="nav-link" href="#">Link</a> | |
159 | </li> | |
160 | <li class="nav-item"> | |
161 | <a class="nav-link disabled" href="#">Disabled</a> | |
162 | </li> | |
163 | </ul> | |
164 | <form class="form-inline my-2 my-lg-0"> | |
165 | <input class="form-control mr-sm-2" type="text" placeholder="Search"> | |
166 | <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | |
167 | </form> | |
168 | </div> | |
169 | </nav> |