Как настроить дизайн Twitter Bootstrap в приложении Rails

 @import 'twitter/bootstrap';

body {
  padding-top: 60px;
}

@black: #200;

«# 200» относится к цвету, который не совсем черный, но имеет немного красного; помните «RGB» = «красный-зеленый-синий». Теперь мой сайт выглядит так:

переменная @black изменена на красный

Переменных недостаточно!

К сожалению, в файле variables.less просто не хватает настраиваемых настроек — кроме linkColor, единственные другие настройки, связанные с размером шрифта, цветами и размерами сетки. И как вы можете видеть на снимке экрана выше, настройки цвета на самом деле даже не работают должным образом, так как многие файлы кода Twitter Less напрямую ссылаются на жестко заданные значения цвета: здесь панель навигации по-прежнему черная, хотя я изменил значение «черного» на более красное. Кроме того, очень странно менять значение «черной» переменной на оттенок красного, во-первых, очень странно!

К сожалению, единственный хороший способ настроить дизайн Bootstrap в Twitter — это внимательно посмотреть на HTML, который вы используете на своем сайте, определить, где определены стили, которые вы на самом деле используете, а затем переопределить код Sass или Less по мере необходимости.

Давайте рассмотрим пример: предположим, мой дизайнер или я решили сделать кнопку «Создать оригами» красным, а не синим. Единственный эффективный способ сделать это — сначала использовать команду Chrome «Inspect Element» (или аналогичную команду из вашего любимого браузера) следующим образом:

Chrome Inspect-> Элемент правой кнопкой мыши пункт меню

… А затем найдите стиль CSS элемента:

Поиск стиля в окне инструментов разработчика Chrome

Здесь я вижу, что синий цвет фона кнопки задается классом «btn.primary». Поиск по коду Less внутри Less-Rails-Bootstrap для этого определения:

 $ cd `bundle show less-rails-bootstrap`
$ cd vendor/frameworks/twitter/bootstrap
$ ack btn
patterns.less
512:.btn,
545:// Base .btn styles
546:.btn {
619::root .btn {
624:button.btn,
625:input[type=submit].btn {
697:  .btn {
871:  .btn {

… Я вижу, что стили, связанные с кнопками, определены в patterns.less. Просматривая файл, я нахожу основной код стиля кнопки:

 // Base .btn styles
.btn {
  // Button Base
  cursor: pointer;
  display: inline-block;

... etc ...

  // Primary Button Type
  &.primary {
    color: @white;
    .gradientBar(@blue, @blueDark)
  }

... etc...

}

Здесь вы можете увидеть, как определяется основная кнопка: используя белый цвет шрифта и градиентный синий фон («синий» -> «синийДарк»). И вы также можете видеть, что синее значение жестко запрограммировано в файле patterns.less — в variables.less нет переменной с именем «$ primaryButtonColor» или чего-то подобного, хотя есть комментарий, указывающий, что эта переменная может быть добавлена ​​в ближайшее время.

Чтобы вместо этого поменять кнопки формы на красный, нам нужно скопировать / вставить этот код Less в файл Less нашего приложения (origami_hub.css.less) и внести необходимые изменения:

 @import 'twitter/bootstrap';

body {
  padding-top: 60px;
}

// Custom colors:
@black:   #200;
@redDark: darken(@red, 5);
@linkColor: @redDark;
@titleColor: lighten(@red, 10);

// Copied from vendor/frameworks/twitter/bootstrap/patterns.less in less-rails-bootstrap
.btn {

  // Primary Button Type
  &.primary {
    color: @white;
    .gradientBar(@red, @redDark)
  }
}

.topbar {
  // Hover and active states
  ul .active > a {
    color: @titleColor;
  }

  a {
    color: @titleColor;
  }

  // Website name
  .brand {
    color: @titleColor;
  }
}

Здесь я определил пару новых оттенков красного и использовал их, чтобы переопределить несколько других определений стилей, связанных с текстом панели навигации, наряду со стилем основной кнопки, что привело к более красной версии моего сайта:

OrigamiHub с настроенной версией дизайна Twitter Bootstrap

Вывод

Это кажется большой работой, чтобы изменить что-то с синего на красный! Зачем беспокоиться? Или почему бы просто не отказаться от Twitter Bootstrap и начать все с нуля?

Причина очевидна: если вы в течение нескольких минут просматриваете файлы кода Twitter Bootstrap Less или Sass в одном из упомянутых здесь драгоценных камней, вы увидите огромное количество полезных стилей и функций. Вот несколько примеров:

• reset.less — содержит стили сброса для создания чистой межбраузерной основы для использования на основе работы Эрика Мейера с 2007 года .
• mixins.less — содержит ряд полезных функций, которые могут быть использованы другими стилями.
• type.less — полезные типографские утилиты.
• и т.д … и т.д …

И это только начало; Есть ряд функций Twitter Bootstrap, о которых я даже не упомянул. Плюс новая версия Twitter Bootstrap, v2.0, находится в стадии разработки и скоро добавит еще больше файлов кода Less / Sass и CSS-функции в список.

Мне нравится думать о Twitter Bootstrap, что это платформа для кодирования CSS. Точно так же, как Rails делает создание веб-сайта намного проще за счет реализации обычно необходимой функциональности, которая нужна всем веб-сайтам, Twitter Bootstrap в гораздо меньшем масштабе реализует многие стилевые функции, которые понадобятся любому веб-сайту. Проблема в том, что для его эффективного использования вам действительно нужно время, чтобы узнать, как работает код Less или переведенный Sass, поскольку в нем много жестко закодированных деталей проекта. Чтобы использовать его с собственным уникальным дизайном, который вы или создатель, с которым вы работаете, написали, вам потребуется вручную скопировать, вставить и настроить части Twitter Bootstrap, которые вы хотите изменить. Надеемся, что этот процесс станет проще в будущих версиях, так как они добавят больше переменных и других способов настройки своего дизайна!