Skip to content

Commit 610bc3e

Browse files
afonsopaciferafonsopacifer
committed
Merge pull request #15 from AlexisBRENON/parametrization
Parametrization
2 parents 8213852 + 0903e1b commit 610bc3e

2 files changed

Lines changed: 49 additions & 184 deletions

File tree

‎_flex-grid-framework.scss‎

Lines changed: 26 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,27 @@ MIT - https://github.com/afonsopacifer/flex-grid-framework/blob/master/licence.m
1515
1616
/* Configs
1717
------------------------------------------------*/
18-
$max-width: 1200px !default;
19-
$margin: 0.52083% !default;
20-
$column_width: 7.29177% !default;
18+
$flx-max-width: 1200px !default;
19+
$flx-margin: 0.52083% !default;
20+
$flx-padding: 0 !default;
21+
$flx-column_number: 12 !default;
22+
$flx-column_width: (100%/$flx-column_number) - 2*$flx-margin !default;
2123

2224
%margin {
23-
margin-right: $margin;
24-
margin-left: $margin;
25+
margin-right: $flx-margin;
26+
margin-left: $flx-margin;
27+
}
28+
%padding {
29+
padding-right: $flx-padding;
30+
padding-left: $flx-padding;
2531
}
2632

2733
/* Row
2834
------------------------------------------------*/
2935
%row {
30-
margin-left: auto;
31-
margin-right: auto;
32-
width: 100%;
33-
max-width: $max-width;
36+
margin-left: -$flx-padding;
37+
margin-right: -$flx-padding;
38+
max-width: $flx-max-width;
3439
display: -webkit-box;
3540
display: -webkit-flex;
3641
display: -ms-flexbox;
@@ -53,10 +58,11 @@ $column_width: 7.29177% !default;
5358
-ms-flex: auto;
5459
flex: auto;
5560
} @else {
56-
width: ($number-of-cols * $column_width) + ((($number-of-cols - 1) * 2) * $margin);
61+
width: ($number-of-cols * $flx-column_width) + ((($number-of-cols - 1) * 2) * $flx-margin);
5762
}
5863

5964
@extend %margin;
65+
@extend %padding;
6066
box-sizing: border-box;
6167
}
6268

@@ -65,114 +71,31 @@ $column_width: 7.29177% !default;
6571
@include col(flex);
6672
}
6773

68-
%col-1 {
69-
@include col(1);
70-
}
71-
72-
%col-2 {
73-
@include col(2);
74-
}
75-
76-
%col-3 {
77-
@include col(3);
78-
}
79-
80-
%col-4 {
81-
@include col(4);
82-
}
83-
84-
%col-5 {
85-
@include col(5);
86-
}
87-
88-
%col-6 {
89-
@include col(6);
90-
}
91-
92-
%col-7 {
93-
@include col(7);
94-
}
95-
96-
%col-8 {
97-
@include col(8);
98-
}
99-
100-
%col-9 {
101-
@include col(9);
102-
}
103-
104-
%col-10 {
105-
@include col(10);
106-
}
107-
108-
%col-11 {
109-
@include col(11);
74+
@for $i from 1 to ($flx-column_number + 1) {
75+
%col-#{$i} {
76+
@include col($i);
77+
}
11078
}
11179

112-
%col-12 {
113-
@include col(12);
114-
}
11580

11681
// for media queries
11782
@mixin mq-col($number-of-cols) {
118-
width: ($number-of-cols * $column_width) + ((($number-of-cols - 1) * 2) * $margin);
83+
width: ($number-of-cols * $flx-column_width) + ((($number-of-cols - 1) * 2) * $flx-margin);
11984
}
12085

12186
/* Offset
12287
------------------------------------------------*/
12388

12489
// mixin
12590
@mixin mq-offset($number-of-offset) {
126-
margin-left: ($number-of-offset * $column_width) + ((($number-of-offset - 1) * 2) * $margin) + (3 * $margin);
91+
margin-left: ($number-of-offset * $flx-column_width) + ((($number-of-offset - 1) * 2) * $flx-margin) + (3 * $flx-margin);
12792
}
12893

12994
// extends the mixin :)
130-
%offset-0 {
131-
@include mq-offset(0);
132-
}
133-
134-
%offset-1 {
135-
@include mq-offset(1);
136-
}
137-
138-
%offset-2 {
139-
@include mq-offset(2);
140-
}
141-
142-
%offset-3 {
143-
@include mq-offset(3);
144-
}
145-
146-
%offset-4 {
147-
@include mq-offset(4);
148-
}
149-
150-
%offset-5 {
151-
@include mq-offset(5);
152-
}
153-
154-
%offset-6 {
155-
@include mq-offset(6);
156-
}
157-
158-
%offset-7 {
159-
@include mq-offset(7);
160-
}
161-
162-
%offset-8 {
163-
@include mq-offset(8);
164-
}
165-
166-
%offset-9 {
167-
@include mq-offset(9);
168-
}
169-
170-
%offset-10 {
171-
@include mq-offset(10);
172-
}
173-
174-
%offset-11 {
175-
@include mq-offset(11);
95+
@for $i from 0 to $flx-column_number {
96+
%offset-#{$i} {
97+
@include mq-offset($i);
98+
}
17699
}
177100

