Skip to content

Commit c53f4b2

Browse files
thingsymthingsym
committed
docs: add auto margin example
1 parent be26193 commit c53f4b2

14 files changed

+314
-208
lines changed

‎docs/dart-sass/auto-margin.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@use '../../dart-sass/flexbox-grid-mixins';
2+
3+
$default-base-color: #0466e0;
4+
$default-grid-columns: 12;
5+
$default-grid-gutter: 2%;
6+
7+
.grid--auto-margin {
8+
@include flexbox-grid-mixins.grid($flex-wrap: nowrap);
9+
margin-bottom: 2rem;
10+
11+
> .grid__col {
12+
@include flexbox-grid-mixins.grid-col($col: 2);
13+
14+
&.left {
15+
margin-right: auto;
16+
}
17+
&.right {
18+
margin-left: auto;
19+
}
20+
}
21+
}
22+
23+
.grid--pagination {
24+
@include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between, $align-items: center);
25+
26+
> .grid__col {
27+
@include flexbox-grid-mixins.grid-col($col: 5.9, $align-self: stretch);
28+
29+
&.left {
30+
text-align: left;
31+
margin-right: auto;
32+
}
33+
&.right{
34+
text-align: right;
35+
margin-left: auto;
36+
}
37+
}
38+
}

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -374,22 +374,6 @@ ul.grid {
374374
}
375375
}
376376

377-
.grid--both-row {
378-
@include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between, $align-items: center);
379-
380-
> .grid__col-both {
381-
@include flexbox-grid-mixins.grid-col($col: 5.9, $align-self: stretch);
382-
383-
&.left {
384-
text-align: left;
385-
}
386-
&.right{
387-
text-align: right;
388-
margin-left: auto;
389-
}
390-
}
391-
}
392-
393377
.grid--left-column {
394378
@include flexbox-grid-mixins.grid($flex-direction: column, $gutter: $default-grid-gutter, $align-items: flex-start);
395379

‎docs/dart-sass/example.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -313,22 +313,6 @@ ul.grid {
313313
}
314314
}
315315

