diff --git a/Gruntfile.js b/Gruntfile.js index 29f99000ec..2d70b014c0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,9 +10,11 @@ module.exports = function (grunt) { return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&') } + var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js') var fs = require('fs') var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js') var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js') + var path = require('path') // Project configuration. grunt.initConfig({ @@ -46,6 +48,9 @@ module.exports = function (grunt) { }, assets: { src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js'] + }, + docsGrunt: { + src: ['docs/grunt/*.js'] } }, @@ -64,6 +69,9 @@ module.exports = function (grunt) { }, assets: { src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js'] + }, + docsGrunt: { + src: ['docs/grunt/*.js'] } }, @@ -236,6 +244,23 @@ module.exports = function (grunt) { docs: {} }, + jade: { + compile: { + options: { + pretty: true, + data: function () { + var filePath = path.join(__dirname, 'less/variables.less'); + var fileContent = fs.readFileSync(filePath, {encoding: 'utf8'}); + var parser = new BsLessdocParser(fileContent); + return {sections: parser.parseFile()}; + } + }, + files: { + 'docs/_includes/customizer-variables.html': 'docs/customizer-variables.jade' + } + } + }, + validation: { options: { charset: 'utf-8', @@ -301,7 +326,7 @@ module.exports = function (grunt) { var testSubtasks = []; // Skip core tests if running a different subset of the test suite if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') { - testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit']); + testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'jscs', 'qunit', 'build-customizer-vars-form']); } // Skip HTML validation if running a different subset of the test suite if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') { @@ -339,5 +364,7 @@ module.exports = function (grunt) { grunt.registerTask('build-glyphicons-data', generateGlyphiconsData); // task for building customizer - grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', generateRawFilesJs); + grunt.registerTask('build-customizer', ['build-customizer-vars-form', 'build-raw-files']); + grunt.registerTask('build-customizer-vars-form', ['jade']); + grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', generateRawFilesJs); }; diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html new file mode 100644 index 0000000000..5093bd5f32 --- /dev/null +++ b/docs/_includes/customizer-variables.html @@ -0,0 +1,1684 @@ + + +

Colors

+

Gray and brand colors for use across Bootstrap.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Scaffolding

+
+
+ + +

Background color for <body>.

+
+
+ + +

Global text color on <body>.

+
+
+ + +

Global textual link color.

+
+
+ + +

Link hover color set via darken() function.

+
+
+

Typography

+

Font, line-height, and color for body text, headings, and more.

+
+
+ + +
+
+ + +
+
+ + +

Default monospace fonts for <code>, <kbd>, and <pre>.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +

Unit-less line-height for use in components like buttons.

+
+
+ + +

Computed "line-height" (font-size &times; line-height) for use with margin, padding, etc.

+
+
+ + +

By default, this inherits from the <body>.

+
+
+ + +
+
+ + +
+
+ + +
+
+

Components

+

Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +

Global color for active items (e.g., navs or dropdowns).

+
+
+ + +

Global background color for active items (e.g., navs or dropdowns).

+
+
+ + +

Width of the border for generating carets that indicator dropdowns.

+
+
+ + +

Carets increase slightly in size for larger components.

+
+
+

Tables

+

Customizes the .table component with basic values, each used across all table variations.

+
+
+ + +

Padding for <th>s and <td>s.

+
+
+ + +

Padding for cells in .table-condensed.

+
+
+ + +

Default background color used for all tables.

+
+
+ + +

Background color used for .table-striped.

+
+
+ + +

Background color used for .table-hover.

+
+
+ + +
+
+ + +

Border color for table and cell borders.

+
+
+

Buttons

+

For each of Bootstrap's buttons, define text, background and border color.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Forms

+

+
+
+ + +

<input> background color

+
+
+ + +

<input disabled> background color

+
+
+ + +

Text color for <input>s

+
+
+ + +

<input> border color

+
+
+ + +

<input> border radius

+
+
+ + +

Border color for inputs on focus

+
+
+ + +

Placeholder text color

+
+
+ + +

Default .form-control height

+
+
+ + +

Large .form-control height

+
+
+ + +

Small .form-control height

+
+
+ + +
+
+ + +
+
+ + +

Background color for textual input addons

+
+
+ + +

Border color for textual input addons

+
+
+ +

Dropdown menu container and contents.

+
+
+ + +

Background for the dropdown menu.

+
+
+ + +

Dropdown menu border-color.

+
+
+ + +

Dropdown menu border-color for IE8.

+
+
+ + +

Divider color for between dropdown items.

+
+
+ + +

Dropdown link text color.

+
+
+ + +

Hover color for dropdown links.

+
+
+ + +

Hover background for dropdown links.

+
+
+ + +

Active dropdown menu item text color.

+
+
+ + +

Active dropdown menu item background color.

+
+
+ + +

Disabled dropdown menu item background color.

+
+
+ + +

Text color for headers within dropdown menus.

+
+
+ + +
+
+

Media queries breakpoints

+

Define the breakpoints at which your layout will change, adapting to different screen sizes.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Grid system

+

Define your custom responsive grid.

+
+
+ + +

Number of columns in the grid.

+
+
+ + +

Padding between columns. Gets divided in half for the left and right.

+
+
+ + +

Point at which the navbar becomes uncollapsed.

+
+
+ + +

