Skip to content

Commit c71ac62

Browse files
thingsymthingsym
committed
perf: change grid-type from argument to global settings
1 parent c7c85cb commit c71ac62

File tree

2 files changed

+17
-23
lines changed

2 files changed

+17
-23
lines changed

‎docs/index.html‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,13 @@ <h3 class="reference">Variable Defaults (global settings)</h3>
419419
<th>Example</th>
420420
</tr>
421421
<tr>
422+
<td>$flexbox-grid-mixins-grid-type</td>
423+
<td>skeleton</td>
424+
<td>skeleton | margin-offset</td>
425+
<td>define the type of grid</td>
426+
<td class="example"><a href="example/grid-type.html"><i class="fas fa-external-link-alt"></i></a></td>
427+
</tr>
428+
<tr>
422429
<td>$flexbox-grid-mixins-box-sizing</td>
423430
<td>border-box</td>
424431
<td>null | content-box | border-box</td>
@@ -427,7 +434,7 @@ <h3 class="reference">Variable Defaults (global settings)</h3>
427434
</tr>
428435
</table>
429436

430-
<h3 class="reference"><span class="small">@include</span> <span class="big">grid</span>($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $grid-type: skeleton);</h3>
437+
<h3 class="reference"><span class="small">@include</span> <span class="big">grid</span>($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null);</h3>
431438

432439
<p>Define the grid container.</p>
433440

@@ -495,16 +502,9 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
495502
<td>define gutter. <code>null</code> is no margin of both ends of the grid. <code>&lt;percentage&gt;</code> generate a margin of both ends of the grid. <code>&lt;length&gt;</code> generate a margin of both ends of the grid (<code>&lt;length&gt;</code> is experimental stage).</td>
496503
<td class="example"><a href="example/example.html#flexbox-grid-mixins-example"><i class="fas fa-external-link-alt"></i></a> <a href="example/unit-set.html"><i class="fas fa-external-link-alt"></i></a></td>
497504
</tr>
498-
<tr>
499-
<td>$grid-type</td>
500-
<td>skeleton</td>
501-
<td>skeleton | margin-offset</td>
502-
<td>define the type of grid</td>
503-
<td class="example"><a href="example/grid-type.html"><i class="fas fa-external-link-alt"></i></a></td>
504-
</tr>
505505
</table>
506506

507-
<h3 class="reference"><span class="small">@include</span> <span class="big">grid-col</span>($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $grid-type: skeleton, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null);</h3>
507+
<h3 class="reference"><span class="small">@include</span> <span class="big">grid-col</span>($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null);</h3>
508508

509509
<p>Generate the grid columns.</p>
510510

@@ -596,13 +596,6 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
596596
<td></td>
597597
</tr>
598598
<tr>
599-
<td>$grid-type</td>
600-
<td>skeleton</td>
601-
<td>skeleton | margin-offset</td>
602-
<td>define the type of grid</td>
603-
<td class="example"><a href="example/grid-type.html"><i class="fas fa-external-link-alt"></i></a></td>
604-
</tr>
605-
<tr>
606599
<td>$last-child</td>
607600
<td>false</td>
608601
<td>&lt;boolean&gt;</td>

‎sass/_flexbox-grid-mixins.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99

1010
@charset 'utf-8';
1111

12+
$flexbox-grid-mixins-grid-type: skeleton !default;
1213
$flexbox-grid-mixins-box-sizing: border-box !default;
1314

14-
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $grid-type: skeleton)
15+
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null)
1516
{
1617
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
1718
box-sizing: $flexbox-grid-mixins-box-sizing;
@@ -42,7 +43,7 @@ $flexbox-grid-mixins-box-sizing: border-box !default;
4243
align-content: $align-content;
4344
}
4445

45-
@if $grid-type == skeleton {
46+
@if $flexbox-grid-mixins-grid-type == skeleton {
4647
@if $gutter {
4748
@include grid-margin($margin: 0 $gutter / 2 * -1);
4849
}
@@ -51,7 +52,7 @@ $flexbox-grid-mixins-box-sizing: border-box !default;
5152
@content;
5253
}
5354

54-
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $grid-type: skeleton, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
55+
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
5556
{
5657
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
5758
box-sizing: $flexbox-grid-mixins-box-sizing;
@@ -61,14 +62,14 @@ $flexbox-grid-mixins-box-sizing: border-box !default;
6162
$flex-shrink: 0;
6263
$flex-basis: percentage($col / $grid-columns);
6364

64-
@if $grid-type == skeleton {
65+
@if $flexbox-grid-mixins-grid-type == skeleton {
6566
@if $gutter and unit($gutter) == '%' {
6667
$flex-basis: $flex-basis - $gutter;
6768
} @else if $gutter and unitless($gutter) == false {
6869
$flex-basis: calc( #{$flex-basis} - #{$gutter});
6970
}
7071

71-
} @else if $grid-type == margin-offset {
72+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
7273
@if $gutter and unit($gutter) == '%' {
7374
$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
7475
} @else if $gutter and unitless($gutter) == false {
@@ -171,13 +172,13 @@ $flexbox-grid-mixins-box-sizing: border-box !default;
171172
}
172173

173174
@if $gutter and unitless($gutter) == false {
174-
@if $grid-type == skeleton {
175+
@if $flexbox-grid-mixins-grid-type == skeleton {
175176
@if type-of($condensed) == bool and $condensed == true {
176177
@include grid-col-margin($margin: 0 $gutter / 2);
177178
} @else {
178179
@include grid-col-margin($margin: 0 $gutter / 2 $gutter);
179180
}
180-
} @else if $grid-type == margin-offset {
181+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
181182
@if type-of($col) == string and $col == 'breakpoint' {
182183
@include grid-col-margin($margin-right: 0);
183184
} @else if type-of($last-child) == bool and $last-child == true {

0 commit comments

Comments
 (0)