316-
.grid--both-row {
317-
@include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between, $align-items: center);
318-
319-
> .grid__col-both {
320-
@include flexbox-grid-mixins.grid-col($col: 5.9, $align-self: stretch);
321-
322-
&.left {
323-
text-align: left;
324-
}
325-
&.right{
326-
text-align: right;
327-
margin-left: auto;
328-
}
329-
}
330-
}
331-
332316
.grid--left-column {
333317
@include flexbox-grid-mixins.grid($flex-direction: column, $gutter: $default-grid-gutter, $align-items: flex-start);
334318

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Flexbox Grid Mixins - Flexbox Grid Mixins Example</title>
5+
<link rel="stylesheet" href="../css-dart-sass/default.css">
6+
<link rel="stylesheet" href="../css-dart-sass/auto-margin.css">
7+
</head>
8+
<body>
9+
10+
<div class="header">
11+
<h1 class="header-title">Flexbox Grid Mixins</h1>
12+
<p class="header-description">Sass Mixins to generate Flexbox grid</p>
13+
</div>
14+
15+
<div class="container">
16+
17+
<h2>Auto margin</h2>
18+
19+
<div class="grid--auto-margin">
20+
<div class="grid__col left">
21+
1
22+
</div>
23+
<div class="grid__col">
24+
2
25+
</div>
26+
<div class="grid__col">
27+
3
28+
</div>
29+
<div class="grid__col">
30+
4
31+
</div>
32+
<div class="grid__col">
33+
5
34+
</div>
35+
</div>
36+
37+
38+
<div class="grid--auto-margin">
39+
<div class="grid__col">
40+
1
41+
</div>
42+
<div class="grid__col">
43+
2
44+
</div>
45+
<div class="grid__col">
46+
3
47+
</div>
48+
<div class="grid__col">
49+
4
50+
</div>
51+
<div class="grid__col right">
52+
5
53+
</div>
54+
</div>
55+
56+
<div class="grid--auto-margin">
57+
<div class="grid__col left">
58+
1
59+
</div>
60+
<div class="grid__col">
61+
2
62+
</div>
63+
<div class="grid__col">
64+
3
65+
</div>
66+
<div class="grid__col">
67+
4
68+
</div>
69+
<div class="grid__col right">
70+
5
71+
</div>
72+
</div>
73+
74+
75+
<div class="grid--auto-margin">
76+
<div class="grid__col right">
77+
1
78+
</div>
79+
<div class="grid__col right">
80+
2
81+
</div>
82+
<div class="grid__col">
83+
3
84+
</div>
85+
<div class="grid__col left">
86+
4
87+
</div>
88+
<div class="grid__col left">
89+
5
90+
</div>
91+
</div>
92+
93+
<h2>Pagination</h2>
94+
95+
<div class="grid--pagination">
96+
<div class="grid__col left">
97+
left<br>
98+
</div>
99+
<div class="grid__col right">
100+
right<br>
101+
</div>
102+
</div>
103+
104+
<h3>Only left</h3>
105+
<div class="grid--pagination">
106+
<div class="grid__col left">
107+
left<br>
108+
</div>
109+
</div>
110+
111+
<h3>Only right</h3>
112+
<div class="grid--pagination">
113+
<div class="grid__col right">
114+
right<br>
115+
</div>
116+
</div>
117+
118+
</body>
119+
</html>

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

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1259,30 +1259,6 @@ <h3>Centered row</h3>
12591259
</div>
12601260
</div>
12611261

1262-
<h3>Both row</h3>
1263-
<div class="grid--both-row">
1264-
<div class="grid__col-both left">
1265-
left<br>
1266-
</div>
1267-
<div class="grid__col-both right">
1268-
right<br>
1269-
</div>
1270-
</div>
1271-
1272-
<h3>Both row, only left</h3>
1273-
<div class="grid--both-row">
1274-
<div class="grid__col-both left">
1275-
left<br>
1276-
</div>
1277-
</div>
1278-
1279-
<h3>Both row, only right</h3>
1280-
<div class="grid--both-row">
1281-
<div class="grid__col-both right">
1282-
right<br>
1283-
</div>
1284-
</div>
1285-
12861262
<h3 id="items-row-alignment">Items row Alignment</h3>
12871263

12881264
<div class="grid--items-row-alignment">

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

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1260,30 +1260,6 @@ <h3>Centered row</h3>
12601260
</div>
12611261
</div>
12621262

1263-
<h3>Both row</h3>
1264-
<div class="grid--both-row">
1265-
<div class="grid__col-both left">
1266-
left<br>
1267-
</div>
1268-
<div class="grid__col-both right">
1269-
right<br>
1270-
</div>
1271-
</div>
1272-
1273-
<h3>Both row, only left</h3>
1274-
<div class="grid--both-row">
1275-
<div class="grid__col-both left">
1276-
left<br>
1277-
</div>
1278-
</div>
1279-
1280-
<h3>Both row, only right</h3>
1281-
<div class="grid--both-row">
1282-
<div class="grid__col-both right">
1283-
right<br>
1284-
</div>
1285-
</div>
1286-
12871263
<h3 id="items-row-alignment">Items row Alignment</h3>
12881264

12891265
<div class="grid--items-row-alignment">

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

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1260,30 +1260,6 @@ <h3>Centered row</h3>
12601260
</div>
12611261
</div>
12621262

1263-
<h3>Both row</h3>
1264-
<div class="grid--both-row">
1265-
<div class="grid__col-both left">
1266-
left hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
1267-
</div>
1268-
<div class="grid__col-both right">
1269-
right<br>
1270-
</div>
1271-
</div>
1272-
1273-
<h3>Both row, only left</h3>
1274-
<div class="grid--both-row">
1275-
<div class="grid__col-both left">
1276-
left hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
1277-
</div>
1278-
</div>
1279-
1280-
<h3>Both row, only right</h3>
1281-
<div class="grid--both-row">
1282-
<div class="grid__col-both right">
1283-
right hello hello hello hello hello hello hello hello hello hello hello hello<br>
1284-
</div>
1285-
</div>
1286-
12871263
<h3 id="items-row-alignment">Items row Alignment</h3>
12881264

12891265
<div class="grid--items-row-alignment">

0 commit comments

Comments
 (0)