Point at which the navbar begins collapsing.

+
+
+ +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +

+
+
+

Shared nav styles

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Tabs

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Pills

+
+
+ + +
+
+ + +
+
+ + +
+
+

Pagination

+

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Pager

+

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Jumbotron

+

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Form states and alerts

+

Define colors for form feedback states and, by default, alerts.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Tooltips

+

+
+
+ + +

Tooltip max width

+
+
+ + +

Tooltip text color

+
+
+ + +

Tooltip background color

+
+
+ + +
+
+ + +

Tooltip arrow width

+
+
+ + +

Tooltip arrow color

+
+
+

Popovers

+

+
+
+ + +

Popover body background color

+
+
+ + +

Popover maximum width

+
+
+ + +

Popover border color

+
+
+ + +

Popover fallback border color

+
+
+ + +

Popover title background color

+
+
+ + +

Popover arrow width

+
+
+ + +

Popover arrow color

+
+
+ + +

Popover outer arrow width

+
+
+ + +

Popover outer arrow color

+
+
+ + +

Popover outer arrow fallback color

+
+
+

Labels

+

+
+
+ + +

Default label background color

+
+
+ + +

Primary label background color

+
+
+ + +

Success label background color

+
+
+ + +

Info label background color

+
+
+ + +

Warning label background color

+
+
+ + +

Danger label background color

+
+
+ + +

Default label text color

+
+
+ + +

Default text color of a linked label

+
+
+

Modals

+

+
+
+ + +

Padding applied to the modal body

+
+
+ + +

Padding applied to the modal title

+
+
+ + +

Modal title line-height

+
+
+ + +

Background color of modal content area

+
+
+ + +

Modal content border color

+
+
+ + +

Modal content border color <strong>for IE8</strong>

+
+
+ + +

Modal backdrop background color

+
+
+ + +

Modal backdrop opacity

+
+
+ + +

Modal header border color

+
+
+ + +

Modal footer border color

+
+
+ + +
+
+ + +
+
+

Alerts

+

Define alert colors, border radius, and padding.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Progress bars

+

+
+
+ + +

Background color of the whole progress component

+
+
+ + +

Progress bar text color

+
+
+ + +

Default progress bar color

+
+
+ + +

Success progress bar color

+
+
+ + +

Warning progress bar color

+
+
+ + +

Danger progress bar color

+
+
+ + +

Info progress bar color

+
+
+

List group

+

+
+
+ + +

Background color on .list-group-item

+
+
+ + +

.list-group-item border color

+
+
+ + +

List group border radius

+
+
+ + +

Background color of single list elements on hover

+
+
+ + +

Text color of active list elements

+
+
+ + +

Background color of active list elements

+
+
+ + +

Border color of active list elements

+
+
+ + +
+
+ + +
+
+ + +
+
+

Panels

+

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +

Border color for elements within panels

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Thumbnails

+

+
+
+ + +

Padding around the thumbnail image

+
+
+ + +

Thumbnail background color

+
+
+ + +

Thumbnail border color

+
+
+ + +

Thumbnail border radius

+
+
+ + +

Custom text color for thumbnail captions

+
+
+ + +

Padding around the thumbnail caption

+
+
+

Wells

+

+
+
+ + +
+
+ + +
+
+

Badges

+

+
+
+ + +
+
+ + +

Linked badge text color on hover

+
+
+ + +
+
+ + +

Badge text color in active nav link

+
+
+ + +

Badge background color in active nav link

+
+
+ + +
+
+ + +
+
+ +

+
+
+ + +
+
+ + +
+
+ + +

Breadcrumb background color

+
+
+ + +

Breadcrumb text color

+
+
+ + +

Text color of current page in the breadcrumb

+
+
+ + +

Textual separator for between breadcrumb elements

+
+
+ +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Close

+

+
+
+ + +
+
+ + +
+
+ + +
+
+

Code

+

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Type

+

+
+
+ + +

Text muted color

+
+
+ + +

Abbreviations and acronyms border color

+
+
+ + +

Headings small color

+
+
+ + +

Blockquote small color

+
+
+ + +

Blockquote border color

+
+
+ + +

Page header border color

+
+
+

Miscellaneous

+

+
+
+ + +

Horizontal line color.

+
+
+ + +

Horizontal offset for forms and lists.

+
+
+

Container sizes

+

Define the maximum width of .container for different screen sizes.

+
+
+ + +
+
+ + +

For @screen-sm-min and up.

+
+
+ + +
+
+ + +

For @screen-md-min and up.

+
+
+ + +
+
+ + +

For @screen-lg-min and up.

