Взлёт Bootstrap (2011): как фреймворк Twitter стандартизировал UI веба

Команда дизайна Twitter создала Bootstrap для решения конкретной проблемы: каждый внутренний инструмент в Twitter выглядел по-разному. Разные команды имели разные CSS-конвенции, разные стили кнопок, разные дизайны форм.

Марк Отто и Якоб Торнтон опубликовали его на GitHub в августе 2011. К январю 2012 это был самый популярный проект на GitHub по звёздам. К 2013 году по оценкам он работал на 1-2% всех сайтов.

Мы приняли Bootstrap 1.x в конце 2011 для внутренних инструментов. К середине 2012 использовали его как стартовую точку по умолчанию. К 2013 почти каждый наш проект начинался на Bootstrap.

---

Что Bootstrap реально предоставлял

1. 12-колоночная сетка:

<div class="container">
  <div class="row">
    <div class="span4">Сайдбар</div>
    <div class="span8">Основной контент</div>
  </div>
  <div class="row">
    <div class="span4">Колонка 1</div>
    <div class="span4">Колонка 2</div>
    <div class="span4">Колонка 3</div>
  </div>
</div>

2. Стилизованные UI-компоненты:

<button class="btn">Обычная</button>
<button class="btn btn-primary">Основная</button>
<button class="btn btn-danger">Удалить</button>

<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  Успешно сохранено!
</div>

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <a class="brand" href="/">Aunimeda</a>
    <ul class="nav">
      <li class="active"><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
    </ul>
  </div>
</div>

3. Наш первый Bootstrap admin-дашборд (декабрь 2011):

<div class="container" style="margin-top: 60px;">
  <div class="row">
    <div class="span3">
      <div class="well">
        <h2>1 247</h2>
        <p class="muted">Всего заказов</p>
      </div>
    </div>
    <div class="span3">
      <div class="well">
        <h2>48 320 сом</h2>
        <p class="muted">Выручка</p>
      </div>
    </div>
  </div>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr><th>#</th><th>Клиент</th><th>Сумма</th><th>Статус</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>1024</td><td>Иван Иванов</td><td>3 200 сом</td>
        <td><span class="label label-success">Отправлен</span></td>
      </tr>
    </tbody>
  </table>
</div>

Этот дашборд занял 45 минут первой рабочей версии. До Bootstrap аналогичная стилизация занимала 3-4 часа.

---

Обратная сторона: Bootstrap-веб

К 2013 году появился узнаваемый «Bootstrap-стиль». Стандартная синяя основная кнопка, серый nav, специфический радиус скругления, контейнер well. Каждый MVP стартапа выглядел одинаково.

Серьёзнее: разработчики перестали думать о CSS. Bootstrap был настолько полным, что можно было строить целые проекты без написания ни одного значимого CSS-правила. Когда умолчания Bootstrap не совсем подходили, разработчики добавляли хаки с !important:

/* «Файл стыда» - в каждом Bootstrap-проекте он был */
.btn-primary {
  background-color: #ff6600 !important; /* Перебиваем синий Bootstrap */
}
.navbar { height: 80px !important; }
.navbar .navbar-brand { line-height: 80px !important; } /* И каскад фиксов после */

Решение - использовать переменные LESS/SASS Bootstrap для кастомизации в источнике:

// _variables.scss - кастомизируем Bootstrap до компиляции
$brand-primary: #ff6600;
$navbar-height: 80px;
$btn-border-radius-base: 4px;

@import "bootstrap";

---

Истинное наследие Bootstrap

Bootstrap доказал, что общие библиотеки компонентов лучше, чем изобретение колеса в каждом проекте. Он создал ожидание, что CSS-фреймворки должны быть адаптивными по умолчанию. Он популяризировал модификаторные классы (.btn.btn-primary) как архитектурный паттерн.

Единообразный вид раннего 2010-х веба был ценой за значительно более низкое трение разработки. Для проектов, где был важен уникальный дизайн - реальная стоимость. Для внутренних инструментов, MVP и клиентов, которым нужно было работающее ПО быстрее красивого - Bootstrap был именно правильным.