178101
/* Flex Container

‎flex-grid-framework.styl‎

Lines changed: 23 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,25 @@ MIT - https://github.com/afonsopacifer/flex-grid-framework/blob/master/licence.m
1515
1616
/* Configs
1717
------------------------------------------------*/
18-
max-width = 1200px
19-
margin = 0.52083%
20-
column_width = 7.29177%
18+
flx-max-width = 1200px
19+
flx-margin = 0.52083%
20+
flx-padding = 0
21+
flx-column_number = 12
22+
flx-column_width = (100% / flx-column_number) - 2 * flx-margin
2123

2224
$margin
23-
margin-right margin
24-
margin-left margin
25+
margin-right flx-margin
26+
margin-left flx-margin
27+
28+
$padding
29+
padding-right flx-padding
30+
padding-left flx-padding
2531

2632
/* Row
2733
------------------------------------------------*/
2834
$row
29-
margin-left auto
30-
margin-right auto
31-
width 100%
35+
margin-left -1 * flx-padding
36+
margin-right -1 * flx-padding
3237
max-width max-width
3338
display -webkit-box
3439
display -webkit-flex
@@ -45,7 +50,7 @@ $row
4550
// mixin
4651
col(number-of-cols)
4752
if (number-of-cols is a 'unit')
48-
width (number-of-cols * column_width) + (((number-of-cols - 1) * 2) * margin)
53+
width (number-of-cols * flx-column_width) + (((number-of-cols - 1) * 2) * flx-margin)
4954

5055
if (number-of-cols == flex)
5156
-webkit-box-flex auto
@@ -55,95 +60,32 @@ col(number-of-cols)
5560
flex auto
5661

5762
@extend $margin
63+
@extend $padding
5864
box-sizing border-box
5965

6066
// extends the mixin :)
6167
$col-flex
6268
col(flex)
6369

64-
$col-1
65-
col(1)
66-
67-
$col-2
68-
col(2)
69-
70-
$col-3
71-
col(3)
72-
73-
$col-4
74-
col(4)
75-
76-
$col-5
77-
col(5)
78-
79-
$col-6
80-
col(6)
81-
82-
$col-7
83-
col(7)
84-
85-
$col-8
86-
col(8)
87-
88-
$col-9
89-
col(9)
90-
91-
$col-10
92-
col(10)
93-
94-
$col-11
95-
col(11)
96-
97-
$col-12
98-
col(12)
70+
for i in (1..flx-column_number)
71+
$col-i
72+
col(i)
9973

10074
// for media queries
10175
mq-col(number-of-cols)
102-
width (number-of-cols * column_width) + (((number-of-cols - 1) * 2) * margin)
76+
width (number-of-cols * flx-column_width) + (((number-of-cols - 1) * 2) * flx-margin)
10377

10478
/* Offset
10579
------------------------------------------------*/
10680

10781
// mixin
10882
mq-offset(number-of-offset = 0)
109-
margin-left (number-of-offset * column_width) + (((number-of-offset - 1) * 2) * margin) + (3 * margin)
83+
margin-left (number-of-offset * flx-column_width) + (((number-of-offset - 1) * 2) * flx-margin) + (3 * flx-margin)
11084

11185
// extends the mixin :)
112-
$offset-0
113-
mq-offset()
114-
115-
$offset-1
116-
mq-offset(1)
117-
118-
$offset-2
119-
mq-offset(2)
120-
121-
$offset-3
122-
mq-offset(3)
123-
124-
$offset-4
125-
mq-offset(4)
126-
127-
$offset-5
128-
mq-offset(5)
129-
130-
$offset-6
131-
mq-offset(6)
132-
133-
$offset-7
134-
mq-offset(7)
135-
136-
$offset-8
137-
mq-offset(8)
138-
139-
$offset-9
140-
mq-offset(9)
141-
142-
$offset-10
143-
mq-offset(10)
144-
145-
$offset-11
146-
mq-offset(11)
86+
for i in (0..(flx-column_number - 1))
87+
$offset-i
88+
mq-offset(i)
14789

14890
/* Flex Container
14991
------------------------------------------------*/

0 commit comments

Comments
 (0)