+
+
+ \ No newline at end of file diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 4be2536aa4..072f39b048 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -1161,6 +1161,13 @@ h1[id] { font-weight: normal; } +.bs-customizer-input { + float: left; + width: 33.333333%; + padding-left: 15px; + padding-right: 15px; +} + /* Downloads */ .bs-customize-download .btn-outline { padding: 20px; diff --git a/docs/customize.html b/docs/customize.html index bd095c63ff..3f6987c4b4 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -343,1370 +343,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge

LESS variables

Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.

- -

Basics

- - -

Color system

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

Body scaffolding

-
-
- - -

Background color for <body>.

- - -

Global text color on <body>.

-
-
- - -

Global textual link color

- - -

Link hover color set via darken() function

-
-
- - -

Typography

-
-
-

Generic font variables

- - -

Default sans-serif fonts.

- - -

Default serif fonts.

- - -

Default monospace fonts for <code> and <pre>.

- -

Base type styles

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

Heading font sizes

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

Headings

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

Code blocks

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

Media queries breakpoints

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

Layout and grid system

-
-
- - -

For @screen-sm-min and up.

-
-
- - -

For @screen-md-min and up.

-
-
-
- - -

For @screen-lg-min and up.

-
-
- -
-
- - -

Number of columns in the grid.

-
-
- - -

Padding between columns.

-
-
-
- - -

Point at which the navbar stops collapsing.

-
-
- - -

Components

- -

Padding

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

Rounded corners

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

Component active state

-
-
- - -

Global color for active items (e.g., navs or dropdowns)

-
-
- - -

Global background color for active items (e.g., navs or dropdowns)

-
-
- -

Carets

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

Buttons

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

Default

- - - - - - -

Primary

- - - - - - -

Info

- - - - - - -
-
-

Success

- - - - - - -

Warning

- - - - - - -

Danger

- - - - - - -
-
- - -

Form states and alerts

-
-
-

Success

- - - - - - -

Warning

- - - - - - -
-
-

Danger

- - - - - - -

Info

- - - - - - -
-
- - -

Alerts

- -

Base styles

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

Warning

- - - - - - - -

Success

- - - - - - -
-
-

Danger

- - - - - - - -

Info

- - - - - - -
-
- - -

Navbar

- -

Base styles

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

Default navbar

-

Basics

- - - - - - - -

Links

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

Brand

- - - - - - - -

Toggle

- - - - - - -
- -
-

Inverted navbar

- -

Basics

- - - - - - - -

Links

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

Brand

- - - - - - - -

Toggle

- - - - - - -
-
- - -

Nav

- -

Default nav

-
-
-

Common values

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

Pills

- - - - -
-
-

Tabs

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

Tables

-
-
- - -

Default padding for <th>s and <td>s

- - -

Default padding cells in .table-condensed

-
-
- - -

Default background color used for all tables.

- - -

Background color used for .table-striped.

-
-
- - -

Background color used for .table-hover.

- - -

Border color for table and cell borders.

-
-
- - -

Forms

- -

Inputs

-
-
- - -

Text color for <input>s

- - -

<input> background color

-
-
- - -

<input> border color

- - -

<input> border radius

-
-
- - -

Placeholder text color

-
-
- -

Input states

-
-
- - -

Border color for inputs on focus

-
-
- - -

<input disabled> background color

-
-
- -

Input sizes

-
-
- - -

Default .form-control height

-
-
- - -

Large .form-control height

-
-
- - -

Small .form-control height

-
-
- -

Legend

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

Input groups

-
-
- - -

Background color for textual input addons

-
-
- - -

Border color for textual input addons

-
-
- - -

Dropdowns

-
-
-

Dropdown menu

- - -

Dropdown menu background color

- - -

Dropdown menu border color

- - -

Dropdown menu border color for IE8

- - -

Indicator arrow for showing an element has a dropdown

- - -

Dropdown divider top border color

- - -

Text color for headers within dropdown menus

-
-
-

Dropdown items

- - -

Dropdown text color

- - - -

Hovered dropdown menu entry text color

- - -

Hovered dropdown menu entry background color

- - - -

Active dropdown menu entry text color

- - -

Active dropdown menu entry background color

- - - -

Disabled dropdown menu entry background color

-
-
- - -

Panels and wells

- -

Common panel styles

-
-
- - - - -

Border color for elements within panels

-
-
- - - - -
-
-

Contextual panel colors

-
-
-

Default

- - - - - - - -

Primary

- - - - - - - -

Success

- - - - - - -
-
-

Info

- - - - - - - -

Warning

- - - - - - - -

Danger

- - - - - - -
-
- -

Wells

- - - - - - -

Accordion

- - - - -

Badges

- -

Base styles

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

States

-
-
- - -

Linked badge text color on hover

-
-
- - -

Badge text color in active nav link

-
-
- - -

Badge background color in active nav link

-
-
- - -

Breadcrumbs

-
-
- - -

Breadcrumb text color

- - -

Breadcrumb background color

-
-
- - -

Text color of current page in the breadcrumb

- - -

Textual separator for between breadcrumb elements

-
-
- -

Jumbotron

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

Modals

- -

Base modal

-
-
- - -

Padding applied to the modal body

-
-
- - -

Modal backdrop background color

-
-
- - -

Modal backdrop opacity

-
-
- -

Modal header and footer

-
-
- - -

Padding applied to the modal title

-
-
- - -

Modal title line-height

-
-
- - -

Modal header border color

- - -

Modal footer border color

-
-
- -

Modal content

-
-
- - -

Background color of modal content area

-
-
- - -

Modal content border color

-
-
- - -

Modal content border color for IE8

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

List group

- -

Base styles

-
-
- - -

Background color on .list-group-item

-
-
- - -

.list-group-item border color

-
-
- - -

List group border radius

-
-
- -

Hover and active states

-
-
- - -

Background color of single list elements on hover

-
-
-
-
- - -

Text color of active list elements

-
-
- - -

Background color of active list elements

-
-
- - -

Border color of active list elements

-
-
- - -

Thumbnails

- -

Base thumbnail

-
-
- - -

Padding around the thumbnail image

- - -

Thumbnail background color

-
-
- - -

Thumbnail border color

- - -

Thumbnail border radius

-
-
- -

Thumbnail captions

-
-
- - -

Padding around the thumbnail caption

-
-
- - -

Custom text color for thumbnail captions

-
-
- - -

Progress bars

- -

Shared styles

-
-
- - -

Background color of the whole progress component

-
-
- - -

Info progress bar text color

-
-
- - -

Info progress bar text shadow

-
-
- - -

Default progress bar color

-
-
- -

Contextual states

-
-
- - -

Success progress bar color

- - -

Info progress bar color

-
-
- - -

Warning progress bar color

- - -

Danger progress bar color

-
-
- - -

Pagination

- -

Default styles

-
-
- - -

Background color

-
-
- - -

Border color

-
-
- - -

Background hover color

-
-
- -

Disabled and active states

-
-
- - -

Disabled text color

-
-
- - -

Active background color

-
-
- - -

Active text color

-
-
- - -

Pager

-
-
- - -

Pager border radius

-
-
- - -

Pager disabled state color

-
-
- - -

Labels

-
-
- - -

Default label text color

-
-
- - -

Default text color of a linked label

-
-
- - -

Default label background color

-
-
- -
-
- - -

Primary label background color

- - -

Success label background color

-
-
- - -

Info label background color

- - -

Warning label background color

-
-
- - -

Danger label background color

-
-
- - -

Tooltips and popovers

- -

Tooltip

-
-
- - -

Tooltip text color

- - -

Tooltip background color

-
-
- - -

Tooltip arrow width

- - -

Tooltip arrow color

-
-
- - -

Tooltip max width

-
-
- -

Popovers

- -

Base styles

-
-
- - -

Popover body background color

- - -

Popover maximum width

-
-
- - -

Popover border color

- - -

Popover fallback border color

-
-
- - -

Popover title background color

-
-
- -

Popover arrows

-
-
- - -

Popover arrow width

-
-
- - -

Popover arrow color

-
-
-
-
- - -

Popover outer arrow width

-
-
- - -

Popover outer arrow color

-
-
- - -

Popover outer arrow fallback color

-
-
- - -

Close button

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

Type

-
-
- - -

Text muted color

-
-
- - -

Abbreviations and acronyms border color

-
-
- - -

Headings small color

-
-
- - -

Blockquote small color

-
-
- - -

Blockquote border color

-
-
- - -

Page header border color

-
-
- - -

Other

-
-
- - -

Horizontal line color

-
-
- - -

Horizontal offset for forms and lists

-
-
+ {% include customizer-variables.html %}
diff --git a/docs/customizer-variables.jade b/docs/customizer-variables.jade new file mode 100644 index 0000000000..0d6c83b0f1 --- /dev/null +++ b/docs/customizer-variables.jade @@ -0,0 +1,18 @@ +// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template. +each section in sections + if section.customizable + h2(id=section.id)= section.heading + if section.docstring + p!= section.docstring.html + div.row + each variable in section.variables + div.bs-customizer-input + label(for="input-" + variable.name)= variable.name + input.form-control( + id="input-" + variable.name + type="text" + value=variable.defaultValue + data-var=variable.name) + if variable.docstring + p.help-block!= variable.docstring.html +// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template. diff --git a/docs/grunt/bs-lessdoc-parser.js b/docs/grunt/bs-lessdoc-parser.js new file mode 100644 index 0000000000..8c232d80cc --- /dev/null +++ b/docs/grunt/bs-lessdoc-parser.js @@ -0,0 +1,179 @@ +/* jshint node: true */ + +var markdown = require('markdown').markdown; + +function markdown2html(markdownString) { + // the slice removes the

...

wrapper output by Markdown processor + return markdown.toHTML(markdownString.trim()).slice(3, -4); +} + + +/* +Mini-language: + //== This is a normal heading, which starts a section. Sections group variables together. + //## Optional description for the heading + + //** Optional description for the following variable. You **can** use Markdown in descriptions to discuss `` stuff. + @foo: #ffff; + + //-- This is a heading for a section whose variables shouldn't be customizable + + All other lines are ignored completely. +*/ + + +var CUSTOMIZABLE_HEADING = /^[/]{2}={2}(.*)$/; +var UNCUSTOMIZABLE_HEADING = /^[/]{2}-{2}(.*)$/; +var SECTION_DOCSTRING = /^[/]{2}#{2}(.*)$/; +var VAR_ASSIGNMENT = /^(@[a-zA-Z0-9_-]+):[ ]*([^ ;][^;]+);[ ]*$/; +var VAR_DOCSTRING = /^[/]{2}[*]{2}(.*)$/; + +function Section(heading, customizable) { + this.heading = heading.trim(); + this.id = this.heading.replace(/\s+/g, '-').toLowerCase(); + this.customizable = customizable; + this.docstring = null; + this.variables = []; + this.addVar = function (variable) { + this.variables.push(variable); + }; +} + +function VarDocstring(markdownString) { + this.html = markdown2html(markdownString); +} + +function SectionDocstring(markdownString) { + this.html = markdown2html(markdownString); +} + +function Variable(name, defaultValue) { + this.name = name; + this.defaultValue = defaultValue; + this.docstring = null; +} + +function Tokenizer(fileContent) { + this._lines = fileContent.split('\n'); + this._next = undefined; +} + +Tokenizer.prototype.unshift = function (token) { + if (this._next !== undefined) { + throw new Error('Attempted to unshift twice!'); + } + this._next = token; +}; + +Tokenizer.prototype._shift = function () { + // returning null signals EOF + // returning undefined means the line was ignored + if (this._next !== undefined) { + var result = this._next; + this._next = undefined; + return result; + } + if (this._lines.length <= 0) { + return null; + } + var line = this._lines.shift(); + var match = null; + match = CUSTOMIZABLE_HEADING.exec(line); + if (match !== null) { + return new Section(match[1], true); + } + match = UNCUSTOMIZABLE_HEADING.exec(line); + if (match !== null) { + return new Section(match[1], false); + } + match = SECTION_DOCSTRING.exec(line); + if (match !== null) { + return new SectionDocstring(match[1]); + } + match = VAR_DOCSTRING.exec(line); + if (match !== null) { + return new VarDocstring(match[1]); + } + var commentStart = line.lastIndexOf('//'); + var varLine = (commentStart === -1) ? line : line.slice(0, commentStart); + match = VAR_ASSIGNMENT.exec(varLine); + if (match !== null) { + return new Variable(match[1], match[2]); + } + return undefined; +}; + +Tokenizer.prototype.shift = function () { + while (true) { + var result = this._shift(); + if (result === undefined) { + continue; + } + return result; + } +}; + +function Parser(fileContent) { + this._tokenizer = new Tokenizer(fileContent); +} + +Parser.prototype.parseFile = function () { + var sections = []; + while (true) { + var section = this.parseSection(); + if (section === null) { + if (this._tokenizer.shift() !== null) { + throw new Error('Unexpected unparsed section of file remains!'); + } + return sections; + } + sections.push(section); + } +}; + +Parser.prototype.parseSection = function () { + var section = this._tokenizer.shift(); + if (section === null) { + return null; + } + if (!(section instanceof Section)) { + throw new Error('Expected section heading; got: ' + JSON.stringify(section)); + } + var docstring = this._tokenizer.shift(); + if (docstring instanceof SectionDocstring) { + section.docstring = docstring; + } + else { + this._tokenizer.unshift(docstring); + } + this.parseVars(section); + return section; +}; + +Parser.prototype.parseVars = function (section) { + while (true) { + var variable = this.parseVar(); + if (variable === null) { + return; + } + section.addVar(variable); + } +}; + +Parser.prototype.parseVar = function () { + var docstring = this._tokenizer.shift(); + if (!(docstring instanceof VarDocstring)) { + this._tokenizer.unshift(docstring); + docstring = null; + } + var variable = this._tokenizer.shift(); + if (variable instanceof Variable) { + variable.docstring = docstring; + return variable; + } + this._tokenizer.unshift(variable); + return null; +}; + + +module.exports = Parser; diff --git a/less/variables.less b/less/variables.less index d7e82c1254..244b2309c4 100644 --- a/less/variables.less +++ b/less/variables.less @@ -3,11 +3,9 @@ // -------------------------------------------------- -// Global values -// -------------------------------------------------- - -// Grays -// ------------------------- +//== Colors +// +//## Gray and brand colors for use across Bootstrap. @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @@ -15,32 +13,35 @@ @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee -// Brand colors -// ------------------------- - @brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f; -// Scaffolding -// ------------------------- +//== Scaffolding +// +// ## Settings for some of the most global styles. + +//** Background color for ``. @body-bg: #fff; +//** Global text color on ``. @text-color: @gray-dark; -// Links -// ------------------------- - +//** Global textual link color. @link-color: @brand-primary; +//** Link hover color set via `darken()` function. @link-hover-color: darken(@link-color, 15%); -// Typography -// ------------------------- + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; +//** Default monospace fonts for ``, ``, and `
`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
@@ -55,67 +56,84 @@
 @font-size-h5:            @font-size-base;
 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
+//** Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` × `line-height`) for use with `margin`, `padding`, etc.
 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
