Upcoming 3.0 changes

While our last major version bump (2.0) was a complete rewrite of the docs, CSS, and JavaScript, the move to 3.0 is not quite as ambitious. This is an ongoing document to identify the changes we'll be making along the way.

Note: ❑ indicates incomplete tasks.

Docs

• Removed all i18n tags from Mustache templates. No more {{_i}} and {{/i}} in the docs templates, just raw HTML.
• Consolidated the Scaffolding and Base CSS pages into a new CSS page. Helps simplify where to find CSS-related things and removes a bunch of overhead in the docs.
• ❑ Add full gallery showcase page to expand on homepage highlights.
• ❑ Add variables to dictate page titles for docs pages (rather than abstract from file name). Would improve capitalization, enable more accurate titles, etc.

Global CSS

• Dropped support for IE7. Removed all * hacks, such as *zoom: 1;, and other IE7-specific lines of CSS.
• Dropped support for Firefox 3.6. Removed -moz-box-shadow instances and button inner padding hacks.
• All variables now use dashes instead of camelCase. For example, it's now @body-background instead of @bodyBackground.
• Responsive CSS is no longer separate. All responsive features are now compiled into the core bootstrap.css file. Separate files are no longer required, and have thus been removed.
• Removed all color variables (e.g., @blue, @orange, etc). New, more meaningful variables are on their way (such as @state-warning-text).
• Removed .border-radius() and .border-*-*-radius mixins. As only Android 2.1, iOS 3.2, and older desktop browsers require a prefixed version, we've removed the base mixin. Since we no longer require prefixes for independent corners, we've dropped those mixins as well. Mixins for a single side, however, are still in use.
• Removed layouts.less. Since it only held styles .container and .container-fluid, and the fluid container has been removed (see next section), we move the default .container styles to grid.less.
• ❑ Standardize use of .*-important and .*-danger classes. Includes buttons, labels, badges, text, alerts. and progress bars.
• ❑ Update clearfix docs to reflect CSS changes.

Layout and grid system

• Dropped all things fluid. We removed the fluid grid system, fluid container, and fluid layout.
• Overhauled default grid system. Now uses percentage widths, padding, and box-sizing: border-box instead of pixel widths and margins. Nesting and offsets remain the same.
• Removed dedicated table grid system classes.
• .container now uses max-width instead of width. Helps resolve some issues with containers in components like navbars.

Type

• Dropped the @altFontFamily variable.

Forms

• Updated box modal for inputs. Switched to box-sizing: border-box; and width: 100%; by default for all textual inputs. This means you'll need to specify a size for inputs, whereas before 3.0 inputs had a set width (around 220px) to start.
• Deprecated .input-prepend and .input-append for .input-group.
• ❑ Finish implementing new input groups with segmented button dropdowns.
• ❑ Separate single button dropdowns from segmented button dropdowns with unique classes.
• ❑ Rename button group to segmented controller.
• ❑ Allow form field states to apply to individual inputs.

Icons

• Converted to Glyphicons v1.7 @font-face, dropping the old PNGs.

Buttons and button groups

• ❑ Refactor to allow dropdowns within button groups
• ❑ Separate classes for regular button dropdown and segmented button dropdown

Labels and badges

• ❑ Consolidate down to a single component with a modifier.

Hero unit

• ❑ Convert class to .jumbotron.

Navigation

• Removed the .nav-list option to simplify nav offerings.
• ❑ Instead, .nav-stacked will be a modifier class for tabs and pills to achieve virtually the same component.
• ❑ Improve collapsed navbar behavior for better handling of dropdowns and other content.

Thumbnails

• Dropped the .thumbnails meta component. Instead of special HTML and CSS for grid sizing, just use the grid system itself.
• Individual .thumbnail styles are still available, but for sizing, require a parent with a set width (e.g., grid columns).

Modals

We might punt this to a 3.1 release, but I want to record this here for a heads up to keep momentum going after 3.0.

• ❑ Realigned aesthetics
• ❑ No more inner modal scrolling. Instead, modals will grow to house their content and the page scroll to house the modal.
• ❑ Maybe: Three size options (normal, large, and small).
• ❑ Maybe: Improved vertical and horizontal positioning.

---

What's being punted

• Redesigned carousel. Should ideally include new next/prev controls, vertical option, and indicators.