forked from afonsopacifer/flex-grid-framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex-grid-framework.styl
180 lines (147 loc) · 4.13 KB
/
flex-grid-framework.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
/*
Flex Grid Framework
Platform: Stylus
Original repository:
https://github.com/afonsopacifer/flex-grid-framework
Website:
http://flexgridframework.com/
Author:
Afonso Pacifer (afonsopacifer.com)
Version: 1.3.0
Licence:
MIT - https://github.com/afonsopacifer/flex-grid-framework/blob/master/licence.md
* /
/* Configs
------------------------------------------------*/
flx-max-width = 1200px
flx-margin = 0.52083%
flx-padding = 0
flx-column_number = 12
flx-column_width = (100% / flx-column_number) - 2 * flx-margin
$margin
margin-right flx-margin
margin-left flx-margin
$padding
padding-right flx-padding
padding-left flx-padding
/* Row
------------------------------------------------*/
$row
margin-left -1 * flx-padding
margin-right -1 * flx-padding
max-width max-width
display -webkit-box
display -webkit-flex
display -ms-flexbox
display flex
-webkit-flex-wrap wrap
-ms-flex-wrap wrap
flex-wrap wrap
box-sizing border-box
/* Columns
------------------------------------------------*/
// mixin
col(number-of-cols)
if (number-of-cols is a 'unit')
width (number-of-cols * flx-column_width) + (((number-of-cols - 1) * 2) * flx-margin)
if (number-of-cols == flex)
-webkit-box-flex auto
-moz-box-flex auto
-webkit-flex auto
-ms-flex auto
flex auto
@extend $margin
@extend $padding
box-sizing border-box
// extends the mixin :)
$col-flex
col(flex)
for i in (1..flx-column_number)
$col-i
col(i)
// for media queries
mq-col(number-of-cols)
width (number-of-cols * flx-column_width) + (((number-of-cols - 1) * 2) * flx-margin)
/* Offset
------------------------------------------------*/
// mixin
mq-offset(number-of-offset = 0)
margin-left (number-of-offset * flx-column_width) + (((number-of-offset - 1) * 2) * flx-margin) + (3 * flx-margin)
// extends the mixin :)
for i in (0..(flx-column_number - 1))
$offset-i
mq-offset(i)
/* Flex Container
------------------------------------------------*/
// mixin
mq-justify(content-value)
if (content-value == left)
-webkit-box-pack start
-webkit-justify-content flex-start
-ms-flex-pack start
justify-content flex-start
if (content-value == right)
-webkit-box-pack end
-webkit-justify-content flex-end
-ms-flex-pack end
justify-content flex-end
if (content-value == center)
-webkit-box-pack center
-webkit-justify-content center
-ms-flex-pack center
justify-content center
if (content-value == between)
-webkit-box-pack justify
-webkit-justify-content space-between
-ms-flex-pack justify
justify-content space-between
if (content-value == around)
-webkit-justify-content space-around
-ms-flex-pack distribute
justify-content space-around
// extends the mixin :)
$justify-left
mq-justify(left)
$justify-right
mq-justify(right)
$justify-center
mq-justify(center)
$justify-between
mq-justify(between)
$justify-around
mq-justify(around)
/* Flex Itens
------------------------------------------------*/
// mixin
mq-vertical-align(vertical-value)
if (vertical-value == top)
-webkit-box-align start
-webkit-align-items flex-start
-ms-flex-align start
align-items flex-start
-webkit-align-content flex-start
-ms-flex-line-pack start
align-content flex-start
if (vertical-value == middle)
-webkit-box-align center
-webkit-align-items center
-ms-flex-align center
align-items center
-webkit-align-content center
-ms-flex-line-pack center
align-content center
if (vertical-value == bottom)
-webkit-box-align end
-webkit-align-items flex-end
-ms-flex-align end
align-items flex-end
-webkit-align-content flex-end
-ms-flex-line-pack end
align-content flex-end
// extends the mixin :)
$vertical-align-top
mq-vertical-align(top)
$vertical-align-middle
mq-vertical-align(middle)
$vertical-align-bottom
mq-vertical-align(bottom)