Bootstrap Customization Example

├── .gitignore ├── README.md ├── bower.json ├── gulpfile.js ├── less └── bootstrap │ └── variables.less ├── package.json └── public └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | bower_components/ 3 | node_modules/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Custom Bootstrap Kickstart 2 | 3 | Kickstart web project that uses custom-themed Bootstrap front-end framework. 4 | See this [article](https://medium.com/@wizardzloy/customizing-bootstrap-with-gulp-js-and-bower-fafac8e3e1af?source=tw-67a608e2b8bc-1405878441756) for details. 5 | 6 | To run the project: 7 | 8 | ```` 9 | > npm install -g bower gulp 10 | > npm install 11 | > bower install 12 | > gulp watch 13 | ```` -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-bootstrap-kickstart", 3 | "version": "0.1.0", 4 | "authors": [ 5 | "wizardzloy " 6 | ], 7 | "description": "Tiny setup for kickstarting a new front-end project based on the custom Bootstrap build", 8 | "keywords": [ 9 | "bootstrap", 10 | "less", 11 | "css", 12 | "gulp", 13 | "bower" 14 | ], 15 | "dependencies": { 16 | "bootstrap": "~3.3.5" 17 | }, 18 | "overrides": { 19 | "bootstrap": { 20 | "main": ["less/**/!(variables).less", "./dist/fonts/*", "./dist/js/bootstrap.js"] 21 | } 22 | }, 23 | "license": "MIT", 24 | "private": true 25 | } 26 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var mainBowerFiles = require('main-bower-files'); 5 | var less = require('gulp-less'); 6 | 7 | gulp.task('mainBowerFiles', function moveBowerDeps() { 8 | return gulp.src(mainBowerFiles(), { base: 'bower_components' }) 9 | .pipe(gulp.dest('public/lib')); 10 | }); 11 | 12 | gulp.task('bootstrap:prepareLess', ['mainBowerFiles'], function bootstrapPrepareLess() { 13 | return gulp.src('less/bootstrap/variables.less') 14 | .pipe(gulp.dest('public/lib/bootstrap/less')); 15 | }); 16 | 17 | gulp.task('bootstrap:compileLess', ['bootstrap:prepareLess'], function bootstrapCompileLess() { 18 | return gulp.src('public/lib/bootstrap/less/bootstrap.less') 19 | .pipe(less()) 20 | .pipe(gulp.dest('public/lib/bootstrap/dist/css')); 21 | }); 22 | 23 | gulp.task('watch', ['bootstrap:compileLess'], function watch() { 24 | gulp.watch(['less/bootstrap/variables.less'], ['bootstrap:compileLess']); 25 | }); 26 | -------------------------------------------------------------------------------- /less/bootstrap/variables.less: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | 6 | //== Colors 7 | // 8 | //## Gray and brand colors for use across Bootstrap. 9 | 10 | @gray-darker: lighten(#000, 13.5%); // #222 11 | @gray-dark: lighten(#000, 20%); // #333 12 | @gray: lighten(#000, 33.5%); // #555 13 | @gray-light: lighten(#000, 60%); // #999 14 | @gray-lighter: lighten(#000, 93.5%); // #eeeй 15 | 16 | @brand-primary: #428bca; 17 | @brand-success: #5cb85c; 18 | @brand-info: #5bc0de; 19 | @brand-warning: #f0ad4e; 20 | @brand-danger: #d9534f; 21 | 22 | 23 | //== Scaffolding 24 | // 25 | // ## Settings for some of the most global styles. 26 | 27 | //** Background color for ``. 28 | @body-bg: #fff; 29 | //** Global text color on ``. 30 | @text-color: @gray-dark; 31 | 32 | //** Global textual link color. 33 | @link-color: @brand-primary; 34 | //** Link hover color set via `darken()` function. 35 | @link-hover-color: darken(@link-color, 15%); 36 | 37 | 38 | //== Typography 39 | // 40 | //## Font, line-height, and color for body text, headings, and more. 41 | 42 | @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; 43 | @font-family-serif: Georgia, "Times New Roman", Times, serif; 44 | //** Default monospace fonts for `

`, ``, and ``.
 45 | @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 46 | @font-family-base:        @font-family-sans-serif;
 47 | 
 48 | @font-size-base:          14px;
 49 | @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 50 | @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 51 | 
 52 | @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
 53 | @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
 54 | @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
 55 | @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
 56 | @font-size-h5:            @font-size-base;
 57 | @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 58 | 
 59 | //** Unit-less `line-height` for use in components like buttons.
 60 | @line-height-base:        1.428571429; // 20/14
 61 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 62 | @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 63 | 
 64 | //** By default, this inherits from the ``.
 65 | @headings-font-family:    inherit;
 66 | @headings-font-weight:    500;
 67 | @headings-line-height:    1.1;
 68 | @headings-color:          inherit;
 69 | 
 70 | 
 71 | //-- Iconography
 72 | //
 73 | //## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 74 | 
 75 | @icon-font-path:          "../fonts/";
 76 | @icon-font-name:          "glyphicons-halflings-regular";
 77 | @icon-font-svg-id:        "glyphicons_halflingsregular";
 78 | 
 79 | //== Components
 80 | //
 81 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 82 | 
 83 | @padding-base-vertical:     6px;
 84 | @padding-base-horizontal:   12px;
 85 | 
 86 | @padding-large-vertical:    10px;
 87 | @padding-large-horizontal:  16px;
 88 | 
 89 | @padding-small-vertical:    5px;
 90 | @padding-small-horizontal:  10px;
 91 | 
 92 | @padding-xs-vertical:       1px;
 93 | @padding-xs-horizontal:     5px;
 94 | 
 95 | @line-height-large:         1.33;
 96 | @line-height-small:         1.5;
 97 | 
 98 | @border-radius-base:        4px;
 99 | @border-radius-large:       6px;
100 | @border-radius-small:       3px;
101 | 
102 | //** Global color for active items (e.g., navs or dropdowns).
103 | @component-active-color:    #fff;
104 | //** Global background color for active items (e.g., navs or dropdowns).
105 | @component-active-bg:       @brand-primary;
106 | 
107 | //** Width of the `border` for generating carets that indicator dropdowns.
108 | @caret-width-base:          4px;
109 | //** Carets increase slightly in size for larger components.
110 | @caret-width-large:         5px;
111 | 
112 | 
113 | //== Tables
114 | //
115 | //## Customizes the `.table` component with basic values, each used across all table variations.
116 | 
117 | //** Padding for ``s and ``s.
118 | @table-cell-padding:            8px;
119 | //** Padding for cells in `.table-condensed`.
120 | @table-condensed-cell-padding:  5px;
121 | 
122 | //** Default background color used for all tables.
123 | @table-bg:                      transparent;
124 | //** Background color used for `.table-striped`.
125 | @table-bg-accent:               #f9f9f9;
126 | //** Background color used for `.table-hover`.
127 | @table-bg-hover:                #f5f5f5;
128 | @table-bg-active:               @table-bg-hover;
129 | 
130 | //** Border color for table and cell borders.
131 | @table-border-color:            #ddd;
132 | 
133 | 
134 | //== Buttons
135 | //
136 | //## For each of Bootstrap's buttons, define text, background and border color.
137 | 
138 | @btn-font-weight:                normal;
139 | 
140 | @btn-default-color:              #333;
141 | @btn-default-bg:                 #fff;
142 | @btn-default-border:             #ccc;
143 | 
144 | @btn-primary-color:              #fff;
145 | @btn-primary-bg:                 @brand-primary;
146 | @btn-primary-border:             darken(@btn-primary-bg, 5%);
147 | 
148 | @btn-success-color:              #fff;
149 | @btn-success-bg:                 @brand-success;
150 | @btn-success-border:             darken(@btn-success-bg, 5%);
151 | 
152 | @btn-info-color:                 #fff;
153 | @btn-info-bg:                    @brand-info;
154 | @btn-info-border:                darken(@btn-info-bg, 5%);
155 | 
156 | @btn-warning-color:              #fff;
157 | @btn-warning-bg:                 @brand-warning;
158 | @btn-warning-border:             darken(@btn-warning-bg, 5%);
159 | 
160 | @btn-danger-color:               #fff;
161 | @btn-danger-bg:                  @brand-danger;
162 | @btn-danger-border:              darken(@btn-danger-bg, 5%);
163 | 
164 | @btn-link-disabled-color:        @gray-light;
165 | 
166 | 
167 | //== Forms
168 | //
169 | //##
170 | 
171 | //** `` background color
172 | @input-bg:                       #fff;
173 | //** `` background color
174 | @input-bg-disabled:              @gray-lighter;
175 | 
176 | //** Text color for ``s
177 | @input-color:                    @gray;
178 | //** `` border color
179 | @input-border:                   #ccc;
180 | //** `` border radius
181 | @input-border-radius:            @border-radius-base;
182 | //** Border color for inputs on focus
183 | @input-border-focus:             #66afe9;
184 | 
185 | //** Placeholder text color
186 | @input-color-placeholder:        @gray-light;
187 | 
188 | //** Default `.form-control` height
189 | @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
190 | //** Large `.form-control` height
191 | @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
192 | //** Small `.form-control` height
193 | @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
194 | 
195 | @legend-color:                   @gray-dark;
196 | @legend-border-color:            #e5e5e5;
197 | 
198 | //** Background color for textual input addons
199 | @input-group-addon-bg:           @gray-lighter;
200 | //** Border color for textual input addons
201 | @input-group-addon-border-color: @input-border;
202 | 
203 | 
204 | //== Dropdowns
205 | //
206 | //## Dropdown menu container and contents.
207 | 
208 | //** Background for the dropdown menu.
209 | @dropdown-bg:                    #fff;
210 | //** Dropdown menu `border-color`.
211 | @dropdown-border:                rgba(0,0,0,.15);
212 | //** Dropdown menu `border-color` **for IE8**.
213 | @dropdown-fallback-border:       #ccc;
214 | //** Divider color for between dropdown items.
215 | @dropdown-divider-bg:            #e5e5e5;
216 | 
217 | //** Dropdown link text color.
218 | @dropdown-link-color:            @gray-dark;
219 | //** Hover color for dropdown links.
220 | @dropdown-link-hover-color:      darken(@gray-dark, 5%);
221 | //** Hover background for dropdown links.
222 | @dropdown-link-hover-bg:         #f5f5f5;
223 | 
224 | //** Active dropdown menu item text color.
225 | @dropdown-link-active-color:     @component-active-color;
226 | //** Active dropdown menu item background color.
227 | @dropdown-link-active-bg:        @component-active-bg;
228 | 
229 | //** Disabled dropdown menu item background color.
230 | @dropdown-link-disabled-color:   @gray-light;
231 | 
232 | //** Text color for headers within dropdown menus.
233 | @dropdown-header-color:          @gray-light;
234 | 
235 | // Note: Deprecated @dropdown-caret-color as of v3.1.0
236 | @dropdown-caret-color:           #000;
237 | 
238 | 
239 | //-- Z-index master list
240 | //
241 | // Warning: Avoid customizing these values. They're used for a bird's eye view
242 | // of components dependent on the z-axis and are designed to all work together.
243 | //
244 | // Note: These variables are not generated into the Customizer.
245 | 
246 | @zindex-navbar:            1000;
247 | @zindex-dropdown:          1000;
248 | @zindex-popover:           1010;
249 | @zindex-tooltip:           1030;
250 | @zindex-navbar-fixed:      1030;
251 | @zindex-modal-background:  1040;
252 | @zindex-modal:             1050;
253 | 
254 | 
255 | //== Media queries breakpoints
256 | //
257 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
258 | 
259 | // Extra small screen / phone
260 | // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
261 | @screen-xs:                  480px;
262 | @screen-xs-min:              @screen-xs;
263 | @screen-phone:               @screen-xs-min;
264 | 
265 | // Small screen / tablet
266 | // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
267 | @screen-sm:                  768px;
268 | @screen-sm-min:              @screen-sm;
269 | @screen-tablet:              @screen-sm-min;
270 | 
271 | // Medium screen / desktop
272 | // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
273 | @screen-md:                  992px;
274 | @screen-md-min:              @screen-md;
275 | @screen-desktop:             @screen-md-min;
276 | 
277 | // Large screen / wide desktop
278 | // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
279 | @screen-lg:                  1200px;
280 | @screen-lg-min:              @screen-lg;
281 | @screen-lg-desktop:          @screen-lg-min;
282 | 
283 | // So media queries don't overlap when required, provide a maximum
284 | @screen-xs-max:              (@screen-sm-min - 1);
285 | @screen-sm-max:              (@screen-md-min - 1);
286 | @screen-md-max:              (@screen-lg-min - 1);
287 | 
288 | 
289 | //== Grid system
290 | //
291 | //## Define your custom responsive grid.
292 | 
293 | //** Number of columns in the grid.
294 | @grid-columns:              12;
295 | //** Padding between columns. Gets divided in half for the left and right.
296 | @grid-gutter-width:         30px;
297 | // Navbar collapse
298 | //** Point at which the navbar becomes uncollapsed.
299 | @grid-float-breakpoint:     @screen-sm-min;
300 | //** Point at which the navbar begins collapsing.
301 | @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
302 | 
303 | 
304 | //== Container sizes
305 | //
306 | //## Define the maximum width of `.container` for different screen sizes.
307 | 
308 | // Small screen / tablet
309 | @container-tablet:             ((720px + @grid-gutter-width));
310 | //** For `@screen-sm-min` and up.
311 | @container-sm:                 @container-tablet;
312 | 
313 | // Medium screen / desktop
314 | @container-desktop:            ((940px + @grid-gutter-width));
315 | //** For `@screen-md-min` and up.
316 | @container-md:                 @container-desktop;
317 | 
318 | // Large screen / wide desktop
319 | @container-large-desktop:      ((1140px + @grid-gutter-width));
320 | //** For `@screen-lg-min` and up.
321 | @container-lg:                 @container-large-desktop;
322 | 
323 | 
324 | //== Navbar
325 | //
326 | //##
327 | 
328 | // Basics of a navbar
329 | @navbar-height:                    50px;
330 | @navbar-margin-bottom:             @line-height-computed;
331 | @navbar-border-radius:             @border-radius-base;
332 | @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
333 | @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
334 | @navbar-collapse-max-height:       340px;
335 | 
336 | @navbar-default-color:             #777;
337 | @navbar-default-bg:                #f8f8f8;
338 | @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
339 | 
340 | // Navbar links
341 | @navbar-default-link-color:                #777;
342 | @navbar-default-link-hover-color:          #333;
343 | @navbar-default-link-hover-bg:             transparent;
344 | @navbar-default-link-active-color:         #555;
345 | @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
346 | @navbar-default-link-disabled-color:       #ccc;
347 | @navbar-default-link-disabled-bg:          transparent;
348 | 
349 | // Navbar brand label
350 | @navbar-default-brand-color:               @navbar-default-link-color;
351 | @navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
352 | @navbar-default-brand-hover-bg:            transparent;
353 | 
354 | // Navbar toggle
355 | @navbar-default-toggle-hover-bg:           #ddd;
356 | @navbar-default-toggle-icon-bar-bg:        #888;
357 | @navbar-default-toggle-border-color:       #ddd;
358 | 
359 | 
360 | // Inverted navbar
361 | // Reset inverted navbar basics
362 | @navbar-inverse-color:                      @gray-light;
363 | @navbar-inverse-bg:                         #222;
364 | @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
365 | 
366 | // Inverted navbar links
367 | @navbar-inverse-link-color:                 @gray-light;
368 | @navbar-inverse-link-hover-color:           #fff;
369 | @navbar-inverse-link-hover-bg:              transparent;
370 | @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
371 | @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
372 | @navbar-inverse-link-disabled-color:        #444;
373 | @navbar-inverse-link-disabled-bg:           transparent;
374 | 
375 | // Inverted navbar brand label
376 | @navbar-inverse-brand-color:                @navbar-inverse-link-color;
377 | @navbar-inverse-brand-hover-color:          #fff;
378 | @navbar-inverse-brand-hover-bg:             transparent;
379 | 
380 | // Inverted navbar toggle
381 | @navbar-inverse-toggle-hover-bg:            #333;
382 | @navbar-inverse-toggle-icon-bar-bg:         #fff;
383 | @navbar-inverse-toggle-border-color:        #333;
384 | 
385 | 
386 | //== Navs
387 | //
388 | //##
389 | 
390 | //=== Shared nav styles
391 | @nav-link-padding:                          10px 15px;
392 | @nav-link-hover-bg:                         @gray-lighter;
393 | 
394 | @nav-disabled-link-color:                   @gray-light;
395 | @nav-disabled-link-hover-color:             @gray-light;
396 | 
397 | @nav-open-link-hover-color:                 #fff;
398 | 
399 | //== Tabs
400 | @nav-tabs-border-color:                     #ddd;
401 | 
402 | @nav-tabs-link-hover-border-color:          @gray-lighter;
403 | 
404 | @nav-tabs-active-link-hover-bg:             @body-bg;
405 | @nav-tabs-active-link-hover-color:          @gray;
406 | @nav-tabs-active-link-hover-border-color:   #ddd;
407 | 
408 | @nav-tabs-justified-link-border-color:            #ddd;
409 | @nav-tabs-justified-active-link-border-color:     @body-bg;
410 | 
411 | //== Pills
412 | @nav-pills-border-radius:                   @border-radius-base;
413 | @nav-pills-active-link-hover-bg:            @component-active-bg;
414 | @nav-pills-active-link-hover-color:         @component-active-color;
415 | 
416 | 
417 | //== Pagination
418 | //
419 | //##
420 | 
421 | @pagination-color:                     @link-color;
422 | @pagination-bg:                        #fff;
423 | @pagination-border:                    #ddd;
424 | 
425 | @pagination-hover-color:               @link-hover-color;
426 | @pagination-hover-bg:                  @gray-lighter;
427 | @pagination-hover-border:              #ddd;
428 | 
429 | @pagination-active-color:              #fff;
430 | @pagination-active-bg:                 @brand-primary;
431 | @pagination-active-border:             @brand-primary;
432 | 
433 | @pagination-disabled-color:            @gray-light;
434 | @pagination-disabled-bg:               #fff;
435 | @pagination-disabled-border:           #ddd;
436 | 
437 | 
438 | //== Pager
439 | //
440 | //##
441 | 
442 | @pager-bg:                             @pagination-bg;
443 | @pager-border:                         @pagination-border;
444 | @pager-border-radius:                  15px;
445 | 
446 | @pager-hover-bg:                       @pagination-hover-bg;
447 | 
448 | @pager-active-bg:                      @pagination-active-bg;
449 | @pager-active-color:                   @pagination-active-color;
450 | 
451 | @pager-disabled-color:                 @pagination-disabled-color;
452 | 
453 | 
454 | //== Jumbotron
455 | //
456 | //##
457 | 
458 | @jumbotron-padding:              30px;
459 | @jumbotron-color:                inherit;
460 | @jumbotron-bg:                   @gray-lighter;
461 | @jumbotron-heading-color:        inherit;
462 | @jumbotron-font-size:            ceil((@font-size-base * 1.5));
463 | 
464 | 
465 | //== Form states and alerts
466 | //
467 | //## Define colors for form feedback states and, by default, alerts.
468 | 
469 | @state-success-text:             #3c763d;
470 | @state-success-bg:               #dff0d8;
471 | @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
472 | 
473 | @state-info-text:                #31708f;
474 | @state-info-bg:                  #d9edf7;
475 | @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
476 | 
477 | @state-warning-text:             #8a6d3b;
478 | @state-warning-bg:               #fcf8e3;
479 | @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
480 | 
481 | @state-danger-text:              #a94442;
482 | @state-danger-bg:                #f2dede;
483 | @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
484 | 
485 | 
486 | //== Tooltips
487 | //
488 | //##
489 | 
490 | //** Tooltip max width
491 | @tooltip-max-width:           200px;
492 | //** Tooltip text color
493 | @tooltip-color:               #fff;
494 | //** Tooltip background color
495 | @tooltip-bg:                  #000;
496 | @tooltip-opacity:             .9;
497 | 
498 | //** Tooltip arrow width
499 | @tooltip-arrow-width:         5px;
500 | //** Tooltip arrow color
501 | @tooltip-arrow-color:         @tooltip-bg;
502 | 
503 | 
504 | //== Popovers
505 | //
506 | //##
507 | 
508 | //** Popover body background color
509 | @popover-bg:                          #fff;
510 | //** Popover maximum width
511 | @popover-max-width:                   276px;
512 | //** Popover border color
513 | @popover-border-color:                rgba(0,0,0,.2);
514 | //** Popover fallback border color
515 | @popover-fallback-border-color:       #ccc;
516 | 
517 | //** Popover title background color
518 | @popover-title-bg:                    darken(@popover-bg, 3%);
519 | 
520 | //** Popover arrow width
521 | @popover-arrow-width:                 10px;
522 | //** Popover arrow color
523 | @popover-arrow-color:                 #fff;
524 | 
525 | //** Popover outer arrow width
526 | @popover-arrow-outer-width:           (@popover-arrow-width + 1);
527 | //** Popover outer arrow color
528 | @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
529 | //** Popover outer arrow fallback color
530 | @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
531 | 
532 | 
533 | //== Labels
534 | //
535 | //##
536 | 
537 | //** Default label background color
538 | @label-default-bg:            @gray-light;
539 | //** Primary label background color
540 | @label-primary-bg:            @brand-primary;
541 | //** Success label background color
542 | @label-success-bg:            @brand-success;
543 | //** Info label background color
544 | @label-info-bg:               @brand-info;
545 | //** Warning label background color
546 | @label-warning-bg:            @brand-warning;
547 | //** Danger label background color
548 | @label-danger-bg:             @brand-danger;
549 | 
550 | //** Default label text color
551 | @label-color:                 #fff;
552 | //** Default text color of a linked label
553 | @label-link-hover-color:      #fff;
554 | 
555 | 
556 | //== Modals
557 | //
558 | //##
559 | 
560 | //** Padding applied to the modal body
561 | @modal-inner-padding:         20px;
562 | 
563 | //** Padding applied to the modal title
564 | @modal-title-padding:         15px;
565 | //** Modal title line-height
566 | @modal-title-line-height:     @line-height-base;
567 | 
568 | //** Background color of modal content area
569 | @modal-content-bg:                             #fff;
570 | //** Modal content border color
571 | @modal-content-border-color:                   rgba(0,0,0,.2);
572 | //** Modal content border color **for IE8**
573 | @modal-content-fallback-border-color:          #999;
574 | 
575 | //** Modal backdrop background color
576 | @modal-backdrop-bg:           #000;
577 | //** Modal backdrop opacity
578 | @modal-backdrop-opacity:      .5;
579 | //** Modal header border color
580 | @modal-header-border-color:   #e5e5e5;
581 | //** Modal footer border color
582 | @modal-footer-border-color:   @modal-header-border-color;
583 | 
584 | @modal-lg:                    900px;
585 | @modal-md:                    600px;
586 | @modal-sm:                    300px;
587 | 
588 | 
589 | //== Alerts
590 | //
591 | //## Define alert colors, border radius, and padding.
592 | 
593 | @alert-padding:               15px;
594 | @alert-border-radius:         @border-radius-base;
595 | @alert-link-font-weight:      bold;
596 | 
597 | @alert-success-bg:            @state-success-bg;
598 | @alert-success-text:          @state-success-text;
599 | @alert-success-border:        @state-success-border;
600 | 
601 | @alert-info-bg:               @state-info-bg;
602 | @alert-info-text:             @state-info-text;
603 | @alert-info-border:           @state-info-border;
604 | 
605 | @alert-warning-bg:            @state-warning-bg;
606 | @alert-warning-text:          @state-warning-text;
607 | @alert-warning-border:        @state-warning-border;
608 | 
609 | @alert-danger-bg:             @state-danger-bg;
610 | @alert-danger-text:           @state-danger-text;
611 | @alert-danger-border:         @state-danger-border;
612 | 
613 | 
614 | //== Progress bars
615 | //
616 | //##
617 | 
618 | //** Background color of the whole progress component
619 | @progress-bg:                 #f5f5f5;
620 | //** Progress bar text color
621 | @progress-bar-color:          #fff;
622 | 
623 | //** Default progress bar color
624 | @progress-bar-bg:             @brand-primary;
625 | //** Success progress bar color
626 | @progress-bar-success-bg:     @brand-success;
627 | //** Warning progress bar color
628 | @progress-bar-warning-bg:     @brand-warning;
629 | //** Danger progress bar color
630 | @progress-bar-danger-bg:      @brand-danger;
631 | //** Info progress bar color
632 | @progress-bar-info-bg:        @brand-info;
633 | 
634 | 
635 | //== List group
636 | //
637 | //##
638 | 
639 | //** Background color on `.list-group-item`
640 | @list-group-bg:                 #fff;
641 | //** `.list-group-item` border color
642 | @list-group-border:             #ddd;
643 | //** List group border radius
644 | @list-group-border-radius:      @border-radius-base;
645 | 
646 | //** Background color of single list elements on hover
647 | @list-group-hover-bg:           #f5f5f5;
648 | //** Text color of active list elements
649 | @list-group-active-color:       @component-active-color;
650 | //** Background color of active list elements
651 | @list-group-active-bg:          @component-active-bg;
652 | //** Border color of active list elements
653 | @list-group-active-border:      @list-group-active-bg;
654 | @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
655 | 
656 | @list-group-link-color:         #555;
657 | @list-group-link-heading-color: #333;
658 | 
659 | 
660 | //== Panels
661 | //
662 | //##
663 | 
664 | @panel-bg:                    #fff;
665 | @panel-body-padding:          15px;
666 | @panel-border-radius:         @border-radius-base;
667 | 
668 | //** Border color for elements within panels
669 | @panel-inner-border:          #ddd;
670 | @panel-footer-bg:             #f5f5f5;
671 | 
672 | @panel-default-text:          @gray-dark;
673 | @panel-default-border:        #ddd;
674 | @panel-default-heading-bg:    #f5f5f5;
675 | 
676 | @panel-primary-text:          #fff;
677 | @panel-primary-border:        @brand-primary;
678 | @panel-primary-heading-bg:    @brand-primary;
679 | 
680 | @panel-success-text:          @state-success-text;
681 | @panel-success-border:        @state-success-border;
682 | @panel-success-heading-bg:    @state-success-bg;
683 | 
684 | @panel-info-text:             @state-info-text;
685 | @panel-info-border:           @state-info-border;
686 | @panel-info-heading-bg:       @state-info-bg;
687 | 
688 | @panel-warning-text:          @state-warning-text;
689 | @panel-warning-border:        @state-warning-border;
690 | @panel-warning-heading-bg:    @state-warning-bg;
691 | 
692 | @panel-danger-text:           @state-danger-text;
693 | @panel-danger-border:         @state-danger-border;
694 | @panel-danger-heading-bg:     @state-danger-bg;
695 | 
696 | 
697 | //== Thumbnails
698 | //
699 | //##
700 | 
701 | //** Padding around the thumbnail image
702 | @thumbnail-padding:           4px;
703 | //** Thumbnail background color
704 | @thumbnail-bg:                @body-bg;
705 | //** Thumbnail border color
706 | @thumbnail-border:            #ddd;
707 | //** Thumbnail border radius
708 | @thumbnail-border-radius:     @border-radius-base;
709 | 
710 | //** Custom text color for thumbnail captions
711 | @thumbnail-caption-color:     @text-color;
712 | //** Padding around the thumbnail caption
713 | @thumbnail-caption-padding:   9px;
714 | 
715 | 
716 | //== Wells
717 | //
718 | //##
719 | 
720 | @well-bg:                     #f5f5f5;
721 | @well-border:                 darken(@well-bg, 7%);
722 | 
723 | 
724 | //== Badges
725 | //
726 | //##
727 | 
728 | @badge-color:                 #fff;
729 | //** Linked badge text color on hover
730 | @badge-link-hover-color:      #fff;
731 | @badge-bg:                    @gray-light;
732 | 
733 | //** Badge text color in active nav link
734 | @badge-active-color:          @link-color;
735 | //** Badge background color in active nav link
736 | @badge-active-bg:             #fff;
737 | 
738 | @badge-font-weight:           bold;
739 | @badge-line-height:           1;
740 | @badge-border-radius:         10px;
741 | 
742 | 
743 | //== Breadcrumbs
744 | //
745 | //##
746 | 
747 | @breadcrumb-padding-vertical:   8px;
748 | @breadcrumb-padding-horizontal: 15px;
749 | //** Breadcrumb background color
750 | @breadcrumb-bg:                 #f5f5f5;
751 | //** Breadcrumb text color
752 | @breadcrumb-color:              #ccc;
753 | //** Text color of current page in the breadcrumb
754 | @breadcrumb-active-color:       @gray-light;
755 | //** Textual separator for between breadcrumb elements
756 | @breadcrumb-separator:          "/";
757 | 
758 | 
759 | //== Carousel
760 | //
761 | //##
762 | 
763 | @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
764 | 
765 | @carousel-control-color:                      #fff;
766 | @carousel-control-width:                      15%;
767 | @carousel-control-opacity:                    .5;
768 | @carousel-control-font-size:                  20px;
769 | 
770 | @carousel-indicator-active-bg:                #fff;
771 | @carousel-indicator-border-color:             #fff;
772 | 
773 | @carousel-caption-color:                      #fff;
774 | 
775 | 
776 | //== Close
777 | //
778 | //##
779 | 
780 | @close-font-weight:           bold;
781 | @close-color:                 #000;
782 | @close-text-shadow:           0 1px 0 #fff;
783 | 
784 | 
785 | //== Code
786 | //
787 | //##
788 | 
789 | @code-color:                  #c7254e;
790 | @code-bg:                     #f9f2f4;
791 | 
792 | @kbd-color:                   #fff;
793 | @kbd-bg:                      #333;
794 | 
795 | @pre-bg:                      #f5f5f5;
796 | @pre-color:                   @gray-dark;
797 | @pre-border-color:            #ccc;
798 | @pre-scrollable-max-height:   340px;
799 | 
800 | 
801 | //== Type
802 | //
803 | //##
804 | 
805 | //** Text muted color
806 | @text-muted:                  @gray-light;
807 | //** Abbreviations and acronyms border color
808 | @abbr-border-color:           @gray-light;
809 | //** Headings small color
810 | @headings-small-color:        @gray-light;
811 | //** Blockquote small color
812 | @blockquote-small-color:      @gray-light;
813 | //** Blockquote font size
814 | @blockquote-font-size:        (@font-size-base * 1.25);
815 | //** Blockquote border color
816 | @blockquote-border-color:     @gray-lighter;
817 | //** Page header border color
818 | @page-header-border-color:    @gray-lighter;
819 | 
820 | 
821 | //== Miscellaneous
822 | //
823 | //##
824 | 
825 | //** Horizontal line color.
826 | @hr-border:                   @gray-lighter;
827 | 
828 | //** Horizontal offset for forms and lists.
829 | @component-offset-horizontal: 180px;
830 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "custom-bootstrap-kickstart",
 3 |   "version": "0.1.0",
 4 |   "license": "MIT",
 5 |   "private": true,
 6 |   "devDependencies": {
 7 |     "gulp": "^3.8.1",
 8 |     "gulp-less": "^1.3.0",
 9 |     "main-bower-files": "^1.0.1"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     
 5 |     
 6 |     Bootstrap Customization Example
 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 | 


--------------------------------------------------------------------------------