bourbon 4.0.2 → 4.1.0.pre

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +6 -6
  3. data/.npmignore +12 -9
  4. data/CONTRIBUTING.md +34 -0
  5. data/Gemfile +0 -1
  6. data/{LICENSE → LICENSE.md} +3 -3
  7. data/README.md +130 -0
  8. data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +399 -5
  9. data/app/assets/stylesheets/_bourbon.scss +14 -7
  10. data/app/assets/stylesheets/addons/_clearfix.scss +11 -16
  11. data/app/assets/stylesheets/addons/_ellipsis.scss +1 -0
  12. data/app/assets/stylesheets/addons/_hide-text.scss +4 -2
  13. data/app/assets/stylesheets/addons/_html5-input-types.scss +4 -0
  14. data/app/assets/stylesheets/addons/_position.scss +13 -19
  15. data/app/assets/stylesheets/addons/_size.scss +17 -7
  16. data/app/assets/stylesheets/addons/_word-wrap.scss +3 -1
  17. data/app/assets/stylesheets/css3/_background.scss +1 -1
  18. data/app/assets/stylesheets/css3/_border-radius.scss +14 -14
  19. data/app/assets/stylesheets/css3/_flex-box.scss +151 -152
  20. data/app/assets/stylesheets/css3/_font-face.scss +17 -16
  21. data/app/assets/stylesheets/css3/_hidpi-media-query.scss +2 -2
  22. data/app/assets/stylesheets/css3/_selection.scss +14 -0
  23. data/app/assets/stylesheets/css3/_text-decoration.scss +19 -0
  24. data/app/assets/stylesheets/functions/_contains.scss +12 -0
  25. data/app/assets/stylesheets/functions/_is-length.scss +7 -0
  26. data/app/assets/stylesheets/functions/_is-size.scss +6 -0
  27. data/app/assets/stylesheets/functions/_modular-scale.scss +4 -1
  28. data/app/assets/stylesheets/helpers/_font-source-declaration.scss +36 -0
  29. data/app/assets/stylesheets/helpers/_is-num.scss +4 -7
  30. data/bourbon.gemspec +13 -16
  31. data/bower.json +25 -8
  32. data/lib/bourbon/version.rb +1 -1
  33. data/package.json +18 -14
  34. data/sache.json +5 -0
  35. metadata +41 -109
  36. data/Gemfile.lock +0 -49
  37. data/app/assets/stylesheets/addons/_button.scss +0 -374
  38. data/app/assets/stylesheets/functions/_flex-grid.scss +0 -39
  39. data/app/assets/stylesheets/functions/_golden-ratio.scss +0 -3
  40. data/app/assets/stylesheets/functions/_grid-width.scss +0 -13
  41. data/dist/_bourbon-deprecated-upcoming.scss +0 -8
  42. data/dist/_bourbon.scss +0 -79
  43. data/dist/addons/_button.scss +0 -374
  44. data/dist/addons/_clearfix.scss +0 -23
  45. data/dist/addons/_directional-values.scss +0 -111
  46. data/dist/addons/_ellipsis.scss +0 -7
  47. data/dist/addons/_font-family.scss +0 -5
  48. data/dist/addons/_hide-text.scss +0 -10
  49. data/dist/addons/_html5-input-types.scss +0 -86
  50. data/dist/addons/_position.scss +0 -32
  51. data/dist/addons/_prefixer.scss +0 -45
  52. data/dist/addons/_retina-image.scss +0 -31
  53. data/dist/addons/_size.scss +0 -16
  54. data/dist/addons/_timing-functions.scss +0 -32
  55. data/dist/addons/_triangle.scss +0 -83
  56. data/dist/addons/_word-wrap.scss +0 -8
  57. data/dist/css3/_animation.scss +0 -52
  58. data/dist/css3/_appearance.scss +0 -3
  59. data/dist/css3/_backface-visibility.scss +0 -6
  60. data/dist/css3/_background-image.scss +0 -42
  61. data/dist/css3/_background.scss +0 -55
  62. data/dist/css3/_border-image.scss +0 -59
  63. data/dist/css3/_border-radius.scss +0 -22
  64. data/dist/css3/_box-sizing.scss +0 -4
  65. data/dist/css3/_calc.scss +0 -4
  66. data/dist/css3/_columns.scss +0 -47
  67. data/dist/css3/_filter.scss +0 -5
  68. data/dist/css3/_flex-box.scss +0 -321
  69. data/dist/css3/_font-face.scss +0 -23
  70. data/dist/css3/_font-feature-settings.scss +0 -10
  71. data/dist/css3/_hidpi-media-query.scss +0 -10
  72. data/dist/css3/_hyphens.scss +0 -4
  73. data/dist/css3/_image-rendering.scss +0 -14
  74. data/dist/css3/_keyframes.scss +0 -35
  75. data/dist/css3/_linear-gradient.scss +0 -38
  76. data/dist/css3/_perspective.scss +0 -8
  77. data/dist/css3/_placeholder.scss +0 -8
  78. data/dist/css3/_radial-gradient.scss +0 -39
  79. data/dist/css3/_transform.scss +0 -15
  80. data/dist/css3/_transition.scss +0 -77
  81. data/dist/css3/_user-select.scss +0 -3
  82. data/dist/functions/_assign.scss +0 -11
  83. data/dist/functions/_color-lightness.scss +0 -13
  84. data/dist/functions/_flex-grid.scss +0 -39
  85. data/dist/functions/_golden-ratio.scss +0 -3
  86. data/dist/functions/_grid-width.scss +0 -13
  87. data/dist/functions/_modular-scale.scss +0 -66
  88. data/dist/functions/_px-to-em.scss +0 -13
  89. data/dist/functions/_px-to-rem.scss +0 -15
  90. data/dist/functions/_strip-units.scss +0 -5
  91. data/dist/functions/_tint-shade.scss +0 -9
  92. data/dist/functions/_transition-property-name.scss +0 -22
  93. data/dist/functions/_unpack.scss +0 -17
  94. data/dist/helpers/_convert-units.scss +0 -15
  95. data/dist/helpers/_gradient-positions-parser.scss +0 -13
  96. data/dist/helpers/_is-num.scss +0 -8
  97. data/dist/helpers/_linear-angle-parser.scss +0 -25
  98. data/dist/helpers/_linear-gradient-parser.scss +0 -41
  99. data/dist/helpers/_linear-positions-parser.scss +0 -61
  100. data/dist/helpers/_linear-side-corner-parser.scss +0 -31
  101. data/dist/helpers/_radial-arg-parser.scss +0 -69
  102. data/dist/helpers/_radial-gradient-parser.scss +0 -50
  103. data/dist/helpers/_radial-positions-parser.scss +0 -18
  104. data/dist/helpers/_render-gradients.scss +0 -26
  105. data/dist/helpers/_shape-size-stripper.scss +0 -10
  106. data/dist/helpers/_str-to-num.scss +0 -50
  107. data/dist/settings/_asset-pipeline.scss +0 -1
  108. data/dist/settings/_prefixer.scss +0 -6
  109. data/dist/settings/_px-to-em.scss +0 -1
  110. data/readme.md +0 -105
