Skip to content

Commit 501051f

Browse files
thingsymthingsym
committed
Merge branch 'release-0.3.1'
2 parents cef86c0 + bde12c0 commit 501051f

31 files changed

+736
-509
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,10 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
248248

249249
## Changelog
250250

251+
* Version 0.3.1
252+
* update example
253+
* fix items row/column alignment example
254+
* add auto margin example
251255
* Version 0.3.0
252256
* add example for dart sass
253257
* add Flexbox Grid Mixins for Dart Sass

‎dart-sass/_flexbox-grid-mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// ===================================================================
22
// Flexbox Grid Mixins (Dart Sass)
3-
// Version 0.3.0
3+
// Version 0.3.1
44
// Description: Sass Mixins to generate Flexbox grid
55
// Author: thingsym
66
// GitHub: https://github.com/thingsym/flexbox-grid-mixins

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.grid--auto-margin {
2+
-webkit-box-sizing: border-box;
3+
box-sizing: border-box;
4+
display: -webkit-box;
5+
display: -ms-flexbox;
6+
display: flex;
7+
-ms-flex-wrap: nowrap;
8+
flex-wrap: nowrap;
9+
margin-bottom: 2rem;
10+
}
11+
.grid--auto-margin > .grid__col {
12+
-webkit-box-sizing: border-box;
13+
box-sizing: border-box;
14+
-webkit-box-flex: 0;
15+
-ms-flex: 0 0 16.6666666667%;
16+
flex: 0 0 16.6666666667%;
17+
}
18+
.grid--auto-margin > .grid__col.left {
19+
margin-right: auto;
20+
}
21+
.grid--auto-margin > .grid__col.right {
22+
margin-left: auto;
23+
}
24+
25+
.grid--pagination {
26+
-webkit-box-sizing: border-box;
27+
box-sizing: border-box;
28+
display: -webkit-box;
29+
display: -ms-flexbox;
30+
display: flex;
31+
-ms-flex-wrap: nowrap;
32+
flex-wrap: nowrap;
33+
-webkit-box-pack: justify;
34+
-ms-flex-pack: justify;
35+
justify-content: space-between;
36+
-webkit-box-align: center;
37+
-ms-flex-align: center;
38+
align-items: center;
39+
}
40+
.grid--pagination > .grid__col {
41+
-webkit-box-sizing: border-box;
42+
box-sizing: border-box;
43+
-webkit-box-flex: 0;
44+
-ms-flex: 0 0 49.1666666667%;
45+
flex: 0 0 49.1666666667%;
46+
-ms-flex-item-align: stretch;
47+
align-self: stretch;
48+
}
49+
.grid--pagination > .grid__col.left {
50+
text-align: left;
51+
margin-right: auto;
52+
}
53+
.grid--pagination > .grid__col.right {
54+
text-align: right;
55+
margin-left: auto;
56+
}

‎docs/css-dart-sass/default.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ td.example {
148148
}
149149

