Coming up in Bootstrap

We’ve been mum on the next few releases for Bootstrap the last couple weeks, and with good reason: both Jacob and I have been super busy at work and we’re uncertain of what features to add next. That said, we know we have some bugs and docs fixes to make and know we can slip in a few small features if time allows. I’ve updated the roadmap to reflect the last two releases and a general outline for the next two.

But, what’s next?

2.0.3

To start, we’ll take a good hard look at the docs and current components to get a strong base and iron out additional bugs we introduced in 2.0.2. This release will not include any new features at all. Key bugs to fix include the static navbar regression and tabbed content alignment, but you can see a more thorough list on the 2.0.3 milestone.

2.1.0

After 2.0.3, we have a small feature and (as required) bugfix release to push out. So far, the only features we’re planning on adding include an official addition of the subnav, Growl-style notifications, and an OOCSS-style media component. The first two are some of oldest feature requests, and honestly are fairly easy to add and document compared to some of the other requests.

We haven’t slated anything else because of other time commitments, but we’re open to hearing your feedback if you have top requests. Feel free to weigh in on Twitter or on GitHub.

Timing

We don’t have specific dates in mind, but we know we want 2.0.3 out by the end of the month to address those key bugs. 2.1 will follow, but not for at least a month or two after 2.0.3.

Combining badges.less and labels.less in 2.0.3

For one reason or another, in 2.0.2 we made badges have separate LESS files. The CSS is 95% the same, but we knew that some folks might need one or the other, or even both. With 2.0.3, we’ll be simplifying some of those styles into a single .less file and scoping the :hover state to anchors only.

Moving forward, we’ll have the following as a shared set of base styles. As you can see, when combined, there isn’t much extra weight at all for those who want just badges or labels.

.label,
.badge {
  font-size: @baseFontSize * .846;
  font-weight: bold;
  line-height: 13px; // ensure proper line-height if floated
  color: @white;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  background-color: @grayLight;
}

One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.

On a related note, we’ve changed how we handle hover states for badges and labels. Instead of having a default hover state on an inherently static element, one made with say a span, we relegate the hover state (a cursor and background change) to anchors only.

a {
  &.label:hover,
  &.badge:hover {
    color: @white;
    text-decoration: none;
    cursor: pointer;
  }
}

For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an href attribute).