+//** By default, this inherits from the ``.
 @headings-font-family:    inherit;
 @headings-font-weight:    500;
 @headings-line-height:    1.1;
 @headings-color:          inherit;
 
 
-// Iconography
-// -------------------------
+//-- Iconography
+//
+//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
 @icon-font-path:          "../fonts/";
 @icon-font-name:          "glyphicons-halflings-regular";
 
 
-// Components
-// -------------------------
-// Based on 14px font-size and 1.428 line-height (~20px to start)
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-@padding-base-vertical:          6px;
-@padding-base-horizontal:        12px;
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
 
-@padding-large-vertical:         10px;
-@padding-large-horizontal:       16px;
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
 
-@padding-small-vertical:         5px;
-@padding-small-horizontal:       10px;
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
 
-@padding-xs-vertical:            1px;
-@padding-xs-horizontal:          5px;
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
 
-@line-height-large:              1.33;
-@line-height-small:              1.5;
+@line-height-large:         1.33;
+@line-height-small:         1.5;
 
-@border-radius-base:             4px;
-@border-radius-large:            6px;
-@border-radius-small:            3px;
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
 
-@component-active-color:         #fff;
-@component-active-bg:            @brand-primary;
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
 
-@caret-width-base:               4px;
-@caret-width-large:              5px;
-
-// Tables
-// -------------------------
-
-@table-cell-padding:                 8px;
-@table-condensed-cell-padding:       5px;
-
-@table-bg:                           transparent; // overall background-color
-@table-bg-accent:                    #f9f9f9; // for striping
-@table-bg-hover:                     #f5f5f5;
-@table-bg-active:                    @table-bg-hover;
-
-@table-border-color:                 #ddd; // table and cell border
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
 
 
-// Buttons
-// -------------------------
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for ``s and ``s.
+@table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding:  5px;
+
+//** Default background color used for all tables.
+@table-bg:                      transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent:               #f9f9f9;
+//** Background color used for `.table-hover`.
+@table-bg-hover:                #f5f5f5;
+@table-bg-active:               @table-bg-hover;
+
+//** Border color for table and cell borders.
+@table-border-color:            #ddd;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
 
 @btn-font-weight:                normal;
 
