bootswatch-rails 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/HISTORY.md CHANGED
@@ -1,3 +1,8 @@
1
+ ## 0.3.1 (2013-01-14)
2
+
3
+ * Add !default to all bootswatch variables, making them overridable
4
+
5
+
1
6
  ## 0.3.0 (2013-01-13)
2
7
 
3
8
  * Add a converter script for most of the repetitive less/sass conversion work
data/README.md CHANGED
@@ -48,6 +48,18 @@ considering that you're using
48
48
  // Whatever application styles you have go last
49
49
  @import "base";
50
50
 
51
+ ### Overriding bootswatch variables
52
+
53
+ Since version 3.1 it's possible to override variables.
54
+
55
+ // First set or import your overrides
56
+ $textColor: #000;
57
+
58
+ // Then load variables
59
+ @import "bootswatch/journal/variables";
60
+
61
+ // Then the rest as shown above...
62
+
51
63
  ## Bootswatches
52
64
 
53
65
  Included bootswatches
data/converter CHANGED
@@ -1,6 +1,7 @@
1
1
  #!/usr/bin/env ruby
2
2
 
3
3
  src_file_path, dst_file_path = *ARGV
4
+ dst_file_path ||= src_file_path
4
5
  lines = File.readlines(src_file_path)
5
6
 
6
7
  indent_size_calc = lambda do |line|
@@ -78,10 +79,18 @@ resolve_ampersand_dash = lambda do |line, index|
78
79
  end
79
80
  end
80
81
 
81
- clear_out_escapes = lambda do |line, index|
82
+ clear_out_escapes = lambda do |line, _|
82
83
  line.gsub(/~"([^"]+)"/) { $1 }
83
84
  end
84
85
 
