Skip to content

Commit 74a5ff3

Browse files
thingsymthingsym
committed
docs: fix items row/column alignment example
1 parent c53f4b2 commit 74a5ff3

10 files changed

+152
-83
lines changed

‎docs/dart-sass/example-margin-offset-unset.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,35 @@ $default-grid-gutter: 2%;
1010
.grid--items-row-alignment {
1111
@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
1212
> .grid__col {
13-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none);
13+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: null);
14+
}
15+
> .grid__col-auto {
16+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: auto);
1417
}
1518
> .grid__col-top {
16-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start);
19+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-start);
1720
}
1821
> .grid__col-middle {
19-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: center);
22+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: center);
2023
}
2124
> .grid__col-bottom {
22-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-end);
25+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-end);
2326
}
2427
> .grid__col-stretch {
25-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: stretch);
28+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: stretch);
2629
}
2730
> .grid__col-baseline {
28-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: baseline);
31+
@include flexbox-grid-mixins.grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: baseline);
2932
}
3033
}
3134

3235
.grid--items-column-alignment {
3336
@include flexbox-grid-mixins.grid($flex-direction: column, $gutter: $default-grid-gutter);
3437
> .grid__col {
35-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none, $width: true);
38+
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: null, $width: true);
39+
}
40+
> .grid__col-auto {
41+
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: auto, $width: true);
3642
}
3743
> .grid__col-top {
3844
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start, $width: true);

‎docs/dart-sass/example-unset.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $default-grid-gutter: 2%;
99
.grid--items-row-alignment {
1010
@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
1111
> .grid__col {
12-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none);
12+
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: null);
1313
}
1414
> .grid__col-top {
1515
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start);
@@ -31,7 +31,10 @@ $default-grid-gutter: 2%;
3131
.grid--items-column-alignment {
3232
@include flexbox-grid-mixins.grid($flex-direction: column, $gutter: $default-grid-gutter);
3333
> .grid__col {
34-
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none, $width: true);
34+
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: null, $width: true);
35+
}
36+
> .grid__col-auto {
37+
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: auto, $width: true);
3538
}
3639
> .grid__col-top {
3740
@include flexbox-grid-mixins.grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start, $width: true);

‎docs/example-dart-sass/example-margin-offset.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1263,13 +1263,17 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12631263

12641264
<div class="grid--items-row-alignment">
12651265
<div class="grid__col">
1266-
<strong>$align-self: none</strong><br>
1267-
none<br>
1268-
none<br>
1269-
none<br>
1270-
none<br>
1271-
none<br>
1272-
none<br>
1266+
<strong>$align-self: null</strong><br>
1267+
null<br>
1268+
null<br>
1269+
null<br>
1270+
null<br>
1271+
null<br>
1272+
null<br>
1273+
</div>
1274+
<div class="grid__col-auto">
1275+
<strong>$align-self: auto</strong><br>
1276+
Auto<br>
12731277
</div>
12741278
<div class="grid__col-top">
12751279
<strong>$align-self: flex-start</strong><br>
@@ -1351,13 +1355,17 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13511355

13521356
<div class="grid--items-column-alignment">
13531357
<div class="grid__col">
1354-
<strong>$align-self: none</strong><br>
1355-
none<br>
1356-
none<br>
1357-
none<br>
1358-
none<br>
1359-
none<br>
1360-
none<br>
1358+
<strong>$align-self: null</strong><br>
1359+
null<br>
1360+
null<br>
1361+
null<br>
1362+
null<br>
1363+
null<br>
1364+
null<br>
1365+
</div>
1366+
<div class="grid__col-auto">
1367+
<strong>$align-self: auto</strong><br>
1368+
Auto<br>
13611369
</div>
13621370
<div class="grid__col-top">
13631371
<strong>$align-self: flex-start</strong><br>

‎docs/example-dart-sass/example.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1264,13 +1264,17 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12641264

12651265
<div class="grid--items-row-alignment">
12661266
<div class="grid__col">
1267-
<strong>$align-self: none</strong><br>
1268-
none<br>
1269-
none<br>
1270-
none<br>
1271-
none<br>
1272-
none<br>
1273-
none<br>
1267+
<strong>$align-self: null</strong><br>
1268+
null<br>
1269+
null<br>
1270+
null<br>
1271+
null<br>
1272+
null<br>
1273+
null<br>
1274+
</div>
1275+
<div class="grid__col-auto">
1276+
<strong>$align-self: auto</strong><br>
1277+
Auto<br>
12741278
</div>
12751279
<div class="grid__col-top">
12761280
<strong>$align-self: flex-start</strong><br>
@@ -1352,13 +1356,17 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13521356