@@ -146,61 +164,84 @@
 @btn-link-disabled-color:        @gray-light;
 
 
-// Forms
-// -------------------------
+//== Forms
+//
+//##
 
+//** `` background color
 @input-bg:                       #fff;
+//** `` background color
 @input-bg-disabled:              @gray-lighter;
 
+//** Text color for ``s
 @input-color:                    @gray;
+//** `` border color
 @input-border:                   #ccc;
+//** `` border radius
 @input-border-radius:            @border-radius-base;
+//** Border color for inputs on focus
 @input-border-focus:             #66afe9;
 
+//** Placeholder text color
 @input-color-placeholder:        @gray-light;
 
+//** Default `.form-control` height
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
 @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 
 @legend-color:                   @gray-dark;
 @legend-border-color:            #e5e5e5;
 
+//** Background color for textual input addons
 @input-group-addon-bg:           @gray-lighter;
+//** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
 
 
-// Dropdowns
-// -------------------------
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
 
+//** Background for the dropdown menu.
 @dropdown-bg:                    #fff;
+//** Dropdown menu `border-color`.
 @dropdown-border:                rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
 @dropdown-fallback-border:       #ccc;
+//** Divider color for between dropdown items.
 @dropdown-divider-bg:            #e5e5e5;
 
+//** Dropdown link text color.
 @dropdown-link-color:            @gray-dark;