150150
.grid,
151+
.grid-global,
151152
.grid-3-columns,
152153
.grid-24-columns,
153154
[class*=grid--] {

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

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,59 +8,67 @@
88
.grid--items-row-alignment > .grid__col {
99
-webkit-box-sizing: border-box;
1010
box-sizing: border-box;
11-
-webkit-box-flex: 0;
12-
-ms-flex: 0 0 15%;
13-
flex: 0 0 15%;
14-
-ms-flex-item-align: none;
15-
align-self: none;
11+
-webkit-box-flex: 1;
12+
-ms-flex: 1 1 0px;
13+
flex: 1 1 0;
14+
margin-right: 2%;
15+
}
16+
.grid--items-row-alignment > .grid__col-auto {
17+
-webkit-box-sizing: border-box;
18+
box-sizing: border-box;
19+
-webkit-box-flex: 1;
20+
-ms-flex: 1 1 0px;
21+
flex: 1 1 0;
22+
-ms-flex-item-align: auto;
23+
align-self: auto;
1624
margin-right: 2%;
1725
}
1826
.grid--items-row-alignment > .grid__col-top {
1927
-webkit-box-sizing: border-box;
2028
box-sizing: border-box;
21-
-webkit-box-flex: 0;
22-
-ms-flex: 0 0 15%;
23-
flex: 0 0 15%;
29+
-webkit-box-flex: 1;
30+
-ms-flex: 1 1 0px;
31+
flex: 1 1 0;
2432
-ms-flex-item-align: start;
2533
align-self: flex-start;
2634
margin-right: 2%;
2735
}
2836
.grid--items-row-alignment > .grid__col-middle {
2937
-webkit-box-sizing: border-box;
3038
box-sizing: border-box;
31-
-webkit-box-flex: 0;
32-
-ms-flex: 0 0 15%;
33-
flex: 0 0 15%;
39+
-webkit-box-flex: 1;
40+
-ms-flex: 1 1 0px;
41+
flex: 1 1 0;
3442
-ms-flex-item-align: center;
3543
align-self: center;
3644
margin-right: 2%;
3745
}
3846
.grid--items-row-alignment > .grid__col-bottom {
3947
-webkit-box-sizing: border-box;
4048
box-sizing: border-box;
41-
-webkit-box-flex: 0;
42-
-ms-flex: 0 0 15%;
43-
flex: 0 0 15%;
49+
-webkit-box-flex: 1;
50+
-ms-flex: 1 1 0px;
51+
flex: 1 1 0;
4452
-ms-flex-item-align: end;
4553
align-self: flex-end;
4654
margin-right: 2%;
4755
}
4856
.grid--items-row-alignment > .grid__col-stretch {
4957
-webkit-box-sizing: border-box;
5058
box-sizing: border-box;
51-
-webkit-box-flex: 0;
52-
-ms-flex: 0 0 15%;
53-
flex: 0 0 15%;
59+
-webkit-box-flex: 1;
60+
-ms-flex: 1 1 0px;
61+
flex: 1 1 0;
5462
-ms-flex-item-align: stretch;
5563
align-self: stretch;
5664
margin-right: 2%;
5765
}
5866
.grid--items-row-alignment > .grid__col-baseline {
5967
-webkit-box-sizing: border-box;
6068
box-sizing: border-box;
61-
-webkit-box-flex: 0;
62-
-ms-flex: 0 0 15%;
63-
flex: 0 0 15%;
69+
-webkit-box-flex: 1;
70+
-ms-flex: 1 1 0px;
71+
flex: 1 1 0;
6472
-ms-flex-item-align: baseline;
6573
align-self: baseline;
6674
margin-right: 2%;
@@ -83,8 +91,17 @@
8391
-webkit-box-flex: 0;
8492
-ms-flex: 0 0 15%;
8593
flex: 0 0 15%;
86-
-ms-flex-item-align: none;
87-
align-self: none;
94+
width: 15%;
95+
margin-right: 2%;
96+
}
97+
.grid--items-column-alignment > .grid__col-auto {
98+
-webkit-box-sizing: border-box;
99+
box-sizing: border-box;
100+
-webkit-box-flex: 0;
101+
-ms-flex: 0 0 15%;
102+
flex: 0 0 15%;
103+
-ms-flex-item-align: auto;
104+
align-self: auto;
88105
width: 15%;
89106
margin-right: 2%;
90107
}

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

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1548,38 +1548,6 @@ ul.grid li {
15481548
margin-bottom: 2%;
15491549
}
15501550

1551-
.grid--both-row {
1552-
-webkit-box-sizing: border-box;
1553-
box-sizing: border-box;
1554-
display: -webkit-box;
1555-
display: -ms-flexbox;
1556-
display: flex;
1557-
-ms-flex-wrap: nowrap;
1558-
flex-wrap: nowrap;
1559-
-webkit-box-pack: justify;
1560-
-ms-flex-pack: justify;
1561-
justify-content: space-between;
1562-
-webkit-box-align: center;
1563-
-ms-flex-align: center;
1564-
align-items: center;
1565-
}
1566-
.grid--both-row > .grid__col-both {
1567-
-webkit-box-sizing: border-box;
1568-
box-sizing: border-box;
1569-
-webkit-box-flex: 0;
1570-
-ms-flex: 0 0 49.1666666667%;
1571-
flex: 0 0 49.1666666667%;
1572-
-ms-flex-item-align: stretch;
1573-
align-self: stretch;
1574-
}
1575-
.grid--both-row > .grid__col-both.left {
1576-
text-align: left;
1577-
}
1578-
.grid--both-row > .grid__col-both.right {
1579-
text-align: right;
1580-
margin-left: auto;
1581-
}
1582-
15831551
.grid--left-column {
15841552
-webkit-box-sizing: border-box;
15851553
box-sizing: border-box;

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313
-webkit-box-flex: 0;
1414
-ms-flex: 0 0 14.6666666667%;
1515
flex: 0 0 14.6666666667%;
16-
-ms-flex-item-align: none;
17-
align-self: none;
1816
margin-left: 1%;
1917
margin-right: 1%;
2018
}
@@ -93,8 +91,18 @@
9391
-webkit-box-flex: 0;
9492
-ms-flex: 0 0 14.6666666667%;
9593
flex: 0 0 14.6666666667%;
96-
-ms-flex-item-align: none;
97-
align-self: none;
94+
width: 14.6666666667%;
95+
margin-left: 1%;
96+
margin-right: 1%;
97+
}
98+
.grid--items-column-alignment > .grid__col-auto {
99+
-webkit-box-sizing: border-box;
100+
box-sizing: border-box;
101+
-webkit-box-flex: 0;
102+
-ms-flex: 0 0 14.6666666667%;
103+
flex: 0 0 14.6666666667%;
104+
-ms-flex-item-align: auto;
105+
align-self: auto;
98106
width: 14.6666666667%;
99107
margin-left: 1%;
100108
margin-right: 1%;

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

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1641,38 +1641,6 @@ ul.grid li {
16411641
margin-bottom: 2%;
16421642
}
16431643

1644-
.grid--both-row {
1645-
-webkit-box-sizing: border-box;
1646-
box-sizing: border-box;
1647-
display: -webkit-box;
1648-
display: -ms-flexbox;
1649-
display: flex;
1650-
-ms-flex-wrap: nowrap;
1651-
flex-wrap: nowrap;
1652-
-webkit-box-pack: justify;
1653-
-ms-flex-pack: justify;
1654-
justify-content: space-between;
1655-
-webkit-box-align: center;
1656-
-ms-flex-align: center;
1657-
align-items: center;
1658-
}
1659-
.grid--both-row > .grid__col-both {
1660-
-webkit-box-sizing: border-box;
1661-
box-sizing: border-box;
1662-
-webkit-box-flex: 0;
1663-
-ms-flex: 0 0 49.1666666667%;
1664-
flex: 0 0 49.1666666667%;
1665-
-ms-flex-item-align: stretch;
1666-
align-self: stretch;
1667-
}
1668-
.grid--both-row > .grid__col-both.left {
1669-
text-align: left;
1670-
}
1671-
.grid--both-row > .grid__col-both.right {
1672-
text-align: right;
1673-
margin-left: auto;
1674-
}
1675-
16761644
.grid--left-column {
16771645
-webkit-box-sizing: border-box;
16781646
box-sizing: border-box;

‎docs/css/auto-margin.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.grid--auto-margin {
2+
-webkit-box-sizing: border-box;
3+
box-sizing: border-box;
4+
display: -webkit-box;
5+
display: -ms-flexbox;
6+
display: flex;
7+
-ms-flex-wrap: nowrap;
8+
flex-wrap: nowrap;
9+
margin-bottom: 2rem;
10+
}
11+
.grid--auto-margin > .grid__col {
12+
-webkit-box-sizing: border-box;
13+
box-sizing: border-box;
14+
-webkit-box-flex: 0;
15+
-ms-flex: 0 0 16.6666666667%;
16+
flex: 0 0 16.6666666667%;
17+
}
18+
.grid--auto-margin > .grid__col.left {
19+
margin-right: auto;
20+
}
21+
.grid--auto-margin > .grid__col.right {
22+
margin-left: auto;
23+
}
24+
25+
.grid--pagination {
26+
-webkit-box-sizing: border-box;
27+
box-sizing: border-box;
28+
display: -webkit-box;
29+
display: -ms-flexbox;
30+
display: flex;
31+
-ms-flex-wrap: nowrap;
32+
flex-wrap: nowrap;
33+
-webkit-box-pack: justify;
34+
-ms-flex-pack: justify;
35+
justify-content: space-between;
36+
-webkit-box-align: center;
37+
-ms-flex-align: center;
38+
align-items: center;
39+
}
40+
.grid--pagination > .grid__col {
41+
-webkit-box-sizing: border-box;
42+
box-sizing: border-box;
43+
-webkit-box-flex: 0;
44+
-ms-flex: 0 0 49.1666666667%;
45+
flex: 0 0 49.1666666667%;
46+
-ms-flex-item-align: stretch;
47+
align-self: stretch;
48+
}
49+
.grid--pagination > .grid__col.left {
50+
text-align: left;
51+
margin-right: auto;
52+
}
53+
.grid--pagination > .grid__col.right {
54+
text-align: right;
55+
margin-left: auto;
56+
}

0 commit comments

Comments
 (0)