@@ -1,49 +0,0 @@
1
- PATH
2
- remote: .
3
- specs:
4
- bourbon (4.0.0.rc1)
5
- sass (~> 3.3)
6
- thor
7
-
8
- GEM
9
- remote: http://rubygems.org/
10
- specs:
11
- aruba (0.4.11)
12
- childprocess (>= 0.2.3)
13
- cucumber (>= 1.1.1)
14
- ffi (>= 1.0.11)
15
- rspec (>= 2.7.0)
16
- builder (3.0.0)
17
- childprocess (0.3.1)
18
- ffi (~> 1.0.6)
19
- cucumber (1.1.9)
20
- builder (>= 2.1.2)
21
- diff-lcs (>= 1.1.2)
22
- gherkin (~> 2.9.0)
23
- json (>= 1.4.6)
24
- term-ansicolor (>= 1.0.6)
25
- diff-lcs (1.1.3)
26
- ffi (1.0.11)
27
- gherkin (2.9.0)
28
- json (>= 1.4.6)
29
- json (1.6.5)
30
- rake (0.9.2.2)
31
- rspec (2.8.0)
32
- rspec-core (~> 2.8.0)
33
- rspec-expectations (~> 2.8.0)
34
- rspec-mocks (~> 2.8.0)
35
- rspec-core (2.8.0)
36
- rspec-expectations (2.8.0)
37
- diff-lcs (~> 1.1.2)
38
- rspec-mocks (2.8.0)
39
- sass (3.3.4)
40
- term-ansicolor (1.0.7)
41
- thor (0.18.1)
42
-
43
- PLATFORMS
44
- ruby
45
-
46
- DEPENDENCIES
47
- aruba (~> 0.4)
48
- bourbon!
49
- rake
@@ -1,374 +0,0 @@
1
- @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
2
-
3
- @if type-of($style) == string and type-of($base-color) == color {
4
- @include buttonstyle($style, $base-color, $text-size, $padding);
5
- }
6
-
7
- @if type-of($style) == string and type-of($base-color) == number {
8
- $padding: $text-size;
9
- $text-size: $base-color;
10
- $base-color: #4294f0;
11
-
12
- @if $padding == inherit {
13
- $padding: 7px 18px;
14
- }
15
-
16
- @include buttonstyle($style, $base-color, $text-size, $padding);
17
- }
18
-
19
- @if type-of($style) == color and type-of($base-color) == color {
20
- $base-color: $style;
21
- $style: simple;
22
- @include buttonstyle($style, $base-color, $text-size, $padding);
23
- }
24
-
25
- @if type-of($style) == color and type-of($base-color) == number {
26
- $padding: $text-size;
27
- $text-size: $base-color;
28
- $base-color: $style;
29
- $style: simple;
30
-
31
- @if $padding == inherit {
32
- $padding: 7px 18px;
33
- }
34
-
35
- @include buttonstyle($style, $base-color, $text-size, $padding);
36
- }
37
-
38
- @if type-of($style) == number {
39
- $padding: $base-color;
40
- $text-size: $style;
41
- $base-color: #4294f0;
42
- $style: simple;
43
-
44
- @if $padding == #4294f0 {
45
- $padding: 7px 18px;
46
- }
47
-
48
- @include buttonstyle($style, $base-color, $text-size, $padding);
49
- }
50
-
51
- &:disabled {
52
- opacity: 0.5;
53
- cursor: not-allowed;
54
- }
55
- }
56
-
57
-
58
- // Selector Style Button
59
- //************************************************************************//
60
- @mixin buttonstyle($type, $b-color, $t-size, $pad) {
61
- // Grayscale button
62
- @if $type == simple and $b-color == grayscale($b-color) {
63
- @include simple($b-color, true, $t-size, $pad);
64
- }
65
-
66
- @if $type == shiny and $b-color == grayscale($b-color) {
67
- @include shiny($b-color, true, $t-size, $pad);
68
- }
69
-
70
- @if $type == pill and $b-color == grayscale($b-color) {
71
- @include pill($b-color, true, $t-size, $pad);
72
- }
73
-
74
- @if $type == flat and $b-color == grayscale($b-color) {
75
- @include flat($b-color, true, $t-size, $pad);
76
- }
77
-
78
- // Colored button
79
- @if $type == simple {
80
- @include simple($b-color, false, $t-size, $pad);
81
- }
82
-
83
- @else if $type == shiny {
84
- @include shiny($b-color, false, $t-size, $pad);
85
- }
86
-
87
- @else if $type == pill {
88
- @include pill($b-color, false, $t-size, $pad);
89
- }
90
-
91
- @else if $type == flat {
92
- @include flat($b-color, false, $t-size, $pad);
93
- }
94
- }
95
-
96
-
97
- // Simple Button
98
- //************************************************************************//
99
- @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
100
- $color: hsl(0, 0, 100%);
101
- $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
102
- $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
103
- $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
104
- $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
105
-
106
- @if is-light($base-color) {
107
- $color: hsl(0, 0, 20%);
108
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
109
- }
110
-
111
- @if $grayscale == true {
112
- $border: grayscale($border);
113
- $inset-shadow: grayscale($inset-shadow);
114
- $stop-gradient: grayscale($stop-gradient);
115
- $text-shadow: grayscale($text-shadow);
116
- }
117
-
118
- border: 1px solid $border;
119
- border-radius: 3px;
120
- box-shadow: inset 0 1px 0 0 $inset-shadow;
121
- color: $color;
122
- display: inline-block;
123
- font-size: $textsize;
124
- font-weight: bold;
125
- @include linear-gradient ($base-color, $stop-gradient);
126
- padding: $padding;
127
- text-decoration: none;
128
- text-shadow: 0 1px 0 $text-shadow;
129
- background-clip: padding-box;
130
-
131
- &:hover:not(:disabled) {
132
- $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
133
- $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
134
- $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
135
-
136
- @if $grayscale == true {
137
- $base-color-hover: grayscale($base-color-hover);
138
- $inset-shadow-hover: grayscale($inset-shadow-hover);
139
- $stop-gradient-hover: grayscale($stop-gradient-hover);
140
- }
141
-
142
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
143
- cursor: pointer;
144
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
145
- }
146
-
147
- &:active:not(:disabled),
148
- &:focus:not(:disabled) {
149
- $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
150
- $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
151
-
152
- @if $grayscale == true {
153
- $border-active: grayscale($border-active);
154
- $inset-shadow-active: grayscale($inset-shadow-active);
155
- }
156
-
157
- border: 1px solid $border-active;
158
- box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
159
- }
160
- }
161
-
162
-
163
- // Shiny Button
164
- //************************************************************************//
165
- @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
166
- $color: hsl(0, 0, 100%);
167
- $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
168
- $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
169
- $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
170
- $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
171
- $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
172
- $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
173
- $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
174
-
175
- @if is-light($base-color) {
176
- $color: hsl(0, 0, 20%);
177
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
178
- }
179
-
180
- @if $grayscale == true {
181
- $border: grayscale($border);
182
- $border-bottom: grayscale($border-bottom);
183
- $fourth-stop: grayscale($fourth-stop);
184
- $inset-shadow: grayscale($inset-shadow);
185
- $second-stop: grayscale($second-stop);
186
- $text-shadow: grayscale($text-shadow);
187
- $third-stop: grayscale($third-stop);
188
- }
189
-
190
- border: 1px solid $border;
191
- border-bottom: 1px solid $border-bottom;
192
- border-radius: 5px;
193
- box-shadow: inset 0 1px 0 0 $inset-shadow;
194
- color: $color;
195
- display: inline-block;
196
- font-size: $textsize;
197
- font-weight: bold;
198
- @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
199
- padding: $padding;
200
- text-align: center;
201
- text-decoration: none;
202
- text-shadow: 0 -1px 1px $text-shadow;
203
-
204
- &:hover:not(:disabled) {
205
- $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
206
- $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
207
- $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
208
- $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
209
-
210
- @if $grayscale == true {
211
- $first-stop-hover: grayscale($first-stop-hover);
212
- $second-stop-hover: grayscale($second-stop-hover);
213
- $third-stop-hover: grayscale($third-stop-hover);
214
- $fourth-stop-hover: grayscale($fourth-stop-hover);
215
- }
216
-
217
- cursor: pointer;
218
- @include linear-gradient(top, $first-stop-hover 0%,
219
- $second-stop-hover 50%,
220
- $third-stop-hover 50%,
221
- $fourth-stop-hover 100%);
222
- }
223
-
224
- &:active:not(:disabled),
225
- &:focus:not(:disabled) {
226
- $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
227
-
228
- @if $grayscale == true {
229
- $inset-shadow-active: grayscale($inset-shadow-active);
230
- }
231
-
232
- box-shadow: inset 0 0 20px 0 $inset-shadow-active;
233
- }
234
- }
235
-
236
-
237
- // Pill Button
238
- //************************************************************************//
239
- @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
240
- $color: hsl(0, 0, 100%);
241
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
242
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
243
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
244
- $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
245
- $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
246
- $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
247
-
248
- @if is-light($base-color) {
249
- $color: hsl(0, 0, 20%);
250
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
251
- }
252
-
253
- @if $grayscale == true {
254
- $border-bottom: grayscale($border-bottom);
255
- $border-sides: grayscale($border-sides);
256
- $border-top: grayscale($border-top);
257
- $inset-shadow: grayscale($inset-shadow);
258
- $stop-gradient: grayscale($stop-gradient);
259
- $text-shadow: grayscale($text-shadow);
260
- }
261
-
262
- border: 1px solid $border-top;
263
- border-color: $border-top $border-sides $border-bottom;
264
- border-radius: 16px;
265
- box-shadow: inset 0 1px 0 0 $inset-shadow;
266
- color: $color;
267
- display: inline-block;
268
- font-size: $textsize;
269
- font-weight: normal;
270
- line-height: 1;
271
- @include linear-gradient ($base-color, $stop-gradient);
272
- padding: $padding;
273
- text-align: center;
274
- text-decoration: none;
275
- text-shadow: 0 -1px 1px $text-shadow;
276
- background-clip: padding-box;
277
-
278
- &:hover:not(:disabled) {
279
- $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
280
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
281
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
282
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
283
- $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
284
- $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
285
- $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
286
-
287
- @if $grayscale == true {
288
- $base-color-hover: grayscale($base-color-hover);
289
- $border-bottom: grayscale($border-bottom);
290
- $border-sides: grayscale($border-sides);
291
- $border-top: grayscale($border-top);
292
- $inset-shadow-hover: grayscale($inset-shadow-hover);
293
- $stop-gradient-hover: grayscale($stop-gradient-hover);
294
- $text-shadow-hover: grayscale($text-shadow-hover);
295
- }
296
-
297
- border: 1px solid $border-top;
298
- border-color: $border-top $border-sides $border-bottom;
299
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
300
- cursor: pointer;
301
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
302
- text-shadow: 0 -1px 1px $text-shadow-hover;
303
- background-clip: padding-box;
304
- }
305
-
306
- &:active:not(:disabled),
307
- &:focus:not(:disabled) {
308
- $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
309
- $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
310
- $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
311
- $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
312
- $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
313
-
314
- @if $grayscale == true {
315
- $active-color: grayscale($active-color);
316
- $border-active: grayscale($border-active);
317
- $border-bottom-active: grayscale($border-bottom-active);
318
- $inset-shadow-active: grayscale($inset-shadow-active);
319
- $text-shadow-active: grayscale($text-shadow-active);
320
- }
321
-
322
- background: $active-color;
323
- border: 1px solid $border-active;
324
- border-bottom: 1px solid $border-bottom-active;
325
- box-shadow: inset 0 0 6px 3px $inset-shadow-active;
326
- text-shadow: 0 -1px 1px $text-shadow-active;
327
- }
328
- }
329
-
330
-
331
-
332
- // Flat Button
333
- //************************************************************************//
334
- @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
335
- $color: hsl(0, 0, 100%);
336
-
337
- @if is-light($base-color) {
338
- $color: hsl(0, 0, 20%);
339
- }
340
-
341
- background-color: $base-color;
342
- border-radius: 3px;
343
- border: none;
344
- color: $color;
345
- display: inline-block;
346
- font-size: inherit;
347
- font-weight: bold;
348
- padding: 7px 18px;
349
- text-decoration: none;
350
- background-clip: padding-box;
351
-
352
- &:hover:not(:disabled){
353
- $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
354
-
355
- @if $grayscale == true {
356
- $base-color-hover: grayscale($base-color-hover);
357
- }
358
-
359
- background-color: $base-color-hover;
360
- cursor: pointer;
361
- }
362
-
363
- &:active:not(:disabled),
364
- &:focus:not(:disabled) {
365
- $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
366
-
367
- @if $grayscale == true {
368
- $base-color-active: grayscale($base-color-active);
369
- }
370
-
371
- background-color: $base-color-active;
372
- cursor: pointer;
373
- }
374
- }
@@ -1,39 +0,0 @@
1
- // Flexible grid
2
- @function flex-grid($columns, $container-columns: $fg-max-columns) {
3
- $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5
- @return percentage($width / $container-width);
6
- }
7
-
8
- // Flexible gutter
9
- @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11
- @return percentage($gutter / $container-width);
12
- }
13
-
14
- // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
15
- // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16
- //
17
- // The calculation presumes that your column structure will be missing the last gutter:
18
- //
19
- // -- column -- gutter -- column -- gutter -- column
20
- //
21
- // $fg-column: 60px; // Column Width
22
- // $fg-gutter: 25px; // Gutter Width
23
- // $fg-max-columns: 12; // Total Columns For Main Container
24
- //
25
- // div {
26
- // width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
27
- // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
28
- //
29
- // p {
30
- // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
31
- // float: left;
32
- // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
33
- // }
34
- //
35
- // blockquote {
36
- // float: left;
37
- // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
38
- // }
39
- // }