+//** Hover color for dropdown links.
 @dropdown-link-hover-color:      darken(@gray-dark, 5%);
+//** Hover background for dropdown links.
 @dropdown-link-hover-bg:         #f5f5f5;
 
+//** Active dropdown menu item text color.
 @dropdown-link-active-color:     @component-active-color;
+//** Active dropdown menu item background color.
 @dropdown-link-active-bg:        @component-active-bg;
 
+//** Disabled dropdown menu item background color.
 @dropdown-link-disabled-color:   @gray-light;
 
+//** Text color for headers within dropdown menus.
 @dropdown-header-color:          @gray-light;
 
 // Note: Deprecated @dropdown-caret-color as of v3.1
 @dropdown-caret-color:           #000;
 
 
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
 
 @zindex-navbar:            1000;
 @zindex-dropdown:          1000;
@@ -210,8 +251,10 @@
 @zindex-modal-background:  1040;
 @zindex-modal:             1050;
 
-// Media queries breakpoints
-// --------------------------------------------------
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
 // Extra small screen / phone
 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@@ -243,24 +286,24 @@
 @screen-md-max:              (@screen-lg-min - 1);
 
 
-// Grid system
-// --------------------------------------------------
+//== Grid system
+//
+//## Define your custom responsive grid.
 
-// Number of columns in the grid system
+//** Number of columns in the grid.
 @grid-columns:              12;
-// Padding, to be divided by two and applied to the left and right of all columns
+//** Padding between columns. Gets divided in half for the left and right.
 @grid-gutter-width:         30px;
-
 // Navbar collapse
-
-// Point at which the navbar becomes uncollapsed
+//** Point at which the navbar becomes uncollapsed.
 @grid-float-breakpoint:     @screen-sm-min;
-// Point at which the navbar begins collapsing
+//** Point at which the navbar begins collapsing.
 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 
 
-// Navbar
-// -------------------------
+//== Navbar
+//
+//##
 
 // Basics of a navbar
 @navbar-height:                    50px;
@@ -294,7 +337,6 @@
 
 
 // Inverted navbar
-//
 // Reset inverted navbar basics
 @navbar-inverse-color:                      @gray-light;
 @navbar-inverse-bg:                         #222;
@@ -320,9 +362,11 @@
 @navbar-inverse-toggle-border-color:        #333;
 
 
-// Navs
-// -------------------------
+//== Navs
+//
+//##
 
+//== Shared nav styles
 @nav-link-padding:                          10px 15px;
 @nav-link-hover-bg:                         @gray-lighter;
 
@@ -331,7 +375,7 @@
 
 @nav-open-link-hover-color:                 #fff;
 
-// Tabs
+//== Tabs
 @nav-tabs-border-color:                     #ddd;
 
 @nav-tabs-link-hover-border-color:          @gray-lighter;
