Skip to content

Commit 166aeb5

Browse files
adamseckeladamseckel
committed
2.0
1 parent d9ccbc0 commit 166aeb5

File tree

5 files changed

+190
-68
lines changed

5 files changed

+190
-68
lines changed

‎dist/flex-attributes.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,110 @@
2828
-ms-flex-wrap: nowrap;
2929
flex-wrap: nowrap;
3030
}
31+
@media screen and (min-width: 0) {
32+
[flex][column-xs] {
33+
display: -webkit-flex;
34+
display: -ms-flexbox;
35+
display: flex;
36+
-webkit-flex-direction: row;
37+
-ms-flex-direction: row;
38+
flex-direction: row;
39+
-webkit-flex-wrap: nowrap;
40+
-ms-flex-wrap: nowrap;
41+
flex-wrap: nowrap;
42+
}
43+
}
44+
@media screen and (min-width: 750px) {
45+
[flex][column-sm] {
46+
display: -webkit-flex;
47+
display: -ms-flexbox;
48+
display: flex;
49+
-webkit-flex-direction: row;
50+
-ms-flex-direction: row;
51+
flex-direction: row;
52+
-webkit-flex-wrap: nowrap;
53+
-ms-flex-wrap: nowrap;
54+
flex-wrap: nowrap;
55+
}
56+
}
57+
@media screen and (min-width: 970px) {
58+
[flex][column-md] {
59+
display: -webkit-flex;
60+
display: -ms-flexbox;
61+
display: flex;
62+
-webkit-flex-direction: row;
63+
-ms-flex-direction: row;
64+
flex-direction: row;
65+
-webkit-flex-wrap: nowrap;
66+
-ms-flex-wrap: nowrap;
67+
flex-wrap: nowrap;
68+
}
69+
}
70+
@media screen and (min-width: 1170px) {
71+
[flex][column-lg] {
72+
display: -webkit-flex;
73+
display: -ms-flexbox;
74+
display: flex;
75+
-webkit-flex-direction: row;
76+
-ms-flex-direction: row;
77+
flex-direction: row;
78+
-webkit-flex-wrap: nowrap;
79+
-ms-flex-wrap: nowrap;
80+
flex-wrap: nowrap;
81+
}
82+
}
83+
@media screen and (min-width: 0) {
84+
[flex][column-xs] {
85+
display: -webkit-flex;
86+
display: -ms-flexbox;
87+
display: flex;
88+
-webkit-flex-direction: column;
89+
-ms-flex-direction: column;
90+
flex-direction: column;
91+
-webkit-flex-wrap: nowrap;
92+
-ms-flex-wrap: nowrap;
93+
flex-wrap: nowrap;
94+
}
95+
}
96+
@media screen and (min-width: 750px) {
97+
[flex][column-sm] {
98+
display: -webkit-flex;
99+
display: -ms-flexbox;
100+
display: flex;
101+
-webkit-flex-direction: column;
102+
-ms-flex-direction: column;
103+
flex-direction: column;
104+
-webkit-flex-wrap: nowrap;
105+
-ms-flex-wrap: nowrap;
106+
flex-wrap: nowrap;
107+
}
108+
}
109+
@media screen and (min-width: 970px) {
110+
[flex][column-md] {
111+
display: -webkit-flex;
112+
display: -ms-flexbox;
113+
display: flex;
114+
-webkit-flex-direction: column;
115+
-ms-flex-direction: column;
116+
flex-direction: column;
117+
-webkit-flex-wrap: nowrap;
118+
-ms-flex-wrap: nowrap;
119+
flex-wrap: nowrap;
120+
}
121+
}
122+
@media screen and (min-width: 1170px) {
123+
[flex][column-lg] {
124+
display: -webkit-flex;
125+
display: -ms-flexbox;
126+
display: flex;
127+
-webkit-flex-direction: column;
128+
-ms-flex-direction: column;
129+
flex-direction: column;
130+
-webkit-flex-wrap: nowrap;
131+
-ms-flex-wrap: nowrap;
132+
flex-wrap: nowrap;
133+
}
134+
}
31135
[flex][wrap] {
32136
-webkit-flex-wrap: wrap;
33137
-ms-flex-wrap: wrap;
@@ -398,6 +502,11 @@
398502
-ms-flex-shrink: 10;
399503
flex-shrink: 10;
400504
}
505+
[flex][row] {
506+
-webkit-flex-basis: 100%;
507+
-ms-flex-basis: 100%;
508+
flex-basis: 100%;
509+
}
401510
@media screen and (min-width: 0) {
402511
[flex][row] [col-xs-1] {
403512
-webkit-flex-basis: 8%;

‎src/flex-attributes.styl

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,3 @@
11
@import 'flexbox'
2-
3-
$primary-axis = center start end space-between space-around
4-
$secondary-axis = center start end stretch baseline
5-
6-
// LAYOUT
7-
[flex]
8-
flexbox(flex)
9-
flex-wrap(nowrap)
10-
11-
&[column]
12-
flexbox(flex)
13-
flex-direction(column)
14-
flex-wrap(nowrap)
15-
16-
&[row]
17-
flexbox(flex)
18-
flex-direction(row)
19-
flex-wrap(nowrap)
20-
21-
&[wrap]
22-
flex-wrap(wrap)
23-
24-
&[wrap="reverse"]
25-
flex-wrap(wrap-reverse)
26-
27-
for $alignment in $primary-axis
28-
&[layout=\"{$alignment}\"]
29-
justify-content($alignment)
30-
31-
for $primary-alignment in $primary-axis
32-
for $secondary-alignment in $secondary-axis
33-
&[layout=\"{$primary-alignment} {$secondary-alignment}\"]
34-
justify-content($primary-alignment)
35-
align-items($secondary-alignment)
36-
37-
for $prop in $primary-axis
38-
[align=\"{$prop}\"]
39-
align-content($prop)
40-
41-
for $num in range(0,10)
42-
[grow=\"{$num}\"]
43-
flex-grow($num)
44-
45-
for $num in range(0,10)
46-
[shrink=\"{$num}\"]
47-
flex-shrink($num)
48-
49-
// GRID
50-
$max-rows = 12
51-
$min-rows = 1
52-
$rows = range($min-rows, $max-rows)
53-
54-
// Bootstrap breakpoints
55-
$sizes = {
56-
xs: 0,
57-
sm: 750px,
58-
md: 970px,
59-
lg: 1170px
60-
}
61-
62-
// Breakpoints
63-
[flex][row]
64-
for $num in $rows
65-
for $size, $breakpoint in $sizes
66-
[col-{$size}-{$num}]
67-
@media screen and (min-width: $breakpoint)
68-
flex-basis(floor(percentage($num/$max-rows)))
69-
flex-grow(1)
2+
@import 'layout'
3+
@import 'grid'

‎src/grid.styl

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import 'variables'
2+
3+
// GRID
4+
$max-rows = 12
5+
$min-rows = 1
6+
$rows = range($min-rows, $max-rows)
7+
8+
// Breakpoints
9+
[flex][row]
10+
flex-basis(100%)
11+
12+
for $num in $rows
13+
for $size, $breakpoint in $sizes
14+
[col-{$size}-{$num}]
15+
@media screen and (min-width: $breakpoint)
16+
flex-basis(floor(percentage($num/$max-rows)))
17+
flex-grow(1)

‎src/layout.styl

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import 'variables'
2+
3+
$primary-axis = center start end space-between space-around
4+
$secondary-axis = center start end stretch baseline
5+
6+
// LAYOUT
7+
[flex]
8+
flexbox(flex)
9+
flex-wrap(nowrap)
10+
11+
&[column]
12+
flexbox(flex)
13+
flex-direction(column)
14+
flex-wrap(nowrap)
15+
16+
&[row]
17+
flexbox(flex)
18+
flex-direction(row)
19+
flex-wrap(nowrap)
20+
21+
for $direction in row column
22+
for $size, $breakpoint in $sizes
23+
&[column-{$size}]
24+
@media screen and (min-width: $breakpoint)
25+
flexbox(flex)
26+
flex-direction($direction)
27+
flex-wrap(nowrap)
28+
29+
&[wrap]
30+
flex-wrap(wrap)
31+
32+
&[wrap="reverse"]
33+
flex-wrap(wrap-reverse)
34+
35+
for $alignment in $primary-axis
36+
&[layout=\"{$alignment}\"]
37+
justify-content($alignment)
38+
39+
for $primary-alignment in $primary-axis
40+
for $secondary-alignment in $secondary-axis
41+
&[layout=\"{$primary-alignment} {$secondary-alignment}\"]
42+
justify-content($primary-alignment)
43+
align-items($secondary-alignment)
44+
45+
for $prop in $primary-axis
46+
[align=\"{$prop}\"]
47+
align-content($prop)
48+
49+
for $num in range(0,10)
50+
[grow=\"{$num}\"]
51+
flex-grow($num)
52+
53+
for $num in range(0,10)
54+
[shrink=\"{$num}\"]
55+
flex-shrink($num)

‎src/variables.styl

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Bootstrap breakpoints
2+
$sizes = {
3+
xs: 0,
4+
sm: 750px,
5+
md: 970px,
6+
lg: 1170px
7+
}

0 commit comments

Comments
 (0)