diff --git a/package-lock.json b/package-lock.json index 80f3c1f..253703d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { "name": "castlecss-core", - "version": "2.4.0", + "version": "2.5.0", "lockfileVersion": 1 } diff --git a/package.json b/package.json index c63ffa9..c2d0e54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "castlecss-core", - "version": "2.4.0", + "version": "2.5.0", "description": "CastleCSS a SCSS framework with modular building blocks for the web", "main": "index.js", "scripts": { diff --git a/sass/layout/grid.scss b/sass/layout/grid.scss index b6a6376..1865263 100644 --- a/sass/layout/grid.scss +++ b/sass/layout/grid.scss @@ -150,7 +150,9 @@ } -/* Grid widths */ +/* Grid widths + 12 column grid for $b0 +*/ @for $i from 1 through 12 { $width: ($i/12) * 100%; @@ -173,204 +175,85 @@ .b0_push_none { margin-left: 0; } -// $b1 -@media only screen and (min-width: $b1) { - - @for $i from 1 through 12 { - $width: ($i/12) * 100%; - - @if $i < 10 { - .b1_0#{ $i } { width: $width; } - - .b1_push_0#{ $i } { margin-left: $width; } - } @else { - - .b1_#{ $i } { width: $width; } - - .b1_push_#{ $i } { margin-left: $width; } - } - } - @for $i from 13 through 24 { - $width: ($i/12) * 100%; - } - - .g { - margin-left: -$grid-gutter-b1; - - > * { - padding-left: $grid-gutter-b1; - } - } +/* 12 column grid for $b1 and $b2 */ +@for $b from 1 through 2 { + $breakpoint : map-get($breakpoint-map, $b); + $gutter : map-get($gutter-map, $b); - .b1_push_none { margin-left: 0; } - -} - - -// $b2 -@media only screen and (min-width: $b2) { - - @for $i from 1 through 12 { - $width: ($i/12) * 100%; - - @if $i < 10 { - .b2_0#{ $i } { width: $width; } - - .b2_push_0#{ $i } { margin-left: $width; } - } @else { - - .b2_#{ $i } { width: $width; } - - .b2_push_#{ $i } { margin-left: $width; } - } - @for $i from 13 through 24 { + @media only screen and (min-width: $breakpoint) { + + @for $i from 1 through 12 { $width: ($i/12) * 100%; - } - } - - .g { - margin-left: -$grid-gutter-b2; - - > * { - padding-left: $grid-gutter-b2; - } - } - .b2_push_none { margin-left: 0; } + @if $i < 10 { + .b#{$b}_0#{ $i } { width: $width; } -} + .b#{$b}_push_0#{ $i } { margin-left: $width; } + } @else { -// $b3 -@media only screen and (min-width: $b3) { - - @for $i from 1 through 24 { - $width: ($i/24) * 100%; - - @if $i < 10 { - .b3_0#{ $i } { width: $width; } - - .b3_push_0#{ $i } { margin-left: $width; } - } @else { - .b3_#{ $i } { width: $width; } - - .b3_push_#{ $i } { margin-left: $width; } - } - @for $i from 13 through 48 { - $width: ($i/24) * 100%; - } - } - - .g { - margin-left: -$grid-gutter-b3; - - > * { - padding-left: $grid-gutter-b3; + .b#{$b}_#{ $i } { width: $width; } + .b#{$b}_push_#{ $i } { margin-left: $width; } + } + @for $i from 13 through 24 { + $width: ($i/12) * 100%; + } } - } - - .b3_x5 { width: 20%; } - .b3_x7 { width: 14.28571428571429%; } - - .b3_push_none { margin-left: 0; } - -} - -// $b4 -@media only screen and (min-width: $b4) { - - @for $i from 1 through 24 { - $width: ($i/24) * 100%; - - @if $i < 10 { - .b4_0#{ $i } { width: $width; } - .b4_push_0#{ $i } { margin-left: $width; } - } @else { - - .b4_#{ $i } { width: $width; } - - .b4_push_#{ $i } { margin-left: $width; } + .g { + margin-left: -#{$gutter}; + + > * { + padding-left: $gutter; + } } - } - .g { - margin-left: -$grid-gutter-b4; - - > * { - padding-left: $grid-gutter-b4; - } + .b#{$b}_push_none { margin-left: 0; } } - - .b4_x5 { width: 20%; } - .b4_x7 { width: 14.28571428571429%; } - - .b4_push_none { margin-left: 0; } - - } -// $b5 -@media only screen and (min-width: $b5) { +/* 24 column grid for $b3 and higher */ +@for $b from 3 through $amount-breakpoints { + $breakpoint : map-get($breakpoint-map, $b); + $gutter : map-get($gutter-map, $b); + + @media only screen and (min-width: $breakpoint) { @for $i from 1 through 24 { $width: ($i/24) * 100%; @if $i < 10 { - .b5_0#{ $i } { width: $width; } - .b5_push_0#{ $i } { margin-left: $width; } + .b#{$b}_0#{ $i } { width: $width; } + + .b#{$b}_push_0#{ $i } { margin-left: $width; } + } @else { - .b5_#{ $i } { width: $width; } + .b#{$b}_#{ $i } { width: $width; } - .b5_push_#{ $i } { margin-left: $width; } - } - } - - .g { - margin-left: -$grid-gutter-b5; - - > * { - padding-left: $grid-gutter-b5; + .b#{$b}_push_#{ $i } { margin-left: $width; } } - } - - .b5_x5 { width: 20%; } - .b5_x7 { width: 14.28571428571429%; } - - .b5_push_none { margin-left: 0; } - -} -// $b6 -@media only screen and (min-width: $b6) { - @for $i from 1 through 24 { - $width: ($i/24) * 100%; - - @if $i < 10 { - .b6_0#{ $i } { width: $width; } - - .b6_push_0#{ $i } { margin-left: $width; } - } @else { - - .b6_#{ $i } { width: $width; } - - .b6_push_#{ $i } { margin-left: $width; } + @for $i from 13 through 48 { + $width: ($i/24) * 100%; } } .g { - margin-left: -$grid-gutter-b6; + margin-left: -#{$gutter}; > * { - padding-left: $grid-gutter-b6; + padding-left: $gutter; + } } - .b6_x5 { width: 20%; } - .b6_x7 { width: 14.28571428571429%; } + .b#{$b}_x5 { width: 20%; } + .b#{$b}_x7 { width: 14.28571428571429%; } - .b6_push_none { margin-left: 0; } + .b#{$b}_push_none { margin-left: 0; } + } + } \ No newline at end of file diff --git a/sass/variables.scss b/sass/variables.scss index 885c274..2e7449b 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -100,6 +100,19 @@ $grid-gutter-b4: 16px; $grid-gutter-b5: 16px; $grid-gutter-b6: 16px; +/* + Gutter map + Must be the same amount of gutters and $gutter-map as above +*/ +$gutter-map: ( + 1: $grid-gutter-b1, + 2: $grid-gutter-b2, + 3: $grid-gutter-b3, + 4: $grid-gutter-b4, + 5: $grid-gutter-b5, + 6: $grid-gutter-b6, +); + /* Default margin and padding */