@@ -343,14 +387,15 @@
 @nav-tabs-justified-link-border-color:            #ddd;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
-// Pills
+//== Pills
 @nav-pills-border-radius:                   @border-radius-base;
 @nav-pills-active-link-hover-bg:            @component-active-bg;
 @nav-pills-active-link-hover-color:         @component-active-color;
 
 
-// Pagination
-// -------------------------
+//== Pagination
+//
+//##
 
 @pagination-color:                     @link-color;
 @pagination-bg:                        #fff;
@@ -369,8 +414,9 @@
 @pagination-disabled-border:           #ddd;
 
 
-// Pager
-// -------------------------
+//== Pager
+//
+//##
 
 @pager-bg:                             @pagination-bg;
 @pager-border:                         @pagination-border;
@@ -384,8 +430,9 @@
 @pager-disabled-color:                 @pagination-disabled-color;
 
 
-// Jumbotron
-// -------------------------
+//== Jumbotron
+//
+//##
 
 @jumbotron-padding:              30px;
 @jumbotron-color:                inherit;
@@ -394,8 +441,9 @@
 @jumbotron-font-size:            ceil((@font-size-base * 1.5));
 
 
-// Form states and alerts
-// -------------------------
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
 
 @state-success-text:             #3c763d;
 @state-success-bg:               #dff0d8;
@@ -414,70 +462,112 @@
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
 
 
-// Tooltips
-// -------------------------
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
 @tooltip-max-width:           200px;
+//** Tooltip text color
 @tooltip-color:               #fff;
+//** Tooltip background color
 @tooltip-bg:                  #000;
 @tooltip-opacity:             .9;
 
+//** Tooltip arrow width
 @tooltip-arrow-width:         5px;
+//** Tooltip arrow color
 @tooltip-arrow-color:         @tooltip-bg;
 
 
-// Popovers
-// -------------------------
+//== Popovers
+//
+//##
+
+//** Popover body background color
 @popover-bg:                          #fff;
+//** Popover maximum width
 @popover-max-width:                   276px;
+//** Popover border color
 @popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
 @popover-fallback-border-color:       #ccc;
 
+//** Popover title background color
 @popover-title-bg:                    darken(@popover-bg, 3%);
 
+//** Popover arrow width
 @popover-arrow-width:                 10px;
+//** Popover arrow color
 @popover-arrow-color:                 #fff;
 
+//** Popover outer arrow width
 @popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
 @popover-arrow-outer-color:           rgba(0,0,0,.25);
+//** Popover outer arrow fallback color
 @popover-arrow-outer-fallback-color:  #999;
 
 
-// Labels
-// -------------------------
+//== Labels
+//
+//##
 
+//** Default label background color
 @label-default-bg:            @gray-light;
+//** Primary label background color
 @label-primary-bg:            @brand-primary;
+//** Success label background color
 @label-success-bg:            @brand-success;
+//** Info label background color
 @label-info-bg:               @brand-info;
+//** Warning label background color
 @label-warning-bg:            @brand-warning;
+//** Danger label background color
 @label-danger-bg:             @brand-danger;
 
+//** Default label text color
 @label-color:                 #fff;
+//** Default text color of a linked label
 @label-link-hover-color:      #fff;
 
 
-// Modals
-// -------------------------
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
 @modal-inner-padding:         20px;
 
+//** Padding applied to the modal title
 @modal-title-padding:         15px;
+//** Modal title line-height
 @modal-title-line-height:     @line-height-base;
 
+//** Background color of modal content area
 @modal-content-bg:                             #fff;
+//** Modal content border color
 @modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color for IE8
 @modal-content-fallback-border-color:          #999;
 
+//** Modal backdrop background color
 @modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
 @modal-backdrop-opacity:      .5;
+//** Modal header border color
 @modal-header-border-color:   #e5e5e5;
+//** Modal footer border color
 @modal-footer-border-color:   @modal-header-border-color;
 
 @modal-lg:                    900px;
 @modal-sm:                    300px;
 
 
-// Alerts
-// -------------------------
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
 @alert-padding:               15px;
 @alert-border-radius:         @border-radius-base;
 @alert-link-font-weight:      bold;
@@ -499,39 +589,61 @@
 @alert-danger-border:         @state-danger-border;
 
 
-// Progress bars
-// -------------------------
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
 @progress-bg:                 #f5f5f5;
+//** Progress bar text color
 @progress-bar-color:          #fff;
 
+//** Default progress bar color
 @progress-bar-bg:             @brand-primary;
+//** Success progress bar color
 @progress-bar-success-bg:     @brand-success;
-@progress-bar-info-bg:        @brand-info;
+//** Warning progress bar color
 @progress-bar-warning-bg:     @brand-warning;
+//** Danger progress bar color
 @progress-bar-danger-bg:      @brand-danger;
+//** Info progress bar color
+@progress-bar-info-bg:        @brand-info;
 
 
-// List group
-// -------------------------
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
 @list-group-bg:                 #fff;
+//** `.list-group-item` border color
 @list-group-border:             #ddd;
+//** List group border radius
 @list-group-border-radius:      @border-radius-base;
 
+//** Background color of single list elements on hover
 @list-group-hover-bg:           #f5f5f5;
+//** Text color of active list elements
 @list-group-active-color:       @component-active-color;
