bootstrap-generators 2.3.1.2 → 2.3.2
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.
- checksums.yaml +4 -4
- data/README.md +24 -623
- data/Rakefile +106 -0
- data/lib/bootstrap/generators/version.rb +1 -1
- data/lib/generators/bootstrap/install/install_generator.rb +5 -2
- data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +3 -3
- data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/index.html.erb +1 -1
- data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/index.html.haml +1 -1
- data/readme-template.md.erb +179 -0
- data/test/lib/generators/bootstrap/install_generator_test.rb +9 -1
- data/vendor/assets/javascripts/bootstrap-affix.js +3 -3
- data/vendor/assets/javascripts/bootstrap-alert.js +3 -3
- data/vendor/assets/javascripts/bootstrap-button.js +3 -3
- data/vendor/assets/javascripts/bootstrap-carousel.js +3 -3
- data/vendor/assets/javascripts/bootstrap-collapse.js +3 -3
- data/vendor/assets/javascripts/bootstrap-dropdown.js +8 -4
- data/vendor/assets/javascripts/bootstrap-modal.js +3 -3
- data/vendor/assets/javascripts/bootstrap-popover.js +3 -3
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +3 -3
- data/vendor/assets/javascripts/bootstrap-tab.js +3 -3
- data/vendor/assets/javascripts/bootstrap-tooltip.js +3 -3
- data/vendor/assets/javascripts/bootstrap-transition.js +3 -3
- data/vendor/assets/javascripts/bootstrap-typeahead.js +3 -3
- data/vendor/assets/javascripts/bootstrap.js +6 -6
- data/vendor/assets/stylesheets/bootstrap-responsive.css +1 -1
- data/vendor/assets/stylesheets/bootstrap.css +12 -3
- data/vendor/twitter/bootstrap/less/bootstrap.less +3 -3
- data/vendor/twitter/bootstrap/less/dropdowns.less +11 -0
- data/vendor/twitter/bootstrap/less/mixins.less +2 -2
- data/vendor/twitter/bootstrap/less/responsive.less +3 -3
- data/vendor/twitter/bootstrap/less/type.less +1 -1
- data/vendor/twitter/bootstrap/less/variables.less +2 -2
- data/vendor/twitter/bootstrap/sass/_dropdowns.scss +11 -0
- data/vendor/twitter/bootstrap/sass/_mixins.scss +25 -19
- data/vendor/twitter/bootstrap/sass/_variables.scss +5 -5
- data/vendor/twitter/bootstrap/sass/bootstrap.scss +1 -1
- data/vendor/twitter/bootstrap/sass/responsive.scss +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4b51e6b61fccb3eb3a16ed5e668be9873922274e
|
4
|
+
data.tar.gz: 8b8c15d91456fdb113c04164ca9d5813086f972f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bc6e59a6ac5b2920bc68496fd5b5892a20075ec81f455af97bcf5aa6f41bca9d14642e7459eb919544fcb3612e5efa5a77e3fbdf0a606723fc50d823cafd6e5f
|
7
|
+
data.tar.gz: 4d344bd55b77603a2a85b8d21a5b28f07671d61ae7e133a568bfaa2f30622497b2b0b5a6d6a6b8138dacce5fadfed2e5c052cad1997bec50ac8f9ce4ca1417d4
|
data/README.md
CHANGED
@@ -2,7 +2,11 @@
|
|
2
2
|
|
3
3
|
[](https://travis-ci.org/decioferreira/bootstrap-generators)
|
4
4
|
|
5
|
-
Bootstrap-generators provides [Twitter Bootstrap](http://twitter.github.com/bootstrap/) generators for Rails 4 (supported Rails >= 3.1). Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
|
5
|
+
Bootstrap-generators provides [Twitter Bootstrap](http://twitter.github.com/bootstrap/) generators for Rails 4 (supported Rails >= 3.1). Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
|
6
|
+
|
7
|
+
## Current Twitter Bootstrap version
|
8
|
+
|
9
|
+
The current version of Twitter Bootstrap is 2.3.2.
|
6
10
|
|
7
11
|
## Installing Gem
|
8
12
|
|
@@ -12,7 +16,7 @@ In your Gemfile, add this line:
|
|
12
16
|
|
13
17
|
Or you can install from latest build:
|
14
18
|
|
15
|
-
gem 'bootstrap-generators',
|
19
|
+
gem 'bootstrap-generators', :git => 'git://github.com/decioferreira/bootstrap-generators.git'
|
16
20
|
|
17
21
|
By default Bootstrap Generators requires [SimpleForm 2.0](https://github.com/plataformatec/simple_form). Add the dependency on your Gemfile:
|
18
22
|
|
@@ -38,7 +42,7 @@ Once you've done that, any time you generate a controller or scaffold, you'll ge
|
|
38
42
|
|
39
43
|
rails generate scaffold post title:string body:text published:boolean
|
40
44
|
|
41
|
-
You can easily
|
45
|
+
You can easily customize colors, grid system, fonts, and much more by editing `bootstrap-variables.[less|scss]` on your application assets folder.
|
42
46
|
|
43
47
|
## Usage
|
44
48
|
|
@@ -70,8 +74,8 @@ To print the options and usage run the command `rails generate bootstrap:install
|
|
70
74
|
|
71
75
|
There are the two available layouts, based on Bootstrap's quick-start examples:
|
72
76
|
|
73
|
-
* [Basic marketing site](http://
|
74
|
-
* [Fluid layout](http://
|
77
|
+
* [Basic marketing site](http://getbootstrap.com/2.3.2/examples/hero.html) (default)
|
78
|
+
* [Fluid layout](http://getbootstrap.com/2.3.2/examples/fluid.html)
|
75
79
|
|
76
80
|
To select one of these layouts just pass the option `--layout=LAYOUT` to the install generator.
|
77
81
|
|
@@ -100,6 +104,8 @@ Supported template engines:
|
|
100
104
|
* ERB
|
101
105
|
* Haml
|
102
106
|
|
107
|
+
##### Haml
|
108
|
+
|
103
109
|
Add the dependency on your Gemfile:
|
104
110
|
|
105
111
|
gem 'haml-rails'
|
@@ -116,6 +122,8 @@ Supported stylesheet engines:
|
|
116
122
|
* SCSS
|
117
123
|
* LESS
|
118
124
|
|
125
|
+
##### SCSS
|
126
|
+
|
119
127
|
Make sure you have `sass-rails` dependency on your Gemfile:
|
120
128
|
|
121
129
|
gem 'sass-rails'
|
@@ -124,9 +132,9 @@ And then run:
|
|
124
132
|
|
125
133
|
rails generate bootstrap:install --stylesheet-engine=scss
|
126
134
|
|
127
|
-
Now you can
|
135
|
+
Now you can customize the look and feel of Bootstrap.
|
128
136
|
|
129
|
-
|
137
|
+
##### LESS
|
130
138
|
|
131
139
|
Add the dependency on your Gemfile:
|
132
140
|
|
@@ -136,7 +144,7 @@ And then run:
|
|
136
144
|
|
137
145
|
rails generate bootstrap:install --stylesheet-engine=less
|
138
146
|
|
139
|
-
Now you can
|
147
|
+
Now you can customize the look and feel of Bootstrap.
|
140
148
|
|
141
149
|
## Assets
|
142
150
|
|
@@ -144,615 +152,7 @@ Now you can [customize](http://decioferreira.github.com/bootstrap-generators/) t
|
|
144
152
|
|
145
153
|
### Customize and extend Bootstrap
|
146
154
|
|
147
|
-
|
148
|
-
|
149
|
-
LESS version:
|
150
|
-
|
151
|
-
//
|
152
|
-
// Variables
|
153
|
-
// --------------------------------------------------
|
154
|
-
|
155
|
-
|
156
|
-
// Global values
|
157
|
-
// --------------------------------------------------
|
158
|
-
|
159
|
-
|
160
|
-
// Grays
|
161
|
-
// -------------------------
|
162
|
-
@black: #000;
|
163
|
-
@grayDarker: #222;
|
164
|
-
@grayDark: #333;
|
165
|
-
@gray: #555;
|
166
|
-
@grayLight: #999;
|
167
|
-
@grayLighter: #eee;
|
168
|
-
@white: #fff;
|
169
|
-
|
170
|
-
|
171
|
-
// Accent colors
|
172
|
-
// -------------------------
|
173
|
-
@blue: #049cdb;
|
174
|
-
@blueDark: #0064cd;
|
175
|
-
@green: #46a546;
|
176
|
-
@red: #9d261d;
|
177
|
-
@yellow: #ffc40d;
|
178
|
-
@orange: #f89406;
|
179
|
-
@pink: #c3325f;
|
180
|
-
@purple: #7a43b6;
|
181
|
-
|
182
|
-
|
183
|
-
// Scaffolding
|
184
|
-
// -------------------------
|
185
|
-
@bodyBackground: @white;
|
186
|
-
@textColor: @grayDark;
|
187
|
-
|
188
|
-
|
189
|
-
// Links
|
190
|
-
// -------------------------
|
191
|
-
@linkColor: #08c;
|
192
|
-
@linkColorHover: darken(@linkColor, 15%);
|
193
|
-
|
194
|
-
|
195
|
-
// Typography
|
196
|
-
// -------------------------
|
197
|
-
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
198
|
-
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
199
|
-
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
|
200
|
-
|
201
|
-
@baseFontSize: 14px;
|
202
|
-
@baseFontFamily: @sansFontFamily;
|
203
|
-
@baseLineHeight: 20px;
|
204
|
-
@altFontFamily: @serifFontFamily;
|
205
|
-
|
206
|
-
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
|
207
|
-
@headingsFontWeight: bold; // instead of browser default, bold
|
208
|
-
@headingsColor: inherit; // empty to use BS default, @textColor
|
209
|
-
|
210
|
-
|
211
|
-
// Component sizing
|
212
|
-
// -------------------------
|
213
|
-
// Based on 14px font-size and 20px line-height
|
214
|
-
|
215
|
-
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
|
216
|
-
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
|
217
|
-
@fontSizeMini: @baseFontSize * 0.75; // ~11px
|
218
|
-
|
219
|
-
@paddingLarge: 11px 19px; // 44px
|
220
|
-
@paddingSmall: 2px 10px; // 26px
|
221
|
-
@paddingMini: 0 6px; // 22px
|
222
|
-
|
223
|
-
@baseBorderRadius: 4px;
|
224
|
-
@borderRadiusLarge: 6px;
|
225
|
-
@borderRadiusSmall: 3px;
|
226
|
-
|
227
|
-
|
228
|
-
// Tables
|
229
|
-
// -------------------------
|
230
|
-
@tableBackground: transparent; // overall background-color
|
231
|
-
@tableBackgroundAccent: #f9f9f9; // for striping
|
232
|
-
@tableBackgroundHover: #f5f5f5; // for hover
|
233
|
-
@tableBorder: #ddd; // table and cell border
|
234
|
-
|
235
|
-
// Buttons
|
236
|
-
// -------------------------
|
237
|
-
@btnBackground: @white;
|
238
|
-
@btnBackgroundHighlight: darken(@white, 10%);
|
239
|
-
@btnBorder: #ccc;
|
240
|
-
|
241
|
-
@btnPrimaryBackground: @linkColor;
|
242
|
-
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
|
243
|
-
|
244
|
-
@btnInfoBackground: #5bc0de;
|
245
|
-
@btnInfoBackgroundHighlight: #2f96b4;
|
246
|
-
|
247
|
-
@btnSuccessBackground: #62c462;
|
248
|
-
@btnSuccessBackgroundHighlight: #51a351;
|
249
|
-
|
250
|
-
@btnWarningBackground: lighten(@orange, 15%);
|
251
|
-
@btnWarningBackgroundHighlight: @orange;
|
252
|
-
|
253
|
-
@btnDangerBackground: #ee5f5b;
|
254
|
-
@btnDangerBackgroundHighlight: #bd362f;
|
255
|
-
|
256
|
-
@btnInverseBackground: #444;
|
257
|
-
@btnInverseBackgroundHighlight: @grayDarker;
|
258
|
-
|
259
|
-
|
260
|
-
// Forms
|
261
|
-
// -------------------------
|
262
|
-
@inputBackground: @white;
|
263
|
-
@inputBorder: #ccc;
|
264
|
-
@inputBorderRadius: @baseBorderRadius;
|
265
|
-
@inputDisabledBackground: @grayLighter;
|
266
|
-
@formActionsBackground: #f5f5f5;
|
267
|
-
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
268
|
-
|
269
|
-
|
270
|
-
// Dropdowns
|
271
|
-
// -------------------------
|
272
|
-
@dropdownBackground: @white;
|
273
|
-
@dropdownBorder: rgba(0,0,0,.2);
|
274
|
-
@dropdownDividerTop: #e5e5e5;
|
275
|
-
@dropdownDividerBottom: @white;
|
276
|
-
|
277
|
-
@dropdownLinkColor: @grayDark;
|
278
|
-
@dropdownLinkColorHover: @white;
|
279
|
-
@dropdownLinkColorActive: @white;
|
280
|
-
|
281
|
-
@dropdownLinkBackgroundActive: @linkColor;
|
282
|
-
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
// COMPONENT VARIABLES
|
287
|
-
// --------------------------------------------------
|
288
|
-
|
289
|
-
|
290
|
-
// Z-index master list
|
291
|
-
// -------------------------
|
292
|
-
// Used for a bird's eye view of components dependent on the z-axis
|
293
|
-
// Try to avoid customizing these :)
|
294
|
-
@zindexDropdown: 1000;
|
295
|
-
@zindexPopover: 1010;
|
296
|
-
@zindexTooltip: 1030;
|
297
|
-
@zindexFixedNavbar: 1030;
|
298
|
-
@zindexModalBackdrop: 1040;
|
299
|
-
@zindexModal: 1050;
|
300
|
-
|
301
|
-
|
302
|
-
// Sprite icons path
|
303
|
-
// -------------------------
|
304
|
-
@iconSpritePath: "glyphicons-halflings.png";
|
305
|
-
@iconWhiteSpritePath: "glyphicons-halflings-white.png";
|
306
|
-
|
307
|
-
|
308
|
-
// Input placeholder text color
|
309
|
-
// -------------------------
|
310
|
-
@placeholderText: @grayLight;
|
311
|
-
|
312
|
-
|
313
|
-
// Hr border color
|
314
|
-
// -------------------------
|
315
|
-
@hrBorder: @grayLighter;
|
316
|
-
|
317
|
-
|
318
|
-
// Horizontal forms & lists
|
319
|
-
// -------------------------
|
320
|
-
@horizontalComponentOffset: 180px;
|
321
|
-
|
322
|
-
|
323
|
-
// Wells
|
324
|
-
// -------------------------
|
325
|
-
@wellBackground: #f5f5f5;
|
326
|
-
|
327
|
-
|
328
|
-
// Navbar
|
329
|
-
// -------------------------
|
330
|
-
@navbarCollapseWidth: 979px;
|
331
|
-
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
332
|
-
|
333
|
-
@navbarHeight: 40px;
|
334
|
-
@navbarBackgroundHighlight: #ffffff;
|
335
|
-
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
|
336
|
-
@navbarBorder: darken(@navbarBackground, 12%);
|
337
|
-
|
338
|
-
@navbarText: #777;
|
339
|
-
@navbarLinkColor: #777;
|
340
|
-
@navbarLinkColorHover: @grayDark;
|
341
|
-
@navbarLinkColorActive: @gray;
|
342
|
-
@navbarLinkBackgroundHover: transparent;
|
343
|
-
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
|
344
|
-
|
345
|
-
@navbarBrandColor: @navbarLinkColor;
|
346
|
-
|
347
|
-
// Inverted navbar
|
348
|
-
@navbarInverseBackground: #111111;
|
349
|
-
@navbarInverseBackgroundHighlight: #222222;
|
350
|
-
@navbarInverseBorder: #252525;
|
351
|
-
|
352
|
-
@navbarInverseText: @grayLight;
|
353
|
-
@navbarInverseLinkColor: @grayLight;
|
354
|
-
@navbarInverseLinkColorHover: @white;
|
355
|
-
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
|
356
|
-
@navbarInverseLinkBackgroundHover: transparent;
|
357
|
-
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
|
358
|
-
|
359
|
-
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
|
360
|
-
@navbarInverseSearchBackgroundFocus: @white;
|
361
|
-
@navbarInverseSearchBorder: @navbarInverseBackground;
|
362
|
-
@navbarInverseSearchPlaceholderColor: #ccc;
|
363
|
-
|
364
|
-
@navbarInverseBrandColor: @navbarInverseLinkColor;
|
365
|
-
|
366
|
-
|
367
|
-
// Pagination
|
368
|
-
// -------------------------
|
369
|
-
@paginationBackground: #fff;
|
370
|
-
@paginationBorder: #ddd;
|
371
|
-
@paginationActiveBackground: #f5f5f5;
|
372
|
-
|
373
|
-
|
374
|
-
// Hero unit
|
375
|
-
// -------------------------
|
376
|
-
@heroUnitBackground: @grayLighter;
|
377
|
-
@heroUnitHeadingColor: inherit;
|
378
|
-
@heroUnitLeadColor: inherit;
|
379
|
-
|
380
|
-
|
381
|
-
// Form states and alerts
|
382
|
-
// -------------------------
|
383
|
-
@warningText: #c09853;
|
384
|
-
@warningBackground: #fcf8e3;
|
385
|
-
@warningBorder: darken(spin(@warningBackground, -10), 3%);
|
386
|
-
|
387
|
-
@errorText: #b94a48;
|
388
|
-
@errorBackground: #f2dede;
|
389
|
-
@errorBorder: darken(spin(@errorBackground, -10), 3%);
|
390
|
-
|
391
|
-
@successText: #468847;
|
392
|
-
@successBackground: #dff0d8;
|
393
|
-
@successBorder: darken(spin(@successBackground, -10), 5%);
|
394
|
-
|
395
|
-
@infoText: #3a87ad;
|
396
|
-
@infoBackground: #d9edf7;
|
397
|
-
@infoBorder: darken(spin(@infoBackground, -10), 7%);
|
398
|
-
|
399
|
-
|
400
|
-
// Tooltips and popovers
|
401
|
-
// -------------------------
|
402
|
-
@tooltipColor: #fff;
|
403
|
-
@tooltipBackground: #000;
|
404
|
-
@tooltipArrowWidth: 5px;
|
405
|
-
@tooltipArrowColor: @tooltipBackground;
|
406
|
-
|
407
|
-
@popoverBackground: #fff;
|
408
|
-
@popoverArrowWidth: 10px;
|
409
|
-
@popoverArrowColor: #fff;
|
410
|
-
@popoverTitleBackground: darken(@popoverBackground, 3%);
|
411
|
-
|
412
|
-
// Special enhancement for popovers
|
413
|
-
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
|
414
|
-
@popoverArrowOuterColor: rgba(0,0,0,.25);
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
// GRID
|
419
|
-
// --------------------------------------------------
|
420
|
-
|
421
|
-
|
422
|
-
// Default 940px grid
|
423
|
-
// -------------------------
|
424
|
-
@gridColumns: 12;
|
425
|
-
@gridColumnWidth: 60px;
|
426
|
-
@gridGutterWidth: 20px;
|
427
|
-
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
428
|
-
|
429
|
-
// 1200px min
|
430
|
-
@gridColumnWidth1200: 70px;
|
431
|
-
@gridGutterWidth1200: 30px;
|
432
|
-
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
|
433
|
-
|
434
|
-
// 768px-979px
|
435
|
-
@gridColumnWidth768: 42px;
|
436
|
-
@gridGutterWidth768: 20px;
|
437
|
-
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
|
438
|
-
|
439
|
-
|
440
|
-
// Fluid grid
|
441
|
-
// -------------------------
|
442
|
-
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
|
443
|
-
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
|
444
|
-
|
445
|
-
// 1200px min
|
446
|
-
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
|
447
|
-
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
|
448
|
-
|
449
|
-
// 768px-979px
|
450
|
-
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
|
451
|
-
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
|
452
|
-
|
453
|
-
SCSS version:
|
454
|
-
|
455
|
-
//
|
456
|
-
// Variables
|
457
|
-
// --------------------------------------------------
|
458
|
-
|
459
|
-
|
460
|
-
// Global values
|
461
|
-
// --------------------------------------------------
|
462
|
-
|
463
|
-
|
464
|
-
// Grays
|
465
|
-
// -------------------------
|
466
|
-
$black: #000 !default;
|
467
|
-
$grayDarker: #222 !default;
|
468
|
-
$grayDark: #333 !default;
|
469
|
-
$gray: #555 !default;
|
470
|
-
$grayLight: #999 !default;
|
471
|
-
$grayLighter: #eee !default;
|
472
|
-
$white: #fff !default;
|
473
|
-
|
474
|
-
|
475
|
-
// Accent colors
|
476
|
-
// -------------------------
|
477
|
-
$blue: #049cdb !default;
|
478
|
-
$blueDark: #0064cd !default;
|
479
|
-
$green: #46a546 !default;
|
480
|
-
$red: #9d261d !default;
|
481
|
-
$yellow: #ffc40d !default;
|
482
|
-
$orange: #f89406 !default;
|
483
|
-
$pink: #c3325f !default;
|
484
|
-
$purple: #7a43b6 !default;
|
485
|
-
|
486
|
-
|
487
|
-
// Scaffolding
|
488
|
-
// -------------------------
|
489
|
-
$bodyBackground: $white !default;
|
490
|
-
$textColor: $grayDark !default;
|
491
|
-
|
492
|
-
|
493
|
-
// Links
|
494
|
-
// -------------------------
|
495
|
-
$linkColor: #08c !default;
|
496
|
-
$linkColorHover: darken($linkColor, 15%) !default;
|
497
|
-
|
498
|
-
|
499
|
-
// Typography
|
500
|
-
// -------------------------
|
501
|
-
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
502
|
-
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
503
|
-
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
504
|
-
|
505
|
-
$baseFontSize: 14px !default;
|
506
|
-
$baseFontFamily: $sansFontFamily !default;
|
507
|
-
$baseLineHeight: 20px !default;
|
508
|
-
$altFontFamily: $serifFontFamily !default;
|
509
|
-
|
510
|
-
$headingsFontFamily: inherit !default; // empty to use BS default, $baseFontFamily
|
511
|
-
$headingsFontWeight: bold !default; // instead of browser default, bold
|
512
|
-
$headingsColor: inherit !default; // empty to use BS default, $textColor
|
513
|
-
|
514
|
-
|
515
|
-
// Component sizing
|
516
|
-
// -------------------------
|
517
|
-
// Based on 14px font-size and 20px line-height
|
518
|
-
|
519
|
-
$fontSizeLarge: $baseFontSize * 1.25; // ~18px
|
520
|
-
$fontSizeSmall: $baseFontSize * 0.85; // ~12px
|
521
|
-
$fontSizeMini: $baseFontSize * 0.75; // ~11px
|
522
|
-
|
523
|
-
$paddingLarge: 11px 19px !default; // 44px
|
524
|
-
$paddingSmall: 2px 10px !default; // 26px
|
525
|
-
$paddingMini: 0px 6px !default; // 22px
|
526
|
-
|
527
|
-
$baseBorderRadius: 4px !default;
|
528
|
-
$borderRadiusLarge: 6px !default;
|
529
|
-
$borderRadiusSmall: 3px !default;
|
530
|
-
|
531
|
-
|
532
|
-
// Tables
|
533
|
-
// -------------------------
|
534
|
-
$tableBackground: transparent !default; // overall background-color
|
535
|
-
$tableBackgroundAccent: #f9f9f9 !default; // for striping
|
536
|
-
$tableBackgroundHover: #f5f5f5 !default; // for hover
|
537
|
-
$tableBorder: #ddd !default; // table and cell border
|
538
|
-
|
539
|
-
// Buttons
|
540
|
-
// -------------------------
|
541
|
-
$btnBackground: $white !default;
|
542
|
-
$btnBackgroundHighlight: darken($white, 10%) !default;
|
543
|
-
$btnBorder: #ccc !default;
|
544
|
-
|
545
|
-
$btnPrimaryBackground: $linkColor !default;
|
546
|
-
$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default;
|
547
|
-
|
548
|
-
$btnInfoBackground: #5bc0de !default;
|
549
|
-
$btnInfoBackgroundHighlight: #2f96b4 !default;
|
550
|
-
|
551
|
-
$btnSuccessBackground: #62c462 !default;
|
552
|
-
$btnSuccessBackgroundHighlight: #51a351 !default;
|
553
|
-
|
554
|
-
$btnWarningBackground: lighten($orange, 15%) !default;
|
555
|
-
$btnWarningBackgroundHighlight: $orange !default;
|
556
|
-
|
557
|
-
$btnDangerBackground: #ee5f5b !default;
|
558
|
-
$btnDangerBackgroundHighlight: #bd362f !default;
|
559
|
-
|
560
|
-
$btnInverseBackground: #444 !default;
|
561
|
-
$btnInverseBackgroundHighlight: $grayDarker !default;
|
562
|
-
|
563
|
-
|
564
|
-
// Forms
|
565
|
-
// -------------------------
|
566
|
-
$inputBackground: $white !default;
|
567
|
-
$inputBorder: #ccc !default;
|
568
|
-
$inputBorderRadius: $baseBorderRadius !default;
|
569
|
-
$inputDisabledBackground: $grayLighter !default;
|
570
|
-
$formActionsBackground: #f5f5f5 !default;
|
571
|
-
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
572
|
-
|
573
|
-
|
574
|
-
// Dropdowns
|
575
|
-
// -------------------------
|
576
|
-
$dropdownBackground: $white !default;
|
577
|
-
$dropdownBorder: rgba(0,0,0,.2) !default;
|
578
|
-
$dropdownDividerTop: #e5e5e5 !default;
|
579
|
-
$dropdownDividerBottom: $white !default;
|
580
|
-
|
581
|
-
$dropdownLinkColor: $grayDark !default;
|
582
|
-
$dropdownLinkColorHover: $white !default;
|
583
|
-
$dropdownLinkColorActive: $white !default;
|
584
|
-
|
585
|
-
$dropdownLinkBackgroundActive: $linkColor !default;
|
586
|
-
$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive !default;
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
// COMPONENT VARIABLES
|
591
|
-
// --------------------------------------------------
|
592
|
-
|
593
|
-
|
594
|
-
// Z-index master list
|
595
|
-
// -------------------------
|
596
|
-
// Used for a bird's eye view of components dependent on the z-axis
|
597
|
-
// Try to avoid customizing these :)
|
598
|
-
$zindexDropdown: 1000 !default;
|
599
|
-
$zindexPopover: 1010 !default;
|
600
|
-
$zindexTooltip: 1030 !default;
|
601
|
-
$zindexFixedNavbar: 1030 !default;
|
602
|
-
$zindexModalBackdrop: 1040 !default;
|
603
|
-
$zindexModal: 1050 !default;
|
604
|
-
|
605
|
-
|
606
|
-
// Sprite icons path
|
607
|
-
// -------------------------
|
608
|
-
$iconSpritePath: "glyphicons-halflings.png" !default;
|
609
|
-
$iconWhiteSpritePath: "glyphicons-halflings-white.png" !default;
|
610
|
-
|
611
|
-
|
612
|
-
// Input placeholder text color
|
613
|
-
// -------------------------
|
614
|
-
$placeholderText: $grayLight !default;
|
615
|
-
|
616
|
-
|
617
|
-
// Hr border color
|
618
|
-
// -------------------------
|
619
|
-
$hrBorder: $grayLighter !default;
|
620
|
-
|
621
|
-
|
622
|
-
// Horizontal forms & lists
|
623
|
-
// -------------------------
|
624
|
-
$horizontalComponentOffset: 180px !default;
|
625
|
-
|
626
|
-
|
627
|
-
// Wells
|
628
|
-
// -------------------------
|
629
|
-
$wellBackground: #f5f5f5 !default;
|
630
|
-
|
631
|
-
|
632
|
-
// Navbar
|
633
|
-
// -------------------------
|
634
|
-
$navbarCollapseWidth: 979px !default;
|
635
|
-
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
|
636
|
-
|
637
|
-
$navbarHeight: 40px !default;
|
638
|
-
$navbarBackgroundHighlight: #ffffff !default;
|
639
|
-
$navbarBackground: darken($navbarBackgroundHighlight, 5%) !default;
|
640
|
-
$navbarBorder: darken($navbarBackground, 12%) !default;
|
641
|
-
|
642
|
-
$navbarText: #777 !default;
|
643
|
-
$navbarLinkColor: #777 !default;
|
644
|
-
$navbarLinkColorHover: $grayDark !default;
|
645
|
-
$navbarLinkColorActive: $gray !default;
|
646
|
-
$navbarLinkBackgroundHover: transparent !default;
|
647
|
-
$navbarLinkBackgroundActive: darken($navbarBackground, 5%) !default;
|
648
|
-
|
649
|
-
$navbarBrandColor: $navbarLinkColor !default;
|
650
|
-
|
651
|
-
// Inverted navbar
|
652
|
-
$navbarInverseBackground: #111111 !default;
|
653
|
-
$navbarInverseBackgroundHighlight: #222222 !default;
|
654
|
-
$navbarInverseBorder: #252525 !default;
|
655
|
-
|
656
|
-
$navbarInverseText: $grayLight !default;
|
657
|
-
$navbarInverseLinkColor: $grayLight !default;
|
658
|
-
$navbarInverseLinkColorHover: $white !default;
|
659
|
-
$navbarInverseLinkColorActive: $navbarInverseLinkColorHover !default;
|
660
|
-
$navbarInverseLinkBackgroundHover: transparent !default;
|
661
|
-
$navbarInverseLinkBackgroundActive: $navbarInverseBackground !default;
|
662
|
-
|
663
|
-
$navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default;
|
664
|
-
$navbarInverseSearchBackgroundFocus: $white !default;
|
665
|
-
$navbarInverseSearchBorder: $navbarInverseBackground !default;
|
666
|
-
$navbarInverseSearchPlaceholderColor: #ccc !default;
|
667
|
-
|
668
|
-
$navbarInverseBrandColor: $navbarInverseLinkColor !default;
|
669
|
-
|
670
|
-
|
671
|
-
// Pagination
|
672
|
-
// -------------------------
|
673
|
-
$paginationBackground: #fff !default;
|
674
|
-
$paginationBorder: #ddd !default;
|
675
|
-
$paginationActiveBackground: #f5f5f5 !default;
|
676
|
-
|
677
|
-
|
678
|
-
// Hero unit
|
679
|
-
// -------------------------
|
680
|
-
$heroUnitBackground: $grayLighter !default;
|
681
|
-
$heroUnitHeadingColor: inherit !default;
|
682
|
-
$heroUnitLeadColor: inherit !default;
|
683
|
-
|
684
|
-
|
685
|
-
// Form states and alerts
|
686
|
-
// -------------------------
|
687
|
-
$warningText: #c09853 !default;
|
688
|
-
$warningBackground: #fcf8e3 !default;
|
689
|
-
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
|
690
|
-
|
691
|
-
$errorText: #b94a48 !default;
|
692
|
-
$errorBackground: #f2dede !default;
|
693
|
-
$errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default;
|
694
|
-
|
695
|
-
$successText: #468847 !default;
|
696
|
-
$successBackground: #dff0d8 !default;
|
697
|
-
$successBorder: darken(adjust-hue($successBackground, -10), 5%) !default;
|
698
|
-
|
699
|
-
$infoText: #3a87ad !default;
|
700
|
-
$infoBackground: #d9edf7 !default;
|
701
|
-
$infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
|
702
|
-
|
703
|
-
|
704
|
-
// Tooltips and popovers
|
705
|
-
// -------------------------
|
706
|
-
$tooltipColor: #fff !default;
|
707
|
-
$tooltipBackground: #000 !default;
|
708
|
-
$tooltipArrowWidth: 5px !default;
|
709
|
-
$tooltipArrowColor: $tooltipBackground !default;
|
710
|
-
|
711
|
-
$popoverBackground: #fff !default;
|
712
|
-
$popoverArrowWidth: 10px !default;
|
713
|
-
$popoverArrowColor: #fff !default;
|
714
|
-
$popoverTitleBackground: darken($popoverBackground, 3%) !default;
|
715
|
-
|
716
|
-
// Special enhancement for popovers
|
717
|
-
$popoverArrowOuterWidth: $popoverArrowWidth + 1 !default;
|
718
|
-
$popoverArrowOuterColor: rgba(0,0,0,.25) !default;
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
// GRID
|
723
|
-
// --------------------------------------------------
|
724
|
-
|
725
|
-
|
726
|
-
// Default 940px grid
|
727
|
-
// -------------------------
|
728
|
-
$gridColumns: 12 !default;
|
729
|
-
$gridColumnWidth: 60px !default;
|
730
|
-
$gridGutterWidth: 20px !default;
|
731
|
-
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
|
732
|
-
|
733
|
-
// 1200px min
|
734
|
-
$gridColumnWidth1200: 70px !default;
|
735
|
-
$gridGutterWidth1200: 30px !default;
|
736
|
-
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
|
737
|
-
|
738
|
-
// 768px-979px
|
739
|
-
$gridColumnWidth768: 42px !default;
|
740
|
-
$gridGutterWidth768: 20px !default;
|
741
|
-
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
|
742
|
-
|
743
|
-
|
744
|
-
// Fluid grid
|
745
|
-
// -------------------------
|
746
|
-
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
|
747
|
-
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
|
748
|
-
|
749
|
-
// 1200px min
|
750
|
-
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
|
751
|
-
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
|
752
|
-
|
753
|
-
// 768px-979px
|
754
|
-
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
|
755
|
-
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
155
|
+
In Rails 3.0 and above, generators don’t just look in the source root for templates, they also search for templates in other paths. And one of them is lib/templates.
|
756
156
|
|
757
157
|
### Javascript
|
758
158
|
|
@@ -763,18 +163,19 @@ Select all jQuery plugins (`app/assets/javascripts/bootstrap.js`)
|
|
763
163
|
Or quickly add only the necessary javascript (Transitions: required for any animation; Popovers: requires Tooltips)
|
764
164
|
|
765
165
|
//= require bootstrap-transition
|
766
|
-
//= require bootstrap-alert
|
767
166
|
//= require bootstrap-modal
|
768
|
-
//= require bootstrap-dropdown
|
769
|
-
//= require bootstrap-scrollspy
|
770
|
-
//= require bootstrap-tab
|
771
167
|
//= require bootstrap-tooltip
|
772
168
|
//= require bootstrap-popover
|
773
|
-
//= require bootstrap-
|
169
|
+
//= require bootstrap-alert
|
774
170
|
//= require bootstrap-collapse
|
775
|
-
//= require bootstrap-
|
171
|
+
//= require bootstrap-tab
|
172
|
+
//= require bootstrap-dropdown
|
776
173
|
//= require bootstrap-typeahead
|
174
|
+
//= require bootstrap-scrollspy
|
175
|
+
//= require bootstrap-button
|
777
176
|
//= require bootstrap-affix
|
177
|
+
//= require bootstrap-carousel
|
178
|
+
|
778
179
|
|
779
180
|
## Customizing Templates
|
780
181
|
|