Skip to content
This repository
Browse code

Reformat breakpoint() examples in the README

  • Loading branch information...
commit 890365a2f427ffad47887696c81ea8687a736346 1 parent 064447b
Reda Lemeden kaishin authored

Showing 1 changed file with 70 additions and 74 deletions. Show diff stats Hide diff stats

  1. +70 74 README.md
144 README.md
Source Rendered
@@ -71,7 +71,7 @@ Likewise for inline-block:
71 71 @include span-columns(6 of 8, inline-block)
72 72
73 73 The following syntaxes would also work:
74   -
  74 +
75 75 @include span-columns(6 / 8,inline-block);
76 76 @include span-columns(6 8,inline-block);
77 77
@@ -125,107 +125,105 @@ You can also use ```nth-omega``` to remove the gutter of a specific column or se
125 125 This makes sure that the child fills 100% of its parent:
126 126
127 127 @include fill-parent;
128   -
  128 +
129 129 ### Breakpoints
130 130
131 131 The ```breakpoint()``` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
132 132
133 133 @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
134   -
  134 +
135 135 * ```query``` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, ```min-width``` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
136 136 * ```total-columns``` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the ```span-column``` mixin.
137 137
138   -Examples:
  138 +##### Example 1
  139 +
  140 + .my-class {
  141 + @include breakpoint(481px) {
  142 + font-size: 1.2em;
  143 + }
  144 + }
139 145
140   - // === Example 1
141   -
  146 + // Compiled CSS
  147 +
  148 + @media screen and (min-width: 481px) {
142 149 .my-class {
143   - @include breakpoint(481px) {
144   - font-size: 1.2em;
145   - }
  150 + font-size: 1.2em;
146 151 }
147   -
148   - // Compiled CSS
149   -
150   - @media screen and (min-width: 481px) {
151   - .my-class {
152   - font-size: 1.2em;
153   - }
  152 + }
  153 +
  154 +##### Example 2
  155 +
  156 + .my-class {
  157 + @include breakpoint(max-width 769px) {
  158 + float: none;
154 159 }
155   -
156   - // === Example 2
  160 + }
  161 +
  162 + // Compiled CSS
157 163
  164 + @media screen and (max-width: 769px) {
158 165 .my-class {
159   - @include breakpoint(max-width 769px) {
160   - float: none;
161   - }
  166 + float: none;
162 167 }
163   -
164   - // Compiled CSS
165   -
166   - @media screen and (max-width: 769px) {
167   - .my-class {
168   - float: none;
169   - }
  168 + }
  169 +
  170 +##### Example 3
  171 +
  172 + .my-class {
  173 + @include breakpoint(max-width 769px) {
  174 + @include span-columns(6);
170 175 }
171   -
172   - // === Example 3
173   -
  176 + }
  177 +
  178 + // Compiled CSS
  179 +
  180 + @media screen and (max-width: 769px) {
174 181 .my-class {
175   - @include breakpoint(max-width 769px) {
176   - @include span-columns(6);
177   - }
  182 + display: block;
  183 + float: left;
  184 + margin-right: 2.35765%;
  185 + width: 48.82117%; // That's 6 columns of the total 12
  186 + }
  187 +
  188 + .my-class:last-child {
  189 + margin-right: 0;
178 190 }
179   -
180   - // Compiled CSS
181   -
182   - @media screen and (max-width: 769px) {
183   - .my-class {
184   - display: block;
185   - float: left;
186   - margin-right: 2.35765%;
187   - width: 48.82117%; // That's 6 columns of the total 12
188   - }
189   -
190   - .my-class:last-child {
191   - margin-right: 0;
192   - }
  191 + }
  192 +
  193 +##### Example 4
  194 +
  195 + .my-class {
  196 + @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
  197 + @include span-columns(6);
193 198 }
194   -
195   - // === Example 4
196   -
  199 + }
  200 +
  201 + // Compiled CSS
  202 +
  203 + @media screen and (max-width: 769px) {
197 204 .my-class {
198   - @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
199   - @include span-columns(6);
200   - }
  205 + display: block;
  206 + float: left;
  207 + margin-right: 4.82916%;
  208 + width: 100%; // That's 6 columns of the total 6 specified for this media query
201 209 }
202   -
203   - // Compiled CSS
204   -
205   - @media screen and (max-width: 769px) {
206   - .my-class {
207   - display: block;
208   - float: left;
209   - margin-right: 4.82916%;
210   - width: 100%; // That's 6 columns of the total 6 specified for this media query
211   - }
212   - .my-class:last-child {
213   - margin-right: 0;
214   - }
  210 + .my-class:last-child {
  211 + margin-right: 0;
215 212 }
216   -
  213 + }
  214 +
217 215 For convenience, you can create a list variable to hold your media context (breakpoint/column-count) and use it throughout your code:
218 216
219 217 $mobile: max-width 480px 4; // Use a 4 column grid in mobile devices (requires all three arguments to work)
220   -
  218 +
221 219 .my-class {
222 220 @include breakpoint($mobile) {
223 221 @include span-columns(2);
224 222 }
225 223 }
226   -
  224 +
227 225 // Compiled CSS
228   -
  226 +
229 227 @media screen and (max-width: 480px) {
230 228 .my-class {
231 229 display: block;
@@ -246,13 +244,11 @@ Here is a summary of possible argument combinations:
246 244 @include breakpoint(480px, 4);
247 245 @include breakpoint(max-width 480px, 4);
248 246 @include breakpoint(max-width 480px 4); // Shorthand syntax
249   -
  247 +
250 248 // NAY
251 249 @include breakpoint(480px 4);
252 250 @include breakpoint(max-width 4);
253 251 @include breakpoint(max-width, 4);
254   -
255   -
256 252
257 253
258 254 ### Changing the defaults

0 comments on commit 890365a

Please sign in to comment.
Something went wrong with that request. Please try again.