86
+ mark_variables_default = lambda do |line, _|
87
+ if line =~ /^\s*\$/ && line.include?(':')
88
+ line.sub(';', ' !default;')
89
+ else
90
+ line
91
+ end
92
+ end
93
+
85
94
  line_processors = [
86
95
  swap_variable_prefix,
87
96
  # turn_percentages_into_percentiles,
@@ -93,6 +102,10 @@ line_processors = [
93
102
  clear_out_escapes
94
103
  ]
95
104
 
105
+ if File.basename(src_file_path) =~ /variables/
106
+ line_processors << mark_variables_default
107
+ end
108
+
96
109
  comment_line = /^\s*\/\//
97
110
 
98
111
  processed_lines = lines.map.with_index do |line, index|
@@ -1,5 +1,5 @@
1
1
  module Bootswatch
2
2
  module Rails
3
- VERSION = "0.3.0"
3
+ VERSION = "0.3.1"
4
4
  end
5
5
  end
@@ -9,167 +9,167 @@
9
9
 
10
10
  // Grays
11
11
  // -------------------------
12
- $black: #000;
13
- $grayDarker: #111;
14
- $grayDark: #444;
15
- $gray: #555;
16
- $grayLight: #aaa;
17
- $grayLighter: #ddd;
18
- $white: #fff;
12
+ $black: #000 !default;
13
+ $grayDarker: #111 !default;
14
+ $grayDark: #444 !default;
15
+ $gray: #555 !default;
16
+ $grayLight: #aaa !default;
17
+ $grayLighter: #ddd !default;
18
+ $white: #fff !default;
19
19
 
20
20
 
21
21
  // Accent colors
22
22
  // -------------------------
23
- $blue: #00BCE1;
24
- $blueDark: #1269B0;
25
- $green: #48CA3B;
26
- $red: #AD1D28;
27
- $yellow: #DEBB27;
28
- $orange: #DF6E1E;
29
- $pink: #FFBCB9;
30
- $purple: #4D3A7D;
23
+ $blue: #00BCE1 !default;
24
+ $blueDark: #1269B0 !default;
25
+ $green: #48CA3B !default;
26
+ $red: #AD1D28 !default;
27
+ $yellow: #DEBB27 !default;
28
+ $orange: #DF6E1E !default;
29
+ $pink: #FFBCB9 !default;
30
+ $purple: #4D3A7D !default;
31
31
 
32
32
 
33
33
  // Scaffolding
34
34
  // -------------------------
35
- $bodyBackground: #003F4D;
36
- $textColor: rgba(255, 255, 255, 0.9);
35
+ $bodyBackground: #003F4D !default;
36
+ $textColor: rgba(255, 255, 255, 0.9) !default;
37
37
 
38
38
 
39
39
  // Links
40
40
  // -------------------------
41
- $linkColor: lighten($yellow, 15%);
42
- $linkColorHover: $linkColor;
41
+ $linkColor: lighten($yellow, 15%) !default;
42
+ $linkColorHover: $linkColor !default;
43
43
 
44
44
 
45
45
  // Typography
46
46
  // -------------------------
47
- $sansFontFamily: 'Cabin', Verdana, sans-serif;
48
- $serifFontFamily: Georgia, "Times New Roman", Times, serif;
49
- $monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
47
+ $sansFontFamily: 'Cabin', Verdana, sans-serif !default;
48
+ $serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
49
+ $monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace !default;
50
50
 
51
- $baseFontSize: 14px;
52
- $baseFontFamily: $sansFontFamily;
53
- $baseLineHeight: 20px;
54
- $altFontFamily: $serifFontFamily;
51
+ $baseFontSize: 14px !default;
52
+ $baseFontFamily: $sansFontFamily !default;
53
+ $baseLineHeight: 20px !default;
54
+ $altFontFamily: $serifFontFamily !default;
55
55
 
56
- $headingsFontFamily: 'Lobster', cursive; // empty to use BS default, $baseFontFamily
57
- $headingsFontWeight: normal; // instead of browser default, bold
58
- $headingsColor: inherit; // empty to use BS default, $textColor
56
+ $headingsFontFamily: 'Lobster', cursive !default; // empty to use BS default, $baseFontFamily
57
+ $headingsFontWeight: normal !default; // instead of browser default, bold
58
+ $headingsColor: inherit !default; // empty to use BS default, $textColor
59
59
 
60
60
 
61
61
  // Component sizing
62
62
  // -------------------------
63
63
  // Based on 14px font-size and 20px line-height
64
64
 
65
- $fontSizeLarge: $baseFontSize * 1.25; // ~18px
66
- $fontSizeSmall: $baseFontSize * 0.85; // ~12px
67
- $fontSizeMini: $baseFontSize * 0.75; // ~11px
65
+ $fontSizeLarge: $baseFontSize * 1.25 !default; // ~18px
66
+ $fontSizeSmall: $baseFontSize * 0.85 !default; // ~12px
67
+ $fontSizeMini: $baseFontSize * 0.75 !default; // ~11px
68
68
 
69
- $paddingLarge: 20px 24px; // 58px
70
- $paddingSmall: 8px 12px; // 34px
71
- $paddingMini: 4px 8px; // 28px
69
+ $paddingLarge: 20px 24px !default; // 58px
70
+ $paddingSmall: 8px 12px !default; // 34px
71
+ $paddingMini: 4px 8px !default; // 28px
72
72
 
73
- $baseBorderRadius: 0;
74
- $borderRadiusLarge: 6px;
75
- $borderRadiusSmall: 3px;
73
+ $baseBorderRadius: 0 !default;
74
+ $borderRadiusLarge: 6px !default;
75
+ $borderRadiusSmall: 3px !default;
76
76
 
77
77
 
78
78
  // Tables
79
79
  // -------------------------
80
- $tableBackground: lighten(#147E88, 10%); // overall background-color
81
- $tableBackgroundAccent: lighten(#147E88, 15%); // for striping
82
- $tableBackgroundHover: rgba(255, 255, 255, 0.4); // for hover
83
- $tableBorder: lighten(#147E88, 12%); // table and cell border
80
+ $tableBackground: lighten(#147E88, 10%) !default; // overall background-color
81
+ $tableBackgroundAccent: lighten(#147E88, 15%) !default; // for striping
82
+ $tableBackgroundHover: rgba(255, 255, 255, 0.4) !default; // for hover
83
+ $tableBorder: lighten(#147E88, 12%) !default; // table and cell border
84
84
 
85
85
 
86
86
  // Navbar
87
87
  // -------------------------
88
- $navbarCollapseWidth: 979px;
89
- $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
88
+ $navbarCollapseWidth: 979px !default;
89
+ $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1 !default;
90
90
 
91
- $navbarHeight: 50px;
92
- $navbarBackgroundHighlight: $red;
93
- $navbarBackground: $red;
94
- $navbarBorder: darken($navbarBackground, 12%);
91
+ $navbarHeight: 50px !default;
92
+ $navbarBackgroundHighlight: $red !default;
93
+ $navbarBackground: $red !default;
94
+ $navbarBorder: darken($navbarBackground, 12%) !default;
95
95
 
96
- $navbarText: $white;
97
- $navbarLinkColor: $white;
98
- $navbarLinkColorHover: $white;
99
- $navbarLinkColorActive: $navbarLinkColorHover;
100
- $navbarLinkBackgroundHover: lighten($navbarBackground, 10%);
101
- $navbarLinkBackgroundActive: lighten($navbarBackground, 10%);
96
+ $navbarText: $white !default;
97
+ $navbarLinkColor: $white !default;
98
+ $navbarLinkColorHover: $white !default;
99
+ $navbarLinkColorActive: $navbarLinkColorHover !default;
100
+ $navbarLinkBackgroundHover: lighten($navbarBackground, 10%) !default;
101
+ $navbarLinkBackgroundActive: lighten($navbarBackground, 10%) !default;
102
102
 
103
- $navbarBrandColor: $navbarLinkColor;
103
+ $navbarBrandColor: $navbarLinkColor !default;
104
104
 
105
105
  // Inverted navbar
106
- $navbarInverseBackground: $yellow;
107
- $navbarInverseBackgroundHighlight: $yellow;
108
- $navbarInverseBorder: rgba(0, 0, 0, 0.1);
106
+ $navbarInverseBackground: $yellow !default;
107
+ $navbarInverseBackgroundHighlight: $yellow !default;
108
+ $navbarInverseBorder: rgba(0, 0, 0, 0.1) !default;
109
109
 
110
- $navbarInverseText: $white;
111
- $navbarInverseLinkColor: $white;
112
- $navbarInverseLinkColorHover: $white;
113
- $navbarInverseLinkColorActive: $white;
114
- $navbarInverseLinkBackgroundHover: rgba(255, 255, 255, 0.2);
115
- $navbarInverseLinkBackgroundActive: rgba(255, 255, 255, 0.2);
110
+ $navbarInverseText: $white !default;
111
+ $navbarInverseLinkColor: $white !default;
112
+ $navbarInverseLinkColorHover: $white !default;
113
+ $navbarInverseLinkColorActive: $white !default;
114
+ $navbarInverseLinkBackgroundHover: rgba(255, 255, 255, 0.2) !default;
115
+ $navbarInverseLinkBackgroundActive: rgba(255, 255, 255, 0.2) !default;
116
116
 
117
- $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%);
118
- $navbarInverseSearchBackgroundFocus: $white;
119
- $navbarInverseSearchBorder: $navbarInverseBackground;
120
- $navbarInverseSearchPlaceholderColor: $white;
117
+ $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default;
118
+ $navbarInverseSearchBackgroundFocus: $white !default;
119
+ $navbarInverseSearchBorder: $navbarInverseBackground !default;
120
+ $navbarInverseSearchPlaceholderColor: $white !default;
121
121
 
122
- $navbarInverseBrandColor: $navbarInverseLinkColor;
122
+ $navbarInverseBrandColor: $navbarInverseLinkColor !default;
123
123
 
124
124
 
125
125
  // Buttons
126
126
  // -------------------------
127
- $btnBackground: $grayLighter;
128
- $btnBackgroundHighlight: $grayLighter;
129
- $btnBorder: rgba(0, 0, 0, 0);
127
+ $btnBackground: $grayLighter !default;
128
+ $btnBackgroundHighlight: $grayLighter !default;
129
+ $btnBorder: rgba(0, 0, 0, 0) !default;
130
130
 
131
- $btnPrimaryBackground: $navbarBackground;
132
- $btnPrimaryBackgroundHighlight: $navbarBackground;
131
+ $btnPrimaryBackground: $navbarBackground !default;
132
+ $btnPrimaryBackgroundHighlight: $navbarBackground !default;
133
133
 
134
- $btnInfoBackground: $purple;
135
- $btnInfoBackgroundHighlight: $purple;
134
+ $btnInfoBackground: $purple !default;
135
+ $btnInfoBackgroundHighlight: $purple !default;
136
136
 
137
- $btnSuccessBackground: $green;
138
- $btnSuccessBackgroundHighlight: $green;
137
+ $btnSuccessBackground: $green !default;
138
+ $btnSuccessBackgroundHighlight: $green !default;
139
139
 
140
- $btnWarningBackground: $orange;
141
- $btnWarningBackgroundHighlight: $orange;
140
+ $btnWarningBackground: $orange !default;
141
+ $btnWarningBackgroundHighlight: $orange !default;
142
142
 
143
- $btnDangerBackground: $yellow;
144
- $btnDangerBackgroundHighlight: $yellow;
143
+ $btnDangerBackground: $yellow !default;
144
+ $btnDangerBackgroundHighlight: $yellow !default;
145
145
 
146
- $btnInverseBackground: #27666D;
147
- $btnInverseBackgroundHighlight: #27666D;
146
+ $btnInverseBackground: #27666D !default;
147
+ $btnInverseBackgroundHighlight: #27666D !default;
148
148
 
149
149
 
150
150
  // Forms
151
151
  // -------------------------
152
- $inputBackground: $white;
153
- $inputBorder: transparent;
154
- $inputBorderRadius: $baseBorderRadius;
155
- $inputDisabledBackground: $grayLighter;
156
- $formActionsBackground: transparent;
157
- $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
152
+ $inputBackground: $white !default;
153
+ $inputBorder: transparent !default;
154
+ $inputBorderRadius: $baseBorderRadius !default;
155
+ $inputDisabledBackground: $grayLighter !default;
156
+ $formActionsBackground: transparent !default;
157
+ $inputHeight: $baseLineHeight + 10px !default; // base line-height + 8px vertical padding + 2px top/bottom border
158
158
 
159
159
 
160
160
  // Dropdowns
161
161
  // -------------------------
162
- $dropdownBackground: $white;
163
- $dropdownBorder: rgba(0,0,0,.2);
164
- $dropdownDividerTop: #e5e5e5;
165
- $dropdownDividerBottom: $white;
162
+ $dropdownBackground: $white !default;
163
+ $dropdownBorder: rgba(0,0,0,.2) !default;
164
+ $dropdownDividerTop: #e5e5e5 !default;
165
+ $dropdownDividerBottom: $white !default;
166
166
 
167
- $dropdownLinkColor: $grayDark;
168
- $dropdownLinkColorHover: $white;
169
- $dropdownLinkColorActive: $white;
167
+ $dropdownLinkColor: $grayDark !default;
168
+ $dropdownLinkColorHover: $white !default;
169
+ $dropdownLinkColorActive: $white !default;
170
170
 
171
- $dropdownLinkBackgroundActive: $red;
172
- $dropdownLinkBackgroundHover: $red;
171
+ $dropdownLinkBackgroundActive: $red !default;
172
+ $dropdownLinkBackgroundHover: $red !default;
173
173
 
174
174
 
175
175
 
@@ -181,88 +181,88 @@ $dropdownLinkBackgroundHover: $red;
181
181
  // -------------------------
182
182
  // Used for a bird's eye view of components dependent on the z-axis
183
183
  // Try to avoid customizing these :)
184
- $zindexDropdown: 1000;
185
- $zindexPopover: 1010;
186
- $zindexTooltip: 1020;
187
- $zindexFixedNavbar: 1030;
188
- $zindexModalBackdrop: 1040;
189
- $zindexModal: 1050;
184
+ $zindexDropdown: 1000 !default;
185
+ $zindexPopover: 1010 !default;
186
+ $zindexTooltip: 1020 !default;
187
+ $zindexFixedNavbar: 1030 !default;
188
+ $zindexModalBackdrop: 1040 !default;
189
+ $zindexModal: 1050 !default;
190
190
 
191
191
 
192
192
  // Sprite icons path
193
193
  // -------------------------
194
- $iconSpritePath: "../img/glyphicons-halflings.png";
195
- $iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
194
+ $iconSpritePath: "../img/glyphicons-halflings.png" !default;
195
+ $iconWhiteSpritePath: "../img/glyphicons-halflings-white.png" !default;
196
196
 
197
197
 
198
198
  // Input placeholder text color
199
199
  // -------------------------
200
- $placeholderText: $grayLight;
200
+ $placeholderText: $grayLight !default;
201
201
 
202
202
 
203
203
  // Hr border color
204
204
  // -------------------------
205
- $hrBorder: transparent;
205
+ $hrBorder: transparent !default;
206
206
 
207
207
 
208
208
  // Horizontal forms & lists
209
209
  // -------------------------
210
- $horizontalComponentOffset: 180px;
210
+ $horizontalComponentOffset: 180px !default;
211
211
 
212
212
 
213
213
  // Wells
214
214
  // -------------------------
215
- $wellBackground: #3CB9C6;
215
+ $wellBackground: #3CB9C6 !default;
216
216
 
217
217
 
218
218
  // Pagination
219
219
  // -------------------------
220
- $paginationBackground: #3CB9C6;
221
- $paginationBorder: transparent;
222
- $paginationActiveBackground: rgba(255, 255, 255, 0.4);
220
+ $paginationBackground: #3CB9C6 !default;
221
+ $paginationBorder: transparent !default;
222
+ $paginationActiveBackground: rgba(255, 255, 255, 0.4) !default;
223
223
 
224
224
 
225
225
  // Hero unit
226
226
  // -------------------------
227
- $heroUnitBackground: #3CB9C6;
228
- $heroUnitHeadingColor: inherit;
229
- $heroUnitLeadColor: inherit;
227
+ $heroUnitBackground: #3CB9C6 !default;
228
+ $heroUnitHeadingColor: inherit !default;
229
+ $heroUnitLeadColor: inherit !default;
230
230
 
231
231
 
232
232
  // Form states and alerts
233
233
  // -------------------------
234
- $warningText: #c09853;
235
- $warningBackground: #fcf8e3;
236
- $warningBorder: darken(adjust-hue($warningBackground, -10), 3%);
234
+ $warningText: #c09853 !default;
235
+ $warningBackground: #fcf8e3 !default;
236
+ $warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
237
237
 
238
- $errorText: #b94a48;
239
- $errorBackground: #f2dede;
240
- $errorBorder: darken(adjust-hue($errorBackground, -10), 3%);
238
+ $errorText: #b94a48 !default;
239
+ $errorBackground: #f2dede !default;
240
+ $errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default;
241
241
 
242
- $successText: #468847;
243
- $successBackground: #dff0d8;
244
- $successBorder: darken(adjust-hue($successBackground, -10), 5%);
242
+ $successText: #468847 !default;
243
+ $successBackground: #dff0d8 !default;
244
+ $successBorder: darken(adjust-hue($successBackground, -10), 5%) !default;
245
245
 
246
- $infoText: #3a87ad;
247
- $infoBackground: #d9edf7;
248
- $infoBorder: darken(adjust-hue($infoBackground, -10), 7%);
246
+ $infoText: #3a87ad !default;
247
+ $infoBackground: #d9edf7 !default;
248
+ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
249
249
 
250
250
 
251
251
  // Tooltips and popovers
252
252
  // -------------------------
253
- $tooltipColor: #fff;
254
- $tooltipBackground: #000;
255
- $tooltipArrowWidth: 5px;
256
- $tooltipArrowColor: $tooltipBackground;
253
+ $tooltipColor: #fff !default;
254
+ $tooltipBackground: #000 !default;
255
+ $tooltipArrowWidth: 5px !default;
256
+ $tooltipArrowColor: $tooltipBackground !default;
257
257
 
258
- $popoverBackground: #fff;
259
- $popoverArrowWidth: 10px;
260
- $popoverArrowColor: #fff;
261
- $popoverTitleBackground: $navbarBackground;
258
+ $popoverBackground: #fff !default;
259
+ $popoverArrowWidth: 10px !default;
260
+ $popoverArrowColor: #fff !default;
261
+ $popoverTitleBackground: $navbarBackground !default;
262
262
 
263
263
  // Special enhancement for popovers
264
- $popoverArrowOuterWidth: $popoverArrowWidth + 1;
265
- $popoverArrowOuterColor: rgba(0,0,0,.25);
264
+ $popoverArrowOuterWidth: $popoverArrowWidth + 1 !default;
265
+ $popoverArrowOuterColor: rgba(0,0,0,.25) !default;
266
266
 
267
267
 
268
268
 
@@ -272,31 +272,31 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
272
272
 
273
273
  // Default 940px grid
274
274
  // -------------------------
275
- $gridColumns: 12;
276
- $gridColumnWidth: 60px;
277
- $gridGutterWidth: 20px;
278
- $gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
275
+ $gridColumns: 12 !default;
276
+ $gridColumnWidth: 60px !default;
277
+ $gridGutterWidth: 20px !default;
278
+ $gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
279
279
 
280
280
  // 1200px min
281
- $gridColumnWidth1200: 70px;
282
- $gridGutterWidth1200: 30px;
283
- $gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
281
+ $gridColumnWidth1200: 70px !default;
282
+ $gridGutterWidth1200: 30px !default;
283
+ $gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
284
284
 
285
285
  // 768px-979px
286
- $gridColumnWidth768: 42px;
287
- $gridGutterWidth768: 20px;
288
- $gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
286
+ $gridColumnWidth768: 42px !default;
287
+ $gridGutterWidth768: 20px !default;
288
+ $gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
289
289
 
290
290
 
291
291
  // Fluid grid
292
292
  // -------------------------
293
- $fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
294
- $fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
293
+ $fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
294
+ $fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
295
295
 
296
296
  // 1200px min
297
- $fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
298
- $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
297
+ $fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
298
+ $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
299
299
 
300
300
  // 768px-979px
301
- $fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
302
- $fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
301
+ $fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
302
+ $fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;