13531357
<div class="grid--items-column-alignment">
13541358
<div class="grid__col">
1355-
<strong>$align-self: none</strong><br>
1356-
none<br>
1357-
none<br>
1358-
none<br>
1359-
none<br>
1360-
none<br>
1361-
none<br>
1359+
<strong>$align-self: null</strong><br>
1360+
null<br>
1361+
null<br>
1362+
null<br>
1363+
null<br>
1364+
null<br>
1365+
null<br>
1366+
</div>
1367+
<div class="grid__col-auto">
1368+
<strong>$align-self: auto</strong><br>
1369+
Auto<br>
13621370
</div>
13631371
<div class="grid__col-top">
13641372
<strong>$align-self: flex-start</strong><br>

‎docs/example-dart-sass/test-stick-out.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1264,14 +1264,18 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12641264

12651265
<div class="grid--items-row-alignment">
12661266
<div class="grid__col">
1267-
<strong>$align-self: none</strong><br>
1267+
<strong>$align-self: null</strong><br>
12681268
hello hello hello hello<br>
12691269
hello hello hello hello<br>
12701270
hello hello hello hello<br>
12711271
hello hello hello hello<br>
12721272
hello hello hello hello<br>
12731273
hello hello hello hello<br>
12741274
</div>
1275+
<div class="grid__col-auto">
1276+
<strong>$align-self: auto</strong><br>
1277+
hello hello hello hello<br>
1278+
</div>
12751279
<div class="grid__col-top">
12761280
<strong>$align-self: flex-start</strong><br>
12771281
hello hello hello hello<br>
@@ -1352,14 +1356,18 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13521356

13531357
<div class="grid--items-column-alignment">
13541358
<div class="grid__col">
1355-
<strong>$align-self: none</strong><br>
1359+
<strong>$align-self: null</strong><br>
13561360
hello hello hello hello<br>
13571361
hello hello hello hello<br>
13581362
hello hello hello hello<br>
13591363
hello hello hello hello<br>
13601364
hello hello hello hello<br>
13611365
hello hello hello hello<br>
13621366
</div>
1367+
<div class="grid__col-auto">
1368+
<strong>$align-self: auto</strong><br>
1369+
hello hello hello hello<br>
1370+
</div>
13631371
<div class="grid__col-top">
13641372
<strong>$align-self: flex-start</strong><br>
13651373
hello hello hello hello<br>

‎docs/example/example-margin-offset.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1262,13 +1262,17 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12621262

12631263
<div class="grid--items-row-alignment">
12641264
<div class="grid__col">
1265-
<strong>$align-self: none</strong><br>
1266-
none<br>
1267-
none<br>
1268-
none<br>
1269-
none<br>
1270-
none<br>
1271-
none<br>
1265+
<strong>$align-self: null</strong><br>
1266+
null<br>
1267+
null<br>
1268+
null<br>
1269+
null<br>
1270+
null<br>
1271+
null<br>
1272+
</div>
1273+
<div class="grid__col-auto">
1274+
<strong>$align-self: auto</strong><br>
1275+
Auto<br>
12721276
</div>
12731277
<div class="grid__col-top">
12741278
<strong>$align-self: flex-start</strong><br>
@@ -1350,13 +1354,17 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13501354

13511355
<div class="grid--items-column-alignment">
13521356
<div class="grid__col">
1353-
<strong>$align-self: none</strong><br>
1354-
none<br>
1355-
none<br>
1356-
none<br>
1357-
none<br>
1358-
none<br>
1359-
none<br>
1357+
<strong>$align-self: null</strong><br>
1358+
null<br>
1359+
null<br>
1360+
null<br>
1361+
null<br>
1362+
null<br>
1363+
null<br>
1364+
</div>
1365+
<div class="grid__col-auto">
1366+
<strong>$align-self: auto</strong><br>
1367+
Auto<br>
13601368
</div>
13611369
<div class="grid__col-top">
13621370
<strong>$align-self: flex-start</strong><br>

‎docs/example/example.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1263,13 +1263,17 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12631263

