From 52a348aa3f5e06e6429f386002f653dac7a35a99 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Thu, 23 May 2013 02:30:58 +0200 Subject: [PATCH] Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis. --- docs/_includes/nav-customize.html | 37 + docs/_layouts/default.html | 2 + docs/assets/css/docs.css | 23 + docs/customize.html | 1496 ++++++++++++++++++++++------- 4 files changed, 1213 insertions(+), 345 deletions(-) create mode 100644 docs/_includes/nav-customize.html diff --git a/docs/_includes/nav-customize.html b/docs/_includes/nav-customize.html new file mode 100644 index 0000000000..5a869659f6 --- /dev/null +++ b/docs/_includes/nav-customize.html @@ -0,0 +1,37 @@ +
  • + LESS components + +
    • +
  • + jQuery plugins +
    • +
  • + LESS variables + +
    • +
  • + Download +
    • \ No newline at end of file diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 638b5485e9..d7d49e1b61 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -31,6 +31,8 @@ {% include nav-components.html %} {% elsif page.slug == "js" %} {% include nav-javascript.html %} + {% elsif page.slug == "customize" %} + {% include nav-customize.html %} {% endif %} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9221cac1bd..ddab6ba6a9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -94,6 +94,29 @@ body { +/* Customize and Download button +-------------------------------------------------- */ + +.bs-customize-download { + text-align:center; +} +.bs-customize-download .btn { + margin-top: 5px; + margin-bottom: 5px; + padding: 18px 24px; + font-size: 21px; + color: #b94a48; + background-color: #fff; + border-color: #b94a48; +} +.bs-customize-download .btn:hover, +.bs-customize-download .btn:active { + color: #fff; + background-color: #b94a48; +} + + + /* Docs pages and sections -------------------------------------------------- */ diff --git a/docs/customize.html b/docs/customize.html index 32a00b441e..6a703e47f7 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -1,354 +1,1160 @@ --- -layout: customize +layout: default title: Customize and download slug: customize +lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version. --- -
    - -
    - - - -
    -
    -
    - Toggle all -

    - 1. Choose components -

    + + +
    +
    + Toggle all +

    LESS components

    +
    +

    Choose which LESS files should be compiled into your custom stylesheets.

    +
    +

    Read the documentation

    +

    Make an informed choice by first reading about CSS and Components in the docs.

    +
    +

    The basics

    +
    +
    +

    Layout

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

    Utility classes

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

    Standard element styles

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

    Bootstrap features

    +
    +
    +

    Navigation

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

    Additional information

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

    Content blocks

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

    Media

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

    Other

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    -
    -
    -

    Scaffolding

    - - - - - -

    Base CSS

    - - - - - - - -
    -
    -

    Components

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

    JS Components

    - - - - - - -
    -
    -

    Miscellaneous

    - - - - -

    Responsive

    - - - - - -
    -
    -
    - -
    -
    - Toggle all -

    - 2. Select jQuery plugins -

    + +
    +
    + Toggle all +

    jQuery plugins

    +
    +

    Choose which jQuery plugins should be included in your custom JavaScript files.

    +
    +

    Read the documentation

    +

    Make an informed choice by first reading about JavaScript in the docs.

    +
    +
    +
    +

    Linked to components

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

    Magic

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

    Heads up!

    +

    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

    +
    -
    -
    - - - - - - - -
    -
    - - - - - - -
    -
    -

    Heads up!

    -

    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

    -
    -
    -
    - - -
    -
    - Reset to defaults -

    - 3. Customize variables -

    + + +
    +
    + Reset to defaults +

    LESS variables

    +
    +

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

    +

    The basics

    +

    Body background

    + + +

    Background color applied to <body>.

    +

    Typography

    +
    +
    + + +

    Default sans-serif fonts. Used almost anywhere in Bootstrap.

    + + +

    Default serif fonts.

    +
    +
    + + +

    Default monospace fonts. Most prominently used for <code> and <pre>.

    + + +
    +
    +
    +
    + + +

    Will be used to calculate font sizes throughout Bootstrap.

    + + +

    Will be used to calculate line heights throughout Bootstrap. Default is ˜14/20.

    +
    +
    + + +

    Choose a separate font weight for headings.

    + + +

    Choose a separate line height for headings.

    +
    +
    +

    Colors

    +
    +
    +

    Define custom colors used in several contexts.

    + + +

    Used for primary buttons, panels and more.

    + + +

    Used to indicate success.

    + + +

    Used to indicate a warning.

    + + +

    Used to indicate danger.

    + + +

    Used to indicate informational content.

    +
    +
    +

    Define your preferred colors for standard text and links.

    + + +

    Color for all standard text.

    + + +

    Link color for links in standard text.

    + + +

    Hovered link color. Leave this blank to compute using @link-color.

    +
    +
    +

    Media queries breakpoints

    +

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

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

    The grid

    +

    Define your custom responsive grid.

    +
    +
    + + +

    Number of columns in the grid.

    + + +

    Padding between columns.

    +
    +
    + + +

    Point at which the navbar stops collapsing.

    +
    +
    +

    Components

    +

    Define common padding and border radius sizes and more.

    +
    +
    +

    Padding

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

    Border radius sizes

    + + + + + + +
    +
    +

    Active background color

    + + +

    Used for active or hovered items in places like navs or dropdowns.

    +

    Buttons

    +

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

    +
    +
    +

    Default

    + + + + + + +

    Primary

    + + + + + + +

    Info

    + + + + + + +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +

    Danger

    + + + + + + +
    +
    +

    Form states and alerts

    +

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

    +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +
    +
    +

    Danger

    + + + + + + +

    Info

    + + + + + + +
    +
    +

    Alerts

    +

    Define alert colors and border radius.

    +

    Border radius

    + + +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +
    +
    +

    Danger

    + + + + + + +

    Info

    + + + + + + +
    +
    +

    Navbar

    +
    +
    +

    The basics

    + + + + + + +

    Links

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

    Brand

    + + + + + + +
    +
    +

    Inverted variation

    +

    The basics

    + + + + +

    Links

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

    Brand

    + + + + + + +
    +
    +

    Tables

    +
    +
    + + +

    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

    +
    +
    +

    Background

    + + +

    <input> background color

    + + +

    <input disabled>background color

    +
    +
    +

    Border

    + + +

    <input> border color

    + + +

    <input>border radius

    +
    +
    + + +

    Placeholder text color

    +

    Dropdowns

    +
    +
    +

    Background

    + + +

    Dropdown menu background color

    + + +

    Active dropdown menu entry background color

    + + +

    Hovered dropdown menu entry background color

    +
    +
    +

    Colors

    + + +

    Dropdown text color

    + + +

    Active dropdown menu entry text color

    + + +

    Hovered dropdown menu entry text color

    +
    +
    +

    Dividers

    +
    +
    + + +

    Dropdown divider top border color

    +
    +
    + + +

    Dropdown divider bottom border color

    +
    +
    +

    Panels and wells

    +

    Panel background

    +
    +
    + + +

    Panel body background color

    +
    +
    + + +

    Panel heading background color

    +
    +
    + + +

    Panel footer background color

    +
    +
    +

    Panel border

    +
    +
    + + +

    Panel border color

    +
    +
    + + +

    Panel border radius

    +
    +
    +

    Contextual panel colors

    +
    +
    + + +

    Primary text color

    +
    +
    + + +

    Primary border color

    +
    +
    + + +

    Primary heading background color

    +
    +
    +
    +
    + + +

    Success text color

    +
    +
    + + +

    Success border color

    +
    +
    + + +

    Success heading background color

    +
    +
    +
    +
    + + +

    Warning text color

    +
    +
    + + +

    Warning border color

    +
    +
    + + +

    Warning heading background color

    +
    +
    +
    +
    + + +

    Danger text color

    +
    +
    + + +

    Danger border color

    +
    +
    + + +

    Danger heading background color

    +
    +
    +
    +
    + + +

    Info text color

    +
    +
    + + +

    Info border color

    +
    +
    + + +

    Info heading background color

    +
    +
    +

    Well background

    + + +

    Jumbotron

    +
    +
    + + +

    Jumbotron background color

    +
    +
    + + +

    Jumbotron heading color

    +
    +
    + + +

    Jumbotron lead paragraph color

    +
    +
    +

    Modals

    +
    +
    + + +

    Padding applied to the modal body

    +
    +
    + + +

    Padding applied to the modal title

    +
    +
    + + +

    Modal title line-height

    +
    +
    +

    List group

    +

    Background

    +
    +
    + + +

    Default background color

    +
    +
    + + +

    Background color of single list elements on hover

    +
    +
    + + +

    Background color of active list elements

    +
    +
    +

    Borders

    +
    +
    + + +

    Default border color

    +
    +
    + + +

    List group border radius

    +
    +
    + + +

    Border color of active list elements

    +
    +
    + + +

    Text color of active list elements

    +

    Thumbnails

    +
    +
    + + +

    Custom text color for thumbnail captions

    + + +

    Thumbnail background color

    +
    +
    + + +

    Thumbnail border color

    + + +

    Thumbnail border radius

    +
    +
    +

    Progress bars

    +
    +
    + + +

    Background color of the whole progress component

    +
    +
    + + +

    Default progress bar color

    +
    +
    + + +

    Success progress bar color

    +
    +
    +
    +
    + + +

    Warning progress bar color

    +
    +
    + + +

    Danger progress bar color

    +
    +
    + + +

    Info progress bar color

    +
    +
    +

    Pagination

    +
    +
    + + +

    Background color

    +
    +
    + + +

    Border color

    +
    +
    + + +

    Active background color

    +
    +
    +

    Labels

    +
    +
    + + +

    Success label background color

    + + +

    Info label background color

    +
    +
    + + +

    Warning label background color

    + + +

    Danger label background color

    +
    +
    +

    Tooltips and popovers

    +

    Tooltip styles

    +
    +
    + + +

    Tooltip text color

    + + +

    Tooltip background color

    +
    +
    + + +

    Tooltip arrow width

    + + +

    Tooltip arrow color

    +
    +
    +

    Popover styles

    +
    +
    + + +

    Popover body background color

    + + +

    Popover title background color

    +
    +
    + + +

    Popover arrow width

    + + +

    Popover arrow color

    +
    +
    +
    +
    + + +

    Popover outer arrow width

    +
    +
    + + +

    Popover outer arrow color

    +
    +
    +

    Other

    +
    +
    + + +

    Horizontal line color

    +
    +
    + + +

    Horizontal offset for forms and lists

    +
    +
    -
    -
    -

    Scaffolding

    - - - - -

    Links

    - - - - - -

    Grid system

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

    Typography

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

    Tables

    - - - - - - - - - -

    Forms

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

    Form states & alerts

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

    Navbar

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

    Dropdowns

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

    - 4. Download -

    -
    -
    - Customize and Download -

    What's included?

    -

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    -
    -
    -
    +
    +
    +

    Download

    +
    +

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

    +
    + Customize and Download +
    +
    +

    What's included?

    +

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    +
    +
    +