Code Review

Learning from Bootstrap 3

Reset script

Different browsers have different default style. To make the user experience consistent among browsers, we have CSS reset script or normalize script. In Bootstrap 3, normalize.less reset the CSS.

HTML accessibility

Web page today have rich UI element. But for blind people, they use screen reader to read the page. They cannot understand image and icon. Bootstrap 3 provide .sr-only and .sr-only-focusable to show content to screen reader without affecting the visual content. .sr-only-focusable appears after the element focused by pressing the ‘tab’ key. Beside the Bootstrap 3 mixin, there are html attribute like aria-label for accessibility.

LESS function

In LESS, class and mixin share the same syntax. To hide the a mixin, we can add an empty parenthesis after the mixin, like .mixin(). This may create some code like .mixin { .mixin() }. It looks redundant, but it is good in design, as the interface and implementation are separated.

touch-action

There is a CSS property named touch-action, which can specify the behavior. I cannot understand the description on MDN, and I think this video can help.

Spacing the items inside a menu

It is common to have a list of items in web. The html may looks like:

1
2
3
4
5
<div class="menu">
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

We usually want space between menu and items, also space among items. I implemented the LESS like

1
2
3
4
5
6
.menu-item {
  margin-bottom: 20px;
  &:first {
    margin-top: 20px;
  }
}

Bootstrap 3 introduce another implementation to me:

1
2
3
4
5
6
7
.menu {
  padding-top: 20px;
  padding-bottom: 20px;
  .menu-item + .menu-item {
    margin-top: 20px;
  }
}

I think this implementation is clearer, the padding of menu give space to the start and the end of menu. The .menu-item + .menu-item part gives space between the menu items.

Component animation

The class is well designed. For the fade in animation, .fade need to be added. The animation start when .in is added. The written code is very elegant, but the implementation may not be very trivial. We can refer to this file.

Bootstrap 3 only have fade in this pure CSS animation. Other component animation is implemented by both CSS and javascript. Need to read the javascript code to understand how to create animation.

Technique to remove double border

It is common to have button with border. But when there is a list of buttons, the two borders stick together and become a think border. It looks weird. We can remove the border for adjacent button, like .btn + .btn { border-left: 0 }. But Bootstrap 3 have another implementation, we can shift the border by 1 pixel to make the border overlap. This method works when the border color is not transparent. If the border color have alpha value, the border between buttons will have a deeper color.

Component content and component part

The dismissible alerts is a good example on implementation CSS component.

The html of dismissible like:

1
2
3
4
5
6
<div class="alert alert-warning alert-dismissible">
  <button class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
  </button>
  Warning! Better check yourself, you're not looking too good.
</div>

It makes sense that considering all elements inside are children elements. But in .alert, the .close button is not the content of .alert, but part of it. Bootstrap 3 move the .close button from the ‘content’ to the ‘.alert div’. .alert-dismissible add padding-right into the .alert div. The .close button is moved to the padding-right by right: -21px, so the close button do not affect the content.

I am wondering why not using margin-right: -21px. One of the reason using right is keeping the ‘size’ of DOM.