12641264
<div class="grid--items-row-alignment">
12651265
<div class="grid__col">
1266-
<strong>$align-self: none</strong><br>
1267-
none<br>
1268-
none<br>
1269-
none<br>
1270-
none<br>
1271-
none<br>
1272-
none<br>
1266+
<strong>$align-self: null</strong><br>
1267+
null<br>
1268+
null<br>
1269+
null<br>
1270+
null<br>
1271+
null<br>
1272+
null<br>
1273+
</div>
1274+
<div class="grid__col-auto">
1275+
<strong>$align-self: auto</strong><br>
1276+
Auto<br>
12731277
</div>
12741278
<div class="grid__col-top">
12751279
<strong>$align-self: flex-start</strong><br>
@@ -1351,13 +1355,17 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13511355

13521356
<div class="grid--items-column-alignment">
13531357
<div class="grid__col">
1354-
<strong>$align-self: none</strong><br>
1355-
none<br>
1356-
none<br>
1357-
none<br>
1358-
none<br>
1359-
none<br>
1360-
none<br>
1358+
<strong>$align-self: null</strong><br>
1359+
null<br>
1360+
null<br>
1361+
null<br>
1362+
null<br>
1363+
null<br>
1364+
null<br>
1365+
</div>
1366+
<div class="grid__col-auto">
1367+
<strong>$align-self: auto</strong><br>
1368+
Auto<br>
13611369
</div>
13621370
<div class="grid__col-top">
13631371
<strong>$align-self: flex-start</strong><br>

‎docs/example/test-stick-out.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1263,14 +1263,18 @@ <h3 id="items-row-alignment">Items row Alignment</h3>
12631263

12641264
<div class="grid--items-row-alignment">
12651265
<div class="grid__col">
1266-
<strong>$align-self: none</strong><br>
1266+
<strong>$align-self: null</strong><br>
12671267
hello hello hello hello<br>
12681268
hello hello hello hello<br>
12691269
hello hello hello hello<br>
12701270
hello hello hello hello<br>
12711271
hello hello hello hello<br>
12721272
hello hello hello hello<br>
12731273
</div>
1274+
<div class="grid__col-auto">
1275+
<strong>$align-self: auto</strong><br>
1276+
hello hello hello hello<br>
1277+
</div>
12741278
<div class="grid__col-top">
12751279
<strong>$align-self: flex-start</strong><br>
12761280
hello hello hello hello<br>
@@ -1351,14 +1355,18 @@ <h3 id="items-column-alignment">Items column Alignment</h3>
13511355

13521356
<div class="grid--items-column-alignment">
13531357
<div class="grid__col">
1354-
<strong>$align-self: none</strong><br>
1358+
<strong>$align-self: null</strong><br>
13551359
hello hello hello hello<br>
13561360
hello hello hello hello<br>
13571361
hello hello hello hello<br>
13581362
hello hello hello hello<br>
13591363
hello hello hello hello<br>
13601364
hello hello hello hello<br>
13611365
</div>
1366+
<div class="grid__col-auto">
1367+
<strong>$align-self: auto</strong><br>
1368+
hello hello hello hello<br>
1369+
</div>
13621370
<div class="grid__col-top">
13631371
<strong>$align-self: flex-start</strong><br>
13641372
hello hello hello hello<br>

‎docs/sass/example-margin-offset.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -380,22 +380,25 @@ $flexbox-grid-mixins-stack: unset;
380380
.grid--items-row-alignment {
381381
@include grid($gutter: $default-grid-gutter);
382382
> .grid__col {
383-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none);
383+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: null);
384+
}
385+
> .grid__col-auto {
386+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: auto);
384387
}
385388
> .grid__col-top {
386-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start);
389+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-start);
387390
}
388391
> .grid__col-middle {
389-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: center);
392+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: center);
390393
}
391394
> .grid__col-bottom {
392-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-end);
395+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-end);
393396
}
394397
> .grid__col-stretch {
395-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: stretch);
398+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: stretch);
396399
}
397400
> .grid__col-baseline {
398-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: baseline);
401+
@include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: baseline);
399402
}
400403
}
401404

@@ -443,7 +446,10 @@ $flexbox-grid-mixins-stack: unset;
443446
.grid--items-column-alignment {
444447
@include grid($flex-direction: column, $gutter: $default-grid-gutter);
445448
> .grid__col {
446-
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: none, $width: true);
449+
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: null, $width: true);
450+
}
451+
> .grid__col-auto {
452+
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: auto, $width: true);
447453
}
448454
> .grid__col-top {
449455
@include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start, $width: true);

0 commit comments

Comments
 (0)