Skip to content

Commit 2c9f325

Browse files
dariusrosendahldariusrosendahl
authored
Merge pull request #34 from CastleCSS/develop
2.5.0
2 parents a8112f7 + a2554bb commit 2c9f325

File tree

4 files changed

+125
-157
lines changed

4 files changed

+125
-157
lines changed

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "castlecss-core",
3-
"version": "2.4.0",
3+
"version": "2.5.0",
44
"description": "CastleCSS a SCSS framework with modular building blocks for the web",
55
"main": "index.js",
66
"scripts": {

‎sass/layout/grid.scss

Lines changed: 110 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,9 @@
150150

151151
}
152152

153-
/* Grid widths */
153+
/* Grid widths
154+
12 column grid for $b0
155+
*/
154156

155157
@for $i from 1 through 12 {
156158
$width: ($i/12) * 100%;
@@ -173,204 +175,157 @@
173175

174176
.b0_push_none { margin-left: 0; }
175177

176-
// $b1
177-
@media only screen and (min-width: $b1) {
178-
179-
@for $i from 1 through 12 {
180-
$width: ($i/12) * 100%;
181-
182-
@if $i < 10 {
183-
.b1_0#{ $i } { width: $width; }
184-
185-
.b1_push_0#{ $i } { margin-left: $width; }
186-
} @else {
187-
188-
.b1_#{ $i } { width: $width; }
189-
190-
.b1_push_#{ $i } { margin-left: $width; }
191-
}
192-
}
193-
@for $i from 13 through 24 {
194-
$width: ($i/12) * 100%;
195-
}
196-
197-
.g {
198-
margin-left: -$grid-gutter-b1;
199-
200-
> * {
201-
padding-left: $grid-gutter-b1;
202-
}
203-
}
178+
/* 12 column grid for $b1 and $b2 */
179+
@for $b from 1 through 2 {
180+
$breakpoint : map-get($breakpoint-map, $b);
181+
$gutter : map-get($gutter-map, $b);
204182

205-
.b1_push_none { margin-left: 0; }
206-
207-
}
208-
209-
210-
// $b2
211-
@media only screen and (min-width: $b2) {
212-
213-
@for $i from 1 through 12 {
214-
$width: ($i/12) * 100%;
183+
@media only screen and (min-width: $breakpoint) {
184+
185+
@for $i from 1 through 12 {
186+
$width: ($i/12) * 100%;
215187

216-
@if $i < 10 {
217-
.b2_0#{ $i } { width: $width; }
188+
@if $i < 10 {
189+
.b#{$b}_0#{ $i } { width: $width; }
218190

219-
.b2_push_0#{ $i } { margin-left: $width; }
220-
} @else {
191+
.b#{$b}_push_0#{ $i } { margin-left: $width; }
192+
} @else {
221193

222-
.b2_#{ $i } { width: $width; }
194+
.b#{$b}_#{ $i } { width: $width; }
223195

224-
.b2_push_#{ $i } { margin-left: $width; }
225-
}
226-
@for $i from 13 through 24 {
227-
$width: ($i/12) * 100%;
196+
.b#{$b}_push_#{ $i } { margin-left: $width; }
197+
}
198+
@for $i from 13 through 24 {
199+
$width: ($i/12) * 100%;
200+
}
228201
}
229-
}
230202

231-
.g {
232-
margin-left: -$grid-gutter-b2;
233-
234-
> * {
235-
padding-left: $grid-gutter-b2;
203+
.g {
204+
margin-left: -#{$gutter};
205+
206+
> * {
207+
padding-left: $gutter;
208+
}
236209
}
237-
}
238210

239-
.b2_push_none { margin-left: 0; }
211+
.b#{$b}_push_none { margin-left: 0; }
240212

241-
}
213+
/* No Gutter */
214+
&.gutter-b#{$b}-none {
215+
margin-left: 0;
242216

243-
// $b3
244-
@media only screen and (min-width: $b3) {
217+
> * {
218+
padding-left: 0;
219+
}
220+
}
245221

246-
@for $i from 1 through 24 {
247-
$width: ($i/24) * 100%;
222+
/* Smaller gutter */
223+
&.gutter-b#{$b}-small {
224+
margin-left: -$grid-gutter / 2;
248225

249-
@if $i < 10 {
250-
.b3_0#{ $i } { width: $width; }
226+
> * {
227+
padding-left: $grid-gutter / 2;
228+
}
229+
}
251230

252-
.b3_push_0#{ $i } { margin-left: $width; }
253-
} @else {
254-
.b3_#{ $i } { width: $width; }
231+
/* Larger gutter */
232+
&.gutter-b#{$b}-large {
233+
margin-left: -$grid-gutter * 2;
255234

256-
.b3_push_#{ $i } { margin-left: $width; }
257-
}
258-
@for $i from 13 through 48 {
259-
$width: ($i/24) * 100%;
235+
> * {
236+
padding-left: $grid-gutter * 2;
237+
}
260238
}
261-
}
262239

263-
.g {
264-
margin-left: -$grid-gutter-b3;
265-
266-
> * {
267-
padding-left: $grid-gutter-b3;
240+
/* Normal gutter */
241+
&.gutter-b#{$b}-normal {
242+
margin-left: -$grid-gutter;
268243

244+
> * {
245+
padding-left: $grid-gutter;
246+
}
269247
}
270248
}
249+
}
271250

272-
.b3_x5 { width: 20%; }
273-
.b3_x7 { width: 14.28571428571429%; }
274-
275-
.b3_push_none { margin-left: 0; }
251+
/* 24 column grid for $b3 and higher */
252+
@for $b from 3 through $amount-breakpoints {
253+
$breakpoint : map-get($breakpoint-map, $b);
254+
$gutter : map-get($gutter-map, $b);
276255

277-
}
256+
@media only screen and (min-width: $breakpoint) {
278257

279-
// $b4
280-
@media only screen and (min-width: $b4) {
258+
@for $i from 1 through 24 {
259+
$width: ($i/24) * 100%;
281260

282-
@for $i from 1 through 24 {
283-
$width: ($i/24) * 100%;
261+
@if $i < 10 {
284262

285-
@if $i < 10 {
286-
.b4_0#{ $i } { width: $width; }
263+
.b#{$b}_0#{ $i } { width: $width; }
287264

288-
.b4_push_0#{ $i } { margin-left: $width; }
289-
} @else {
265+
.b#{$b}_push_0#{ $i } { margin-left: $width; }
266+
267+
} @else {
290268

291-
.b4_#{ $i } { width: $width; }
269+
.b#{$b}_#{ $i } { width: $width; }
292270

293-
.b4_push_#{ $i } { margin-left: $width; }
294-
}
295-
}
271+
.b#{$b}_push_#{ $i } { margin-left: $width; }
272+
}
296273

297-
.g {
298-
margin-left: -$grid-gutter-b4;
299-
300-
> * {
301-
padding-left: $grid-gutter-b4;
274+
@for $i from 13 through 48 {
275+
$width: ($i/24) * 100%;
276+
}
302277
}
303-
}
304278

305-
.b4_x5 { width: 20%; }
306-
.b4_x7 { width: 14.28571428571429%; }
279+
.g {
280+
margin-left: -#{$gutter};
281+
282+
> * {
283+
padding-left: $gutter;
307284

308-
.b4_push_none { margin-left: 0; }
285+
}
286+
}
309287

288+
.b#{$b}_x5 { width: 20%; }
289+
.b#{$b}_x7 { width: 14.28571428571429%; }
310290

311-
}
291+
.b#{$b}_push_none { margin-left: 0; }
312292

313-
// $b5
314-
@media only screen and (min-width: $b5) {
293+
/* No gutter */
294+
&.gutter-b#{$b}-none {
295+
margin-left: 0;
315296

316-
@for $i from 1 through 24 {
317-
$width: ($i/24) * 100%;
297+
> * {
298+
padding-left: 0;
299+
}
300+
}
318301

319-
@if $i < 10 {
320-
.b5_0#{ $i } { width: $width; }
302+
/* Smaller gutter */
303+
&.gutter-b#{$b}-small {
304+
margin-left: -$grid-gutter / 2;
321305

322-
.b5_push_0#{ $i } { margin-left: $width; }
323-
} @else {
306+
> * {
307+
padding-left: $grid-gutter / 2;
308+
}
309+
}
324310

325-
.b5_#{ $i } { width: $width; }
311+
/* Larger gutter */
312+
&.gutter-b#{$b}-large {
313+
margin-left: -$grid-gutter * 2;
326314

327-
.b5_push_#{ $i } { margin-left: $width; }
315+
> * {
316+
padding-left: $grid-gutter * 2;
317+
}
328318
}
329-
}
330-
331-
.g {
332-
margin-left: -$grid-gutter-b5;
333319

334-
> * {
335-
padding-left: $grid-gutter-b5;
336-
}
337-
}
338-
339-
.b5_x5 { width: 20%; }
340-
.b5_x7 { width: 14.28571428571429%; }
341-
342-
.b5_push_none { margin-left: 0; }
343-
344-
}
345-
// $b6
346-
@media only screen and (min-width: $b6) {
347-
348-
@for $i from 1 through 24 {
349-
$width: ($i/24) * 100%;
350-
351-
@if $i < 10 {
352-
.b6_0#{ $i } { width: $width; }
353-
354-
.b6_push_0#{ $i } { margin-left: $width; }
355-
} @else {
320+
/* Normal gutter */
321+
&.gutter-b#{$b}-normal {
322+
margin-left: -$grid-gutter;
356323

357-
.b6_#{ $i } { width: $width; }
358-
359-
.b6_push_#{ $i } { margin-left: $width; }
324+
> * {
325+
padding-left: $grid-gutter;
326+
}
360327
}
361-
}
362328

363-
.g {
364-
margin-left: -$grid-gutter-b6;
365-
366-
> * {
367-
padding-left: $grid-gutter-b6;
368-
}
369329
}
370-
371-
.b6_x5 { width: 20%; }
372-
.b6_x7 { width: 14.28571428571429%; }
373-
374-
.b6_push_none { margin-left: 0; }
375-
330+
376331
}

‎sass/variables.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,19 @@ $grid-gutter-b4: 16px;
100100
$grid-gutter-b5: 16px;
101101
$grid-gutter-b6: 16px;
102102

103+
/*
104+
Gutter map
105+
Must be the same amount of gutters and $gutter-map as above
106+
*/
107+
$gutter-map: (
108+
1: $grid-gutter-b1,
109+
2: $grid-gutter-b2,
110+
3: $grid-gutter-b3,
111+
4: $grid-gutter-b4,
112+
5: $grid-gutter-b5,
113+
6: $grid-gutter-b6,
114+
);
115+
103116
/*
104117
Default margin and padding
105118
*/

0 commit comments

Comments
 (0)