├── js ├── script.js ├── .jshintrc ├── .jscsrc ├── transition.js ├── alert.js ├── button.js ├── tab.js ├── popover.js ├── affix.js ├── dropdown.js ├── scrollspy.js ├── collapse.js ├── carousel.js └── modal.js ├── less ├── theme.less ├── mixins │ ├── center-block.less │ ├── text-emphasis.less │ ├── resize.less │ ├── progress-bar.less │ ├── size.less │ ├── background-variant.less │ ├── opacity.less │ ├── text-overflow.less │ ├── tab-focus.less │ ├── labels.less │ ├── nav-divider.less │ ├── reset-filter.less │ ├── alerts.less │ ├── nav-vertical-align.less │ ├── responsive-visibility.less │ ├── panels.less │ ├── pagination.less │ ├── border-radius.less │ ├── list-group.less │ ├── hide-text.less │ ├── clearfix.less │ ├── table-row.less │ ├── image.less │ ├── buttons.less │ ├── forms.less │ ├── grid-framework.less │ ├── grid.less │ ├── gradients.less │ └── vendor-prefixes.less ├── .csslintrc ├── wells.less ├── breadcrumbs.less ├── responsive-embed.less ├── component-animations.less ├── close.less ├── thumbnails.less ├── utilities.less ├── media.less ├── pager.less ├── jumbotron.less ├── mixins.less ├── badges.less ├── bootstrap.less ├── labels.less ├── code.less ├── alerts.less ├── grid.less ├── progress-bars.less ├── print.less ├── pagination.less ├── tooltip.less ├── scaffolding.less ├── list-group.less ├── modals.less ├── popovers.less ├── buttons.less ├── input-groups.less ├── responsive-utilities.less ├── tables.less ├── dropdowns.less ├── carousel.less ├── navs.less ├── button-groups.less ├── panels.less ├── type.less ├── .csscomb.json └── normalize.less ├── fonts ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff ├── package.json ├── LICENSE ├── README.md └── gulpfile.js /js/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /less/theme.less: -------------------------------------------------------------------------------- 1 | // Import Bootstrap LESS files 2 | @import "bootstrap.less"; 3 | 4 | // Theme variables go here: 5 | -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/bootstrap3-LESS-theme/master/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/bootstrap3-LESS-theme/master/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/bootstrap3-LESS-theme/master/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /less/mixins/center-block.less: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | .center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /less/mixins/text-emphasis.less: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | .text-emphasis-variant(@color) { 4 | color: @color; 5 | a&:hover { 6 | color: darken(@color, 10%); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/resize.less: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | .resizable(@direction) { 4 | resize: @direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Safari fix 6 | } 7 | -------------------------------------------------------------------------------- /less/mixins/progress-bar.less: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | .progress-bar-variant(@color) { 4 | background-color: @color; 5 | .progress-striped & { 6 | #gradient > .striped(); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/size.less: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | .size(@width; @height) { 4 | width: @width; 5 | height: @height; 6 | } 7 | 8 | .square(@size) { 9 | .size(@size; @size); 10 | } 11 | -------------------------------------------------------------------------------- /less/mixins/background-variant.less: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | .bg-variant(@color) { 4 | background-color: @color; 5 | a&:hover { 6 | background-color: darken(@color, 10%); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/opacity.less: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | .opacity(@opacity) { 4 | opacity: @opacity; 5 | // IE8 filter 6 | @opacity-ie: (@opacity * 100); 7 | filter: ~"alpha(opacity=@{opacity-ie})"; 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/text-overflow.less: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | .text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/tab-focus.less: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | .tab-focus() { 4 | // Default 5 | outline: thin dotted; 6 | // WebKit 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /less/mixins/labels.less: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | .label-variant(@color) { 4 | background-color: @color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken(@color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi" : true, 3 | "boss" : true, 4 | "browser" : true, 5 | "debug" : true, 6 | "devel" : true, 7 | "eqeqeq" : false, 8 | "eqnull" : true, 9 | "expr" : true, 10 | "laxbreak" : true, 11 | "validthis": true 12 | } 13 | -------------------------------------------------------------------------------- /less/mixins/nav-divider.less: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | .nav-divider(@color: #e5e5e5) { 6 | height: 1px; 7 | margin: ((@line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: @color; 10 | } 11 | -------------------------------------------------------------------------------- /less/mixins/reset-filter.less: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | .reset-filter() { 7 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); 8 | } 9 | -------------------------------------------------------------------------------- /less/mixins/alerts.less: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | .alert-variant(@background; @border; @text-color) { 4 | background-color: @background; 5 | border-color: @border; 6 | color: @text-color; 7 | 8 | hr { 9 | border-top-color: darken(@border, 5%); 10 | } 11 | .alert-link { 12 | color: darken(@text-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /less/mixins/nav-vertical-align.less: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | .navbar-vertical-align(@element-height) { 7 | margin-top: ((@navbar-height - @element-height) / 2); 8 | margin-bottom: ((@navbar-height - @element-height) / 2); 9 | } 10 | -------------------------------------------------------------------------------- /less/mixins/responsive-visibility.less: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | .responsive-visibility() { 6 | display: block !important; 7 | table& { display: table; } 8 | tr& { display: table-row !important; } 9 | th&, 10 | td& { display: table-cell !important; } 11 | } 12 | 13 | .responsive-invisibility() { 14 | display: none !important; 15 | } 16 | -------------------------------------------------------------------------------- /less/.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-sizing": false, 4 | "box-model": false, 5 | "compatible-vendor-prefixes": false, 6 | "floats": false, 7 | "font-sizes": false, 8 | "gradients": false, 9 | "important": false, 10 | "known-properties": false, 11 | "outline-none": false, 12 | "qualified-headings": false, 13 | "regex-selectors": false, 14 | "shorthand": false, 15 | "text-indent": false, 16 | "unique-headings": false, 17 | "universal-selector": false, 18 | "unqualified-attributes": false 19 | } 20 | -------------------------------------------------------------------------------- /less/mixins/panels.less: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { 4 | border-color: @border; 5 | 6 | & > .panel-heading { 7 | color: @heading-text-color; 8 | background-color: @heading-bg-color; 9 | border-color: @heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: @border; 13 | } 14 | } 15 | & > .panel-footer { 16 | + .panel-collapse > .panel-body { 17 | border-bottom-color: @border; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /less/mixins/pagination.less: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: @padding-vertical @padding-horizontal; 8 | font-size: @font-size; 9 | } 10 | &:first-child { 11 | > a, 12 | > span { 13 | .border-left-radius(@border-radius); 14 | } 15 | } 16 | &:last-child { 17 | > a, 18 | > span { 19 | .border-right-radius(@border-radius); 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/mixins/border-radius.less: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | .border-top-radius(@radius) { 4 | border-top-right-radius: @radius; 5 | border-top-left-radius: @radius; 6 | } 7 | .border-right-radius(@radius) { 8 | border-bottom-right-radius: @radius; 9 | border-top-right-radius: @radius; 10 | } 11 | .border-bottom-radius(@radius) { 12 | border-bottom-right-radius: @radius; 13 | border-bottom-left-radius: @radius; 14 | } 15 | .border-left-radius(@radius) { 16 | border-bottom-left-radius: @radius; 17 | border-top-left-radius: @radius; 18 | } 19 | -------------------------------------------------------------------------------- /less/wells.less: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: @well-bg; 12 | border: 1px solid @well-border; 13 | border-radius: @border-radius-base; 14 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: @border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: @border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /less/mixins/list-group.less: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | .list-group-item-variant(@state; @background; @color) { 4 | .list-group-item-@{state} { 5 | color: @color; 6 | background-color: @background; 7 | 8 | a& { 9 | color: @color; 10 | 11 | .list-group-item-heading { 12 | color: inherit; 13 | } 14 | 15 | &:hover, 16 | &:focus { 17 | color: @color; 18 | background-color: darken(@background, 5%); 19 | } 20 | &.active, 21 | &.active:hover, 22 | &.active:focus { 23 | color: #fff; 24 | background-color: @color; 25 | border-color: @color; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /less/mixins/hide-text.less: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (will be removed in v4) 10 | .hide-text() { 11 | font: ~"0/0" a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | .text-hide() { 20 | .hide-text(); 21 | } 22 | -------------------------------------------------------------------------------- /less/mixins/clearfix.less: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | .clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /less/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; 8 | margin-bottom: @line-height-computed; 9 | list-style: none; 10 | background-color: @breadcrumb-bg; 11 | border-radius: @border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 18 | padding: 0 5px; 19 | color: @breadcrumb-color; 20 | } 21 | } 22 | 23 | > .active { 24 | color: @breadcrumb-active-color; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /less/responsive-embed.less: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | bottom: 0; 20 | height: 100%; 21 | width: 100%; 22 | border: 0; 23 | } 24 | 25 | // Modifier class for 16:9 aspect ratio 26 | &.embed-responsive-16by9 { 27 | padding-bottom: 56.25%; 28 | } 29 | 30 | // Modifier class for 4:3 aspect ratio 31 | &.embed-responsive-4by3 { 32 | padding-bottom: 75%; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap3-LESS-theme", 3 | "version": "0.0.1", 4 | "description": "Bootstrap 3 Theme starter with LESS and gulp.js", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Maksim Surguy", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "gulp": "^3.5.5", 13 | "gulp-rename": "^1.2.0", 14 | "gulp-concat": "^2.1.7", 15 | "gulp-uglify": "^0.2.1", 16 | "gulp-jshint": "^1.5.0", 17 | "gulp-sass": "^0.7.1", 18 | "gulp-less": "^1.2.2", 19 | "gulp-minify-css": "^0.3.0", 20 | "gulp-autoprefixer": "0.0.6", 21 | "gulp-size": "^0.1.3", 22 | "gulp-bytediff": "^0.1.8" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /less/component-animations.less: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | .transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | 21 | &.in { display: block; } 22 | tr&.in { display: table-row; } 23 | tbody&.in { display: table-row-group; } 24 | } 25 | 26 | .collapsing { 27 | position: relative; 28 | height: 0; 29 | overflow: hidden; 30 | .transition(height .35s ease); 31 | } 32 | -------------------------------------------------------------------------------- /less/mixins/table-row.less: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | .table-row-variant(@state; @background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.@{state}, 10 | > th.@{state}, 11 | &.@{state} > td, 12 | &.@{state} > th { 13 | background-color: @background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.@{state}:hover, 21 | > th.@{state}:hover, 22 | &.@{state}:hover > td, 23 | &.@{state}:hover > th { 24 | background-color: darken(@background, 5%); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /less/close.less: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: (@font-size-base * 1.5); 9 | font-weight: @close-font-weight; 10 | line-height: 1; 11 | color: @close-color; 12 | text-shadow: @close-text-shadow; 13 | .opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: @close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | .opacity(.5); 21 | } 22 | 23 | // Additional properties for button version 24 | // iOS requires the button element instead of an anchor tag. 25 | // If you want the anchor version, it requires `href="#"`. 26 | button& { 27 | padding: 0; 28 | cursor: pointer; 29 | background: transparent; 30 | border: 0; 31 | -webkit-appearance: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/thumbnails.less: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | display: block; 9 | padding: @thumbnail-padding; 10 | margin-bottom: @line-height-computed; 11 | line-height: @line-height-base; 12 | background-color: @thumbnail-bg; 13 | border: 1px solid @thumbnail-border; 14 | border-radius: @thumbnail-border-radius; 15 | .transition(all .2s ease-in-out); 16 | 17 | > img, 18 | a > img { 19 | &:extend(.img-responsive); 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | // Add a hover state for linked versions only 25 | a&:hover, 26 | a&:focus, 27 | a&.active { 28 | border-color: @link-color; 29 | } 30 | 31 | // Image captions 32 | .caption { 33 | padding: @thumbnail-caption-padding; 34 | color: @thumbnail-caption-color; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /less/utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | .clearfix(); 11 | } 12 | .center-block { 13 | .center-block(); 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | .text-hide(); 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | visibility: hidden !important; 48 | } 49 | 50 | 51 | // For Affix plugin 52 | // ------------------------- 53 | 54 | .affix { 55 | position: fixed; 56 | } 57 | -------------------------------------------------------------------------------- /less/media.less: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | zoom: 1; 14 | } 15 | 16 | // Proper spacing between instances of .media 17 | .media, 18 | .media .media { 19 | margin-top: 15px; 20 | } 21 | .media:first-child { 22 | margin-top: 0; 23 | } 24 | 25 | // For images and videos, set to block 26 | .media-object { 27 | display: block; 28 | } 29 | 30 | // Reset margins on headings for tighter default spacing 31 | .media-heading { 32 | margin: 0 0 5px; 33 | } 34 | 35 | 36 | // Media image alignment 37 | // ------------------------- 38 | 39 | .media { 40 | > .pull-left { 41 | margin-right: 10px; 42 | } 43 | > .pull-right { 44 | margin-left: 10px; 45 | } 46 | } 47 | 48 | 49 | // Media list variation 50 | // ------------------------- 51 | 52 | // Undo default ul/ol styles 53 | .media-list { 54 | padding-left: 0; 55 | list-style: none; 56 | } 57 | -------------------------------------------------------------------------------- /less/pager.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: @line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | &:extend(.clearfix all); 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: @pager-bg; 19 | border: 1px solid @pager-border; 20 | border-radius: @pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: @pager-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: @pager-disabled-color; 50 | background-color: @pager-bg; 51 | cursor: not-allowed; 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Maksim Surguy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /less/jumbotron.less: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding: @jumbotron-padding; 8 | margin-bottom: @jumbotron-padding; 9 | color: @jumbotron-color; 10 | background-color: @jumbotron-bg; 11 | 12 | h1, 13 | .h1 { 14 | color: @jumbotron-heading-color; 15 | } 16 | p { 17 | margin-bottom: (@jumbotron-padding / 2); 18 | font-size: @jumbotron-font-size; 19 | font-weight: 200; 20 | } 21 | 22 | > hr { 23 | border-top-color: darken(@jumbotron-bg, 10%); 24 | } 25 | 26 | .container & { 27 | border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container 28 | } 29 | 30 | .container { 31 | max-width: 100%; 32 | } 33 | 34 | @media screen and (min-width: @screen-sm-min) { 35 | padding-top: (@jumbotron-padding * 1.6); 36 | padding-bottom: (@jumbotron-padding * 1.6); 37 | 38 | .container & { 39 | padding-left: (@jumbotron-padding * 2); 40 | padding-right: (@jumbotron-padding * 2); 41 | } 42 | 43 | h1, 44 | .h1 { 45 | font-size: (@font-size-base * 4.5); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /less/mixins/image.less: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | .img-responsive(@display: block) { 10 | display: @display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { 21 | background-image: url("@{file-1x}"); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and ( min--moz-device-pixel-ratio: 2), 26 | only screen and ( -o-min-device-pixel-ratio: 2/1), 27 | only screen and ( min-device-pixel-ratio: 2), 28 | only screen and ( min-resolution: 192dpi), 29 | only screen and ( min-resolution: 2dppx) { 30 | background-image: url("@{file-2x}"); 31 | background-size: @width-1x @height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/mixins.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text.less"; 6 | @import "mixins/opacity.less"; 7 | @import "mixins/image.less"; 8 | @import "mixins/labels.less"; 9 | @import "mixins/reset-filter.less"; 10 | @import "mixins/resize.less"; 11 | @import "mixins/responsive-visibility.less"; 12 | @import "mixins/size.less"; 13 | @import "mixins/tab-focus.less"; 14 | @import "mixins/text-emphasis.less"; 15 | @import "mixins/text-overflow.less"; 16 | @import "mixins/vendor-prefixes.less"; 17 | 18 | // Components 19 | @import "mixins/alerts.less"; 20 | @import "mixins/buttons.less"; 21 | @import "mixins/panels.less"; 22 | @import "mixins/pagination.less"; 23 | @import "mixins/list-group.less"; 24 | @import "mixins/nav-divider.less"; 25 | @import "mixins/forms.less"; 26 | @import "mixins/progress-bar.less"; 27 | @import "mixins/table-row.less"; 28 | 29 | // Skins 30 | @import "mixins/background-variant.less"; 31 | @import "mixins/border-radius.less"; 32 | @import "mixins/gradients.less"; 33 | 34 | // Layout 35 | @import "mixins/clearfix.less"; 36 | @import "mixins/center-block.less"; 37 | @import "mixins/nav-vertical-align.less"; 38 | @import "mixins/grid-framework.less"; 39 | @import "mixins/grid.less"; 40 | -------------------------------------------------------------------------------- /less/mixins/buttons.less: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | .button-variant(@color; @background; @border) { 7 | color: @color; 8 | background-color: @background; 9 | border-color: @border; 10 | 11 | &:hover, 12 | &:focus, 13 | &:active, 14 | &.active, 15 | .open .dropdown-toggle& { 16 | color: @color; 17 | background-color: darken(@background, 10%); 18 | border-color: darken(@border, 12%); 19 | } 20 | &:active, 21 | &.active, 22 | .open .dropdown-toggle& { 23 | background-image: none; 24 | } 25 | &.disabled, 26 | &[disabled], 27 | fieldset[disabled] & { 28 | &, 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active { 33 | background-color: @background; 34 | border-color: @border; 35 | } 36 | } 37 | 38 | .badge { 39 | color: @background; 40 | background-color: @color; 41 | } 42 | } 43 | 44 | // Button sizes 45 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { 46 | padding: @padding-vertical @padding-horizontal; 47 | font-size: @font-size; 48 | line-height: @line-height; 49 | border-radius: @border-radius; 50 | } 51 | -------------------------------------------------------------------------------- /js/.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "disallowEmptyBlocks": true, 3 | "disallowKeywords": ["with"], 4 | "disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], 5 | "disallowMixedSpacesAndTabs": true, 6 | "disallowMultipleLineStrings": true, 7 | "disallowQuotedKeysInObjects": "allButReserved", 8 | "disallowRightStickedOperators": ["?", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], 9 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~"], 10 | "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], 11 | "disallowTrailingWhitespace": true, 12 | "requireCamelCaseOrUpperCaseIdentifiers": true, 13 | "requireLeftStickedOperators": [","], 14 | "requireLineFeedAtFileEnd": true, 15 | "requireRightStickedOperators": ["!"], 16 | "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], 17 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], 18 | "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], 19 | "requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true }, 20 | "validateIndentation": 2, 21 | "validateLineBreaks": "LF", 22 | "validateQuoteMarks": "'" 23 | } 24 | -------------------------------------------------------------------------------- /less/badges.less: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: @font-size-small; 12 | font-weight: @badge-font-weight; 13 | color: @badge-color; 14 | line-height: @badge-line-height; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: @badge-bg; 19 | border-radius: @badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | .btn-xs & { 32 | top: 0; 33 | padding: 1px 5px; 34 | } 35 | 36 | // Hover state, but only for links 37 | a& { 38 | &:hover, 39 | &:focus { 40 | color: @badge-link-hover-color; 41 | text-decoration: none; 42 | cursor: pointer; 43 | } 44 | } 45 | 46 | // Account for badges in navs 47 | a.list-group-item.active > &, 48 | .nav-pills > .active > a > & { 49 | color: @badge-active-color; 50 | background-color: @badge-active-bg; 51 | } 52 | .nav-pills > li > a > & { 53 | margin-left: 3px; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /less/bootstrap.less: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "variables.less"; 3 | @import "mixins.less"; 4 | 5 | // Reset and dependencies 6 | @import "normalize.less"; 7 | @import "print.less"; 8 | @import "glyphicons.less"; 9 | 10 | // Core CSS 11 | @import "scaffolding.less"; 12 | @import "type.less"; 13 | @import "code.less"; 14 | @import "grid.less"; 15 | @import "tables.less"; 16 | @import "forms.less"; 17 | @import "buttons.less"; 18 | 19 | // Components 20 | @import "component-animations.less"; 21 | @import "dropdowns.less"; 22 | @import "button-groups.less"; 23 | @import "input-groups.less"; 24 | @import "navs.less"; 25 | @import "navbar.less"; 26 | @import "breadcrumbs.less"; 27 | @import "pagination.less"; 28 | @import "pager.less"; 29 | @import "labels.less"; 30 | @import "badges.less"; 31 | @import "jumbotron.less"; 32 | @import "thumbnails.less"; 33 | @import "alerts.less"; 34 | @import "progress-bars.less"; 35 | @import "media.less"; 36 | @import "list-group.less"; 37 | @import "panels.less"; 38 | @import "responsive-embed.less"; 39 | @import "wells.less"; 40 | @import "close.less"; 41 | 42 | // Components w/ JavaScript 43 | @import "modals.less"; 44 | @import "tooltip.less"; 45 | @import "popovers.less"; 46 | @import "carousel.less"; 47 | 48 | // Utility classes 49 | @import "utilities.less"; 50 | @import "responsive-utilities.less"; 51 | -------------------------------------------------------------------------------- /less/labels.less: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: @label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // Add hover effects, but only for links 18 | a& { 19 | &:hover, 20 | &:focus { 21 | color: @label-link-hover-color; 22 | text-decoration: none; 23 | cursor: pointer; 24 | } 25 | } 26 | 27 | // Empty labels collapse automatically (not available in IE8) 28 | &:empty { 29 | display: none; 30 | } 31 | 32 | // Quick fix for labels in buttons 33 | .btn & { 34 | position: relative; 35 | top: -1px; 36 | } 37 | } 38 | 39 | // Colors 40 | // Contextual variations (linked labels get darker on :hover) 41 | 42 | .label-default { 43 | .label-variant(@label-default-bg); 44 | } 45 | 46 | .label-primary { 47 | .label-variant(@label-primary-bg); 48 | } 49 | 50 | .label-success { 51 | .label-variant(@label-success-bg); 52 | } 53 | 54 | .label-info { 55 | .label-variant(@label-info-bg); 56 | } 57 | 58 | .label-warning { 59 | .label-variant(@label-warning-bg); 60 | } 61 | 62 | .label-danger { 63 | .label-variant(@label-danger-bg); 64 | } 65 | -------------------------------------------------------------------------------- /less/code.less: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: @font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: @code-color; 19 | background-color: @code-bg; 20 | border-radius: @border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: @kbd-color; 28 | background-color: @kbd-bg; 29 | border-radius: @border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | } 32 | 33 | // Blocks of code 34 | pre { 35 | display: block; 36 | padding: ((@line-height-computed - 1) / 2); 37 | margin: 0 0 (@line-height-computed / 2); 38 | font-size: (@font-size-base - 1); // 14px to 13px 39 | line-height: @line-height-base; 40 | word-break: break-all; 41 | word-wrap: break-word; 42 | color: @pre-color; 43 | background-color: @pre-bg; 44 | border: 1px solid @pre-border-color; 45 | border-radius: @border-radius-base; 46 | 47 | // Account for some code outputs that place code tags in pre tags 48 | code { 49 | padding: 0; 50 | font-size: inherit; 51 | color: inherit; 52 | white-space: pre-wrap; 53 | background-color: transparent; 54 | border-radius: 0; 55 | } 56 | } 57 | 58 | // Enable scrollable blocks of code 59 | .pre-scrollable { 60 | max-height: @pre-scrollable-max-height; 61 | overflow-y: scroll; 62 | } 63 | -------------------------------------------------------------------------------- /less/alerts.less: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | // Base styles 6 | // ------------------------- 7 | 8 | .alert { 9 | padding: @alert-padding; 10 | margin-bottom: @line-height-computed; 11 | border: 1px solid transparent; 12 | border-radius: @alert-border-radius; 13 | 14 | // Headings for larger alerts 15 | h4 { 16 | margin-top: 0; 17 | // Specified for the h4 to prevent conflicts of changing @headings-color 18 | color: inherit; 19 | } 20 | // Provide class for links that match alerts 21 | .alert-link { 22 | font-weight: @alert-link-font-weight; 23 | } 24 | 25 | // Improve alignment and spacing of inner content 26 | > p, 27 | > ul { 28 | margin-bottom: 0; 29 | } 30 | > p + p { 31 | margin-top: 5px; 32 | } 33 | } 34 | 35 | // Dismissable alerts 36 | // 37 | // Expand the right padding and account for the close button's positioning. 38 | 39 | .alert-dismissable { 40 | padding-right: (@alert-padding + 20); 41 | 42 | // Adjust close link position 43 | .close { 44 | position: relative; 45 | top: -2px; 46 | right: -21px; 47 | color: inherit; 48 | } 49 | } 50 | 51 | // Alternate styles 52 | // 53 | // Generate contextual modifier classes for colorizing the alert. 54 | 55 | .alert-success { 56 | .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); 57 | } 58 | .alert-info { 59 | .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); 60 | } 61 | .alert-warning { 62 | .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); 63 | } 64 | .alert-danger { 65 | .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); 66 | } 67 | -------------------------------------------------------------------------------- /js/transition.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: transition.js v3.1.1 3 | * http://getbootstrap.com/javascript/#transitions 4 | * ======================================================================== 5 | * Copyright 2011-2014 Twitter, Inc. 6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | 10 | +function ($) { 11 | 'use strict'; 12 | 13 | // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 14 | // ============================================================ 15 | 16 | function transitionEnd() { 17 | var el = document.createElement('bootstrap') 18 | 19 | var transEndEventNames = { 20 | WebkitTransition : 'webkitTransitionEnd', 21 | MozTransition : 'transitionend', 22 | OTransition : 'oTransitionEnd otransitionend', 23 | transition : 'transitionend' 24 | } 25 | 26 | for (var name in transEndEventNames) { 27 | if (el.style[name] !== undefined) { 28 | return { end: transEndEventNames[name] } 29 | } 30 | } 31 | 32 | return false // explicit for ie8 ( ._.) 33 | } 34 | 35 | // http://blog.alexmaccaw.com/css-transitions 36 | $.fn.emulateTransitionEnd = function (duration) { 37 | var called = false, $el = this 38 | $(this).one($.support.transition.end, function () { called = true }) 39 | var callback = function () { if (!called) $($el).trigger($.support.transition.end) } 40 | setTimeout(callback, duration) 41 | return this 42 | } 43 | 44 | $(function () { 45 | $.support.transition = transitionEnd() 46 | }) 47 | 48 | }(jQuery); 49 | -------------------------------------------------------------------------------- /less/grid.less: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | .container-fixed(); 12 | 13 | @media (min-width: @screen-sm-min) { 14 | width: @container-sm; 15 | } 16 | @media (min-width: @screen-md-min) { 17 | width: @container-md; 18 | } 19 | @media (min-width: @screen-lg-min) { 20 | width: @container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | .container-fixed(); 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | .make-row(); 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | .make-grid-columns(); 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | .make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: @screen-sm-min) { 65 | .make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: @screen-md-min) { 74 | .make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: @screen-lg-min) { 83 | .make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /less/progress-bars.less: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | @keyframes progress-bar-stripes { 10 | from { background-position: 40px 0; } 11 | to { background-position: 0 0; } 12 | } 13 | 14 | 15 | 16 | // Bar itself 17 | // ------------------------- 18 | 19 | // Outer container 20 | .progress { 21 | overflow: hidden; 22 | height: @line-height-computed; 23 | margin-bottom: @line-height-computed; 24 | background-color: @progress-bg; 25 | border-radius: @border-radius-base; 26 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 27 | } 28 | 29 | // Bar of progress 30 | .progress-bar { 31 | float: left; 32 | width: 0%; 33 | height: 100%; 34 | font-size: @font-size-small; 35 | line-height: @line-height-computed; 36 | color: @progress-bar-color; 37 | text-align: center; 38 | background-color: @progress-bar-bg; 39 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 40 | .transition(width .6s ease); 41 | } 42 | 43 | // Striped bars 44 | .progress-striped .progress-bar { 45 | #gradient > .striped(); 46 | background-size: 40px 40px; 47 | } 48 | 49 | // Call animation for the active one 50 | .progress.active .progress-bar { 51 | .animation(progress-bar-stripes 2s linear infinite); 52 | } 53 | 54 | // Account for lower percentages 55 | .progress-bar { 56 | &[aria-valuenow="1"], 57 | &[aria-valuenow="2"] { 58 | min-width: 30px; 59 | } 60 | 61 | &[aria-valuenow="0"] { 62 | color: @gray-light; 63 | min-width: 30px; 64 | background-color: transparent; 65 | background-image: none; 66 | box-shadow: none; 67 | } 68 | } 69 | 70 | 71 | 72 | // Variations 73 | // ------------------------- 74 | 75 | .progress-bar-success { 76 | .progress-bar-variant(@progress-bar-success-bg); 77 | } 78 | 79 | .progress-bar-info { 80 | .progress-bar-variant(@progress-bar-info-bg); 81 | } 82 | 83 | .progress-bar-warning { 84 | .progress-bar-variant(@progress-bar-warning-bg); 85 | } 86 | 87 | .progress-bar-danger { 88 | .progress-bar-variant(@progress-bar-danger-bg); 89 | } 90 | -------------------------------------------------------------------------------- /less/print.less: -------------------------------------------------------------------------------- 1 | // 2 | // Basic print styles 3 | // -------------------------------------------------- 4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 5 | 6 | @media print { 7 | 8 | * { 9 | text-shadow: none !important; 10 | color: #000 !important; // Black prints faster: h5bp.com/s 11 | background: transparent !important; 12 | box-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | // Don't show links for images, or javascript/internal links 29 | a[href^="javascript:"]:after, 30 | a[href^="#"]:after { 31 | content: ""; 32 | } 33 | 34 | pre, 35 | blockquote { 36 | border: 1px solid #999; 37 | page-break-inside: avoid; 38 | } 39 | 40 | thead { 41 | display: table-header-group; // h5bp.com/t 42 | } 43 | 44 | tr, 45 | img { 46 | page-break-inside: avoid; 47 | } 48 | 49 | img { 50 | max-width: 100% !important; 51 | } 52 | 53 | p, 54 | h2, 55 | h3 { 56 | orphans: 3; 57 | widows: 3; 58 | } 59 | 60 | h2, 61 | h3 { 62 | page-break-after: avoid; 63 | } 64 | 65 | // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 66 | // Once fixed, we can just straight up remove this. 67 | select { 68 | background: #fff !important; 69 | } 70 | 71 | // Bootstrap components 72 | .navbar { 73 | display: none; 74 | } 75 | .table { 76 | td, 77 | th { 78 | background-color: #fff !important; 79 | } 80 | } 81 | .btn, 82 | .dropup > .btn { 83 | > .caret { 84 | border-top-color: #000 !important; 85 | } 86 | } 87 | .label { 88 | border: 1px solid #000; 89 | } 90 | 91 | .table { 92 | border-collapse: collapse !important; 93 | } 94 | .table-bordered { 95 | th, 96 | td { 97 | border: 1px solid #ddd !important; 98 | } 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap3-LESS-theme 2 | ===================== 3 | 4 | Bootstrap 3 theme starter based on LESS and gulp instead of grunt. 5 | 6 | # What's this? 7 | 8 | In my latest projects I needed to create a bunch of custom Bootstrap 3 themes (http://bookpag.es for example). I love using LESS for quick CSS modifications and using Grunt is not my thing. 9 | 10 | Instead I decided to create a Bootstrap theme starter that uses easy to understand gulp.js (gulpjs.com) that you can modify to fit your liking. Gulp allows you to automate all the minification/compilation of assets in a convenient way. 11 | 12 | This repo is set up to compile all assets in "less" folder, minify them and spit them out as "styles.css" and "styles.min.css" in "dist/css" folder. 13 | 14 | The same goes with JS assets. All JS scripts from "js" folder are combined and minified, then put in the "dist/js" folder. 15 | 16 | The icon fonts remain untouched, they are just copied from the source folder to "dist" folder. 17 | 18 | ## Installation 19 | 20 | You need to have npm installed. 21 | 22 | Then just run 23 | 24 | ``` 25 | npm install 26 | ``` 27 | 28 | in the root of this folder. This will install all dependencies and your setup will be ready to go. 29 | 30 | ## Workflow 31 | 32 | To run the file watcher and compile files as they are modified, just run "gulp" from command line: 33 | 34 | ``` 35 | gulp 36 | ``` 37 | 38 | Now, try to add something to the "less/theme.less" file or modify any of Bootstrap's files and save the file. You will see gulp doing its thing, processing the LESS assets and compiling them. 39 | 40 | Same goes with JS files. Any scripts you place in "js" folder will be added and combined into one JS file. If you need specific order of JS file concatenation, make sure to check out the docs for gulp-concat plugin : https://github.com/wearefractal/gulp-concat 41 | 42 | Enjoy using this small Theme starter to produce awesome Bootstrap 3 themes. 43 | 44 | ## More resources 45 | 46 | I've written a free chapter on integrating Bootstrap 3 in your web applications. You can read it in my new e-book: http://bookpag.es/frontend 47 | 48 | Also, make sure to check out my website that has hundreds of awesome Bootstrap snippets ready for you to copy/paste: http://bootsnipp.com 49 | 50 | -------------------------------------------------------------------------------- /less/pagination.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: @line-height-computed 0; 8 | border-radius: @border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: @padding-base-vertical @padding-base-horizontal; 17 | line-height: @line-height-base; 18 | text-decoration: none; 19 | color: @pagination-color; 20 | background-color: @pagination-bg; 21 | border: 1px solid @pagination-border; 22 | margin-left: -1px; 23 | } 24 | &:first-child { 25 | > a, 26 | > span { 27 | margin-left: 0; 28 | .border-left-radius(@border-radius-base); 29 | } 30 | } 31 | &:last-child { 32 | > a, 33 | > span { 34 | .border-right-radius(@border-radius-base); 35 | } 36 | } 37 | } 38 | 39 | > li > a, 40 | > li > span { 41 | &:hover, 42 | &:focus { 43 | color: @pagination-hover-color; 44 | background-color: @pagination-hover-bg; 45 | border-color: @pagination-hover-border; 46 | } 47 | } 48 | 49 | > .active > a, 50 | > .active > span { 51 | &, 52 | &:hover, 53 | &:focus { 54 | z-index: 2; 55 | color: @pagination-active-color; 56 | background-color: @pagination-active-bg; 57 | border-color: @pagination-active-border; 58 | cursor: default; 59 | } 60 | } 61 | 62 | > .disabled { 63 | > span, 64 | > span:hover, 65 | > span:focus, 66 | > a, 67 | > a:hover, 68 | > a:focus { 69 | color: @pagination-disabled-color; 70 | background-color: @pagination-disabled-bg; 71 | border-color: @pagination-disabled-border; 72 | cursor: not-allowed; 73 | } 74 | } 75 | } 76 | 77 | // Sizing 78 | // -------------------------------------------------- 79 | 80 | // Large 81 | .pagination-lg { 82 | .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); 83 | } 84 | 85 | // Small 86 | .pagination-sm { 87 | .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); 88 | } 89 | -------------------------------------------------------------------------------- /js/alert.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: alert.js v3.1.1 3 | * http://getbootstrap.com/javascript/#alerts 4 | * ======================================================================== 5 | * Copyright 2011-2014 Twitter, Inc. 6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | 10 | +function ($) { 11 | 'use strict'; 12 | 13 | // ALERT CLASS DEFINITION 14 | // ====================== 15 | 16 | var dismiss = '[data-dismiss="alert"]' 17 | var Alert = function (el) { 18 | $(el).on('click', dismiss, this.close) 19 | } 20 | 21 | Alert.prototype.close = function (e) { 22 | var $this = $(this) 23 | var selector = $this.attr('data-target') 24 | 25 | if (!selector) { 26 | selector = $this.attr('href') 27 | selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 28 | } 29 | 30 | var $parent = $(selector) 31 | 32 | if (e) e.preventDefault() 33 | 34 | if (!$parent.length) { 35 | $parent = $this.hasClass('alert') ? $this : $this.parent() 36 | } 37 | 38 | $parent.trigger(e = $.Event('close.bs.alert')) 39 | 40 | if (e.isDefaultPrevented()) return 41 | 42 | $parent.removeClass('in') 43 | 44 | function removeElement() { 45 | $parent.trigger('closed.bs.alert').remove() 46 | } 47 | 48 | $.support.transition && $parent.hasClass('fade') ? 49 | $parent 50 | .one($.support.transition.end, removeElement) 51 | .emulateTransitionEnd(150) : 52 | removeElement() 53 | } 54 | 55 | 56 | // ALERT PLUGIN DEFINITION 57 | // ======================= 58 | 59 | var old = $.fn.alert 60 | 61 | $.fn.alert = function (option) { 62 | return this.each(function () { 63 | var $this = $(this) 64 | var data = $this.data('bs.alert') 65 | 66 | if (!data) $this.data('bs.alert', (data = new Alert(this))) 67 | if (typeof option == 'string') data[option].call($this) 68 | }) 69 | } 70 | 71 | $.fn.alert.Constructor = Alert 72 | 73 | 74 | // ALERT NO CONFLICT 75 | // ================= 76 | 77 | $.fn.alert.noConflict = function () { 78 | $.fn.alert = old 79 | return this 80 | } 81 | 82 | 83 | // ALERT DATA-API 84 | // ============== 85 | 86 | $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) 87 | 88 | }(jQuery); 89 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Gulpfile for LESS -> CSS conversion, JS combination and minification of Bootstrap files and a custom theme. 4 | 5 | */ 6 | 7 | // Include Gulp 8 | var gulp = require('gulp'); 9 | 10 | // Include Plugins 11 | var jshint = require('gulp-jshint'); 12 | var less = require('gulp-less'); 13 | var prefixer = require('gulp-autoprefixer'); 14 | var concat = require('gulp-concat'); 15 | var uglify = require('gulp-uglify'); 16 | var rename = require('gulp-rename'); 17 | var minifycss = require('gulp-minify-css'); 18 | var size = require('gulp-size'); 19 | var bytediff = require('gulp-bytediff'); 20 | 21 | // Copy the icon fonts to dist folder 22 | gulp.task('copy_fonts', function() { 23 | gulp.src('./fonts/**') 24 | .pipe(gulp.dest('./dist/fonts')); 25 | }); 26 | 27 | // Define Lint Task for JS 28 | gulp.task('lint', function() { 29 | return gulp.src('js/*.js') 30 | .pipe(jshint()) 31 | .pipe(jshint.reporter('default')); 32 | }); 33 | 34 | // Define a task for converting LESS files to CSSm minifying and saving in dist/css folder: 35 | gulp.task('less', function () { 36 | gulp.src('less/bootstrap.less') 37 | .pipe(less()) 38 | .pipe(prefixer('last 5 versions', 'ie 8')) 39 | .pipe(rename("styles.css")) 40 | .pipe(gulp.dest('dist/css')) 41 | .pipe(bytediff.start()) 42 | .pipe(minifycss()) 43 | .pipe(rename("styles.min.css")) 44 | .pipe(gulp.dest('dist/css')) 45 | .pipe(bytediff.stop()); 46 | }); 47 | 48 | // Concatenate & Minify JS 49 | gulp.task('scripts', function() { 50 | return gulp.src([ 51 | 'js/transition.js', 52 | 'js/alert.js', 53 | 'js/button.js', 54 | 'js/carousel.js', 55 | 'js/collapse.js', 56 | 'js/dropdown.js', 57 | 'js/modal.js', 58 | 'js/tooltip.js', 59 | 'js/popover.js', 60 | 'js/scrollspy.js', 61 | 'js/tab.js', 62 | 'js/affix.js', 63 | 'js/script.js' 64 | ]) 65 | .pipe(concat('scripts.js')) 66 | .pipe(bytediff.start()) 67 | .pipe(gulp.dest('dist/js')) 68 | .pipe(rename('scripts.min.js')) 69 | .pipe(uglify()) 70 | .pipe(gulp.dest('dist/js')) 71 | .pipe(bytediff.stop()); 72 | }); 73 | 74 | 75 | 76 | // Define a task to watch changes in js and less folders 77 | gulp.task('watch', function () { 78 | gulp.watch('js/*.js', ['lint', 'scripts']); 79 | gulp.watch('less/*.less', ['less']); 80 | }); 81 | 82 | // Define a default task 83 | gulp.task('default', ['copy_fonts', 'less', 'lint', 'scripts', 'watch']); 84 | -------------------------------------------------------------------------------- /less/mixins/forms.less: -------------------------------------------------------------------------------- 1 | // Form validation states 2 | // 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, 4 | // and successes. 5 | 6 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { 7 | // Color the label and help text 8 | .help-block, 9 | .control-label, 10 | .radio, 11 | .checkbox, 12 | .radio-inline, 13 | .checkbox-inline { 14 | color: @text-color; 15 | } 16 | // Set the border and box shadow on specific inputs to match 17 | .form-control { 18 | border-color: @border-color; 19 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 20 | &:focus { 21 | border-color: darken(@border-color, 10%); 22 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); 23 | .box-shadow(@shadow); 24 | } 25 | } 26 | // Set validation states also for addons 27 | .input-group-addon { 28 | color: @text-color; 29 | border-color: @border-color; 30 | background-color: @background-color; 31 | } 32 | // Optional feedback icon 33 | .form-control-feedback { 34 | color: @text-color; 35 | } 36 | } 37 | 38 | 39 | // Form control focus state 40 | // 41 | // Generate a customized focus state and for any input with the specified color, 42 | // which defaults to the `@input-focus-border` variable. 43 | // 44 | // We highly encourage you to not customize the default value, but instead use 45 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 46 | // WebKit's default styles, but applicable to a wider range of browsers. Its 47 | // usability and accessibility should be taken into account with any change. 48 | // 49 | // Example usage: change the default blue border and shadow to white for better 50 | // contrast against a dark gray background. 51 | .form-control-focus(@color: @input-border-focus) { 52 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); 53 | &:focus { 54 | border-color: @color; 55 | outline: 0; 56 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); 57 | } 58 | } 59 | 60 | // Form control sizing 61 | // 62 | // Relative text size, padding, and border-radii changes for form controls. For 63 | // horizontal sizing, wrap controls in the predefined grid classes. `