+//** Background color of active list elements
 @list-group-active-bg:          @component-active-bg;
+//** Border color of active list elements
 @list-group-active-border:      @list-group-active-bg;
 @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
 
 @list-group-link-color:         #555;
 @list-group-link-heading-color: #333;
 
-// Panels
-// -------------------------
+
+//== Panels
+//
+//##
+
 @panel-bg:                    #fff;
 @panel-body-padding:          15px;
 @panel-border-radius:         @border-radius-base;
 
+//** Border color for elements within panels
 @panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
@@ -560,30 +672,45 @@
 @panel-danger-heading-bg:     @state-danger-bg;
 
 
-// Thumbnails
-// -------------------------
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
 @thumbnail-padding:           4px;
+//** Thumbnail background color
 @thumbnail-bg:                @body-bg;
+//** Thumbnail border color
 @thumbnail-border:            #ddd;
+//** Thumbnail border radius
 @thumbnail-border-radius:     @border-radius-base;
 
+//** Custom text color for thumbnail captions
 @thumbnail-caption-color:     @text-color;
+//** Padding around the thumbnail caption
 @thumbnail-caption-padding:   9px;
 
 
-// Wells
-// -------------------------
+//== Wells
+//
+//##
+
 @well-bg:                     #f5f5f5;
 @well-border:                 darken(@well-bg, 7%);
 
 
-// Badges
-// -------------------------
+//== Badges
+//
+//##
+
 @badge-color:                 #fff;
+//** Linked badge text color on hover
 @badge-link-hover-color:      #fff;
 @badge-bg:                    @gray-light;
 
+//** Badge text color in active nav link
 @badge-active-color:          @link-color;
+//** Badge background color in active nav link
 @badge-active-bg:             #fff;
 
 @badge-font-weight:           bold;
@@ -591,18 +718,25 @@
 @badge-border-radius:         10px;
 
 
-// Breadcrumbs
-// -------------------------
+//== Breadcrumbs
+//
+//##
+
 @breadcrumb-padding-vertical:   8px;
 @breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
 @breadcrumb-bg:                 #f5f5f5;
+//** Breadcrumb text color
 @breadcrumb-color:              #ccc;
+//** Text color of current page in the breadcrumb
 @breadcrumb-active-color:       @gray-light;
+//** Textual separator for between breadcrumb elements
 @breadcrumb-separator:          "/";
 
 
-// Carousel
-// ------------------------
+//== Carousel
+//
+//##
 
 @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
 
@@ -617,15 +751,19 @@
 @carousel-caption-color:                      #fff;
 
 
-// Close
-// ------------------------
+//== Close
+//
+//##
+
 @close-font-weight:           bold;
 @close-color:                 #000;
 @close-text-shadow:           0 1px 0 #fff;
 
 
-// Code
-// ------------------------
+//== Code
+//
+//##
+
 @code-color:                  #c7254e;
 @code-bg:                     #f9f2f4;
 
@@ -637,36 +775,51 @@
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
-// Type
-// ------------------------
+
+//== Type
+//
+//##
+
+//** Text muted color
 @text-muted:                  @gray-light;
+//** Abbreviations and acronyms border color
 @abbr-border-color:           @gray-light;
+//** Headings small color
 @headings-small-color:        @gray-light;
+//** Blockquote small color
 @blockquote-small-color:      @gray-light;
+//** Blockquote border color
 @blockquote-border-color:     @gray-lighter;
+//** Page header border color
 @page-header-border-color:    @gray-lighter;
 
-// Miscellaneous
-// -------------------------
 
-// Hr border color
+//== Miscellaneous
+//
+//##
+
+//** Horizontal line color.
 @hr-border:                   @gray-lighter;
 
-// Horizontal forms & lists
+//** Horizontal offset for forms and lists.
 @component-offset-horizontal: 180px;
 
 
-// Container sizes
-// --------------------------------------------------
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / tablet
 @container-tablet:             ((720px + @grid-gutter-width));
+//** For `@screen-sm-min` and up.
 @container-sm:                 @container-tablet;
 
 // Medium screen / desktop
 @container-desktop:            ((940px + @grid-gutter-width));
+//** For `@screen-md-min` and up.
 @container-md:                 @container-desktop;
 
 // Large screen / wide desktop
 @container-large-desktop:      ((1140px + @grid-gutter-width));
+//** For `@screen-lg-min` and up.
 @container-lg:                 @container-large-desktop;
diff --git a/package.json b/package.json
index 2c45196567..fdf16c4d4c 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "grunt-contrib-connect": "~0.6.0",
     "grunt-contrib-copy": "~0.5.0",
     "grunt-contrib-csslint": "~0.2.0",
+    "grunt-contrib-jade": "~0.8.0",
     "grunt-contrib-jshint": "~0.8.0",
     "grunt-contrib-less": "~0.9.0",
     "grunt-contrib-qunit": "~0.3.0",
@@ -44,7 +45,8 @@
     "grunt-jscs-checker": "~0.3.0",
     "grunt-saucelabs": "~4.1.2",
     "grunt-sed": "~0.1.1",
-    "load-grunt-tasks": "~0.2.1"
+    "load-grunt-tasks": "~0.2.1",
+    "markdown": "~0.5.0"
   },
   "jspm": {
     "main": "js/bootstrap",