Как сделать Bootstrap 3 Theme правильным способом

С выпуском Bootstrap 3 мы познакомились с актуальными темами, реализованными командой Bootstrap. В настоящее время их три. Один неофициальный, а другие являются «примерами», которые должны проложить путь. Старое соглашение заключалось в том, чтобы копаться в bootstrap.less, vars.less и других таблицах стилей в основной кодовой базе для настройки переменных, изменения CSS в соответствии с тем, как мы хотим, чтобы он выглядел, и продолжения. Интересно то, что две новые темы Bootstrap поощряют использование другого метода, который помогает сохранять Bootstrap в качестве зависимости (что означает, что к нему нельзя напрямую прикасаться), а не в качестве исходной кодовой базы.

Давайте переписать

Вместо прямого изменения bootstrap.css новое соглашение заключается в создании новой таблицы стилей, которая будет включена на страницу после загрузки исходной библиотеки. Вы можете увидеть, что это выполнено не только на собственном сайте начальной загрузки, но также и на примере не отвечающей темы, а также на теме «2.3.2-esque». Эти две темы напрямую переопределяют первоначальный вид Bootstrap, не затрагивая сам Bootstrap. Это новый, современный способ ведения дел. Это похоже на использование хуков в WordPress вместо того, чтобы возиться с ядром.

Вот как Bootstrap выполняет эту задачу с помощью темы 2.3.2:

Сначала обратите внимание, что основные различия в стиле сводятся к градиентам и теням, придающим кнопкам и панели навигации ощущение «пластики». Вы можете проверить единый код в целом на GitHub. Давайте возьмем кнопки, например:

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

Как видите, мы просто добавляем тени. Различные другие эффекты для селекторов: active и: hover добавляются одинаково. В случае с этой темой практически ничего не перезаписывается, но многое добавляется. Что важнее, так это:

Тема в корне изменила внешний вид сайта, не требуя добавления новых классов или другой семантики, позволяя полностью сохранить оригинальную библиотеку

Это ядро ​​нового метода. Если вы проверите сам сайт , вы заметите, что он содержит тот же файл библиотеки Bootstrap, что и домашний сайт.

Так что насчет домашней страницы? Как ЭТО достиг его внешности?

Глядя на это, похоже, что некоторые другие вещи изменились, и вы правы. Опять же, он включает в себя vanilla bootstrap, но перезаписывает его файлом docs.css . Но помимо того, что это «тема», она также включает в себя новые элементы и больше не привязывается к перезаписи и добавлению. Если вы проверяете код, к чему-либо «новому» добавляется «bs-» (ну, в основном). Это не следовать соглашению, но я рад, что тема начальной загрузки позволила нам увидеть изменения и то, как они работали, используя свой собственный инструмент.

Таблица стилей Vars — все еще честная игра

С учетом всего сказанного, изменение переменных в таблице стилей vars.less является абсолютно честной игрой. Черт, Bootstrap имеет свой собственный настройщик, который опирается на это. Касание переменных не обязательно влияет на что-либо кроме скомпилированного продукта. Вы должны (технически) все еще иметь возможность обновить BS до более новой версии, перекомпилировать и все еще быть в порядке. Вы даже можете использовать экран настройки для него и подключить все соответствующие переменные.

Используйте Bootstrap для модификации Bootstrap

Если вы посмотрите на исходный файл файла theme.less, то обнаружите, что файл темы импортирует переменные и миксины. Что это значит? При создании темы начальной загрузки рекомендуется использовать встроенные миксины (функции), чтобы облегчить вашу работу. Это гарантирует, что все ваши свойства имеют префикс и что любые дополнительные классы могут использовать уже существующие переменные. Вот отличный пример того, как тема 2.3.2-esque воссоздала индикаторы выполнения:

// Mixin for generating new styles
.progress-bar-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar            { .progress-bar-styles(@progress-bar-bg); }

Это должно дать толчок новым инструментам

Одной из проблем с CSS всегда было чрезмерное раздувание таблиц стилей, которые перезаписывают сами себя. Мы видели линтеры, но ничего о том, о чем я думаю. Вот идея, скажем, у нас есть объявление в Bootstrap для класса и его свойств:

.btn-default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}

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

.btn-default {
text-shadow: 0 1px 0 #fff;
border-color: #e0e0e0;
}

Этот код, кстати, взят из примера темы Bootstrap (без множества других объявлений и переопределения границы #ccc, там идёт idk wtf). Я думаю, что у нас должен быть рост новых инструментов, где это объявление, которое перезапишет цвет границы для класса .btn-default, буквально перезапишет его. Думайте об этом как о прекомпиляции-компиляции. По сути, либо до того, как ваш LESS будет скомпилирован, либо после, инструмент пройдет через вашу базовую библиотеку и вашу тему и заменит ваши переопределения в исходной библиотеке. Опять же, это может произойти только с конечным скомпилированным продуктом, а не с файлами .less. Таким образом, мы могли бы работать с Bootstrap и другими библиотеками CSS (Foundation и другими) таким же образом.

Это безумие? Не за что. Мы уже реализовали минификацию в наших усилиях по компиляции CSS, конкатенацию (включая LESS или SCSS) и, наконец, даже создание нового языка CSS, который обеспечивает более семантическое и мощное использование CSS. Все это в настоящее время выполняется либо с LESS, либо с SCSS, либо между ними. Добавление еще одного слоя в этот процесс не должно быть обременительным.

Моя тема

Я хотел создать пример темы, чтобы проиллюстрировать процесс создания темы. Вот мой первоначальный дизайн для моего нового сайта:

Во-первых, давайте выясним, каковы основные моменты изменений:

• Навбар должен быть прозрачным, а не цветным
• Элементы навигационной панели должны иметь черный фон и белый текст (при наведении курсора на обратный)
• Навбар должен иметь нулевое нижнее поле, чтобы джумботрон мог сидеть прямо под ним.
• из-за определенных функций я хочу, чтобы у jumbotron был прозрачный фон, но текст должен иметь белый фон (я буду добавлять фоновые изображения в jumbotron в зависимости от того, на какой странице они находятся.
• основная кнопка должна быть черной с белым текстом и обратной для наведения (чтобы имитировать навигационную панель)

Поскольку bootstrap не использует «overflow: hidden» в своей сетке, мы можем легко понять, как заставить работать эти плавающие изображения. Давай приступим к работе.

Создание шаблона HTML

Ладно, кажется немного отсталым, но первым делом в нашем списке стоит создать шаблон HTML, похожий на наш конечный продукт.

Многое не заняло, но поехали. Я бы сказал, что это неплохое начало. Размер колонок немного не верен, но я, вероятно, не исправлю это (во всяком случае, я посмотрел на оригинальный дизайн). Первое, что я обнаружил, что мне нужно обновить (помимо уже перечисленных пунктов):

• 0 верхнее поле для заголовка текста (к сожалению, для этого потребуется дополнительный класс)
• нет границы для группы списка
• черные ссылки на боковой панели

 <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                  <a href="#">Another action</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="dropdown-header">
                  Nav header
                </li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!--/.navbar-collapse -->
      </div>
    </div>
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>
          Thought Essays
        </h1>
        <br />
        <h2>
            Poetry
        </h2>
      </div>
    </div>
    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-2">
          <img src="#" width="100%" height="100px" />
          <p>
            Antonin Januska
            <br />
            5th of July 2013
            <br />
            blah blah blah
          </p>
        </div>
        <div class="col-md-7">
          <h1 class="post-title">
            Comforts of Life
          </h1>
          <p>...Content goes here...</p>
        </div>
        <div class="col-md-3">
          <div class="widget">
            <h3>
              Search
            </h3>
            <form class="row">
              <div class="col-md-8">
                <input type="text" class="form-control">
              </div>
              <div class="col-md-4">
              <input type="submit" class="btn btn-default form-control">
            </div>
            </form>
          </div>
          <div class="widget">
            <h3>
              Latest Posts
            </h3>
            <ul class="list-group">
              <li class="list-group-item"><a href="#">Article 1</a></li>
              <li class="list-group-item"><a href="#">Article 2</a></li>
              <li class="list-group-item"><a href="#">Article 3</a></li>
              <li class="list-group-item"><a href="#">Article 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <hr />
      <p>
        © Company 2013
      </p>
    </div>

Неплохо! Давайте начнем с CSS.

CSS

Хорошо, у нас есть несколько вариантов здесь. Либо мы начнем с настроенной версии Bootstrap через экран настройки Bootstrap, либо перезапишем исходные свойства. Оба имеют свои преимущества и недостатки.

Переписать

Преимущества:

• когда выходит обновление, вы можете просто перетащить его внутрь.
• Вы можете использовать инструменты автоматизации, чтобы вытащить библиотеку. Например, использование bower для включения начальной загрузки в ваш проект облегчает
• отличия от оригинала очень легко различимы
• Пользовательский стиль отделен от настроек по умолчанию

Недостатки:

• дополнительный раздув.
• большие изменения в масштабе сайта могут потребовать большого количества переопределений

Переменные лист и прямой доступ

Преимущества:

• изменяющиеся переменные будут распространяться одинаково во всей библиотеке
• прямой доступ означает меньше раздувания от пользовательского стиля

Недостатки:

• сложные обновления

Что мы делаем?

Лучшее решение — получить лучшее из обоих миров. Используя переменные без файла, вы можете легко предварительно настроить основные изменения. В моём случае делаю практически всё чёрно-белое. Наша дополнительная таблица стилей будет напрямую переопределять несколько стилей (например, изменение полей). Хотя модернизация в будущем может быть хлопотом, это жертва, которую я готов принести.

Сначала скопируйте или клонируйте репозиторий начальной загрузки и используйте папку less. Помните, что файл bootstrap.less компилируется в вашу базовую библиотеку bootstrap.css, а ваш theme.less компилируется в вашу тему. Преимущество использования меньшего количества файлов заключается в том, что как файлы темы, так и файлы начальной загрузки могут совместно использовать определенные файлы. В нашем случае мы включим миксины и переменные в наш файл темы.

Вот как выглядит тема начальной загрузки ДО добавления файла темы, но после изменения переменных. При создании собственной темы используйте свое усмотрение относительно того, что необходимо изменить. Большинство переменных имеют довольно простые для понимания имена:

Близко, но … нет сигары. Я сделал только несколько изменений:

• создал переменные @white и @black (мои основные цвета)
• установите @ brand-primary на @black (чтобы изменить цвет ссылок и основы начальной загрузки)
• updated @ navbar-default цвета фона, цвета ссылок и фона. Я решил изменить фон на белый, пока не переопределю его прозрачным (переменные цвета фона имеют зависимости, которые я не хочу нарушать)
• обновлен белый список группы
• обновленный jumbotron на белом фоне

Милая. Как вы можете видеть, обновления переменных могут занять вас до сих пор. Если в будущем мне потребуется обновить установку Bootstrap, мне придется либо извлечь все меньше файлов без переменных .less, либо просто сравнить два файла (старый и новый).

Давайте перейдем к theme.less и добавим следующее:

@import "variables.less";
@import "mixins.less";

Теперь мы действительно можем разобраться в наших изменениях:

.navbar {
  min-height: 40px;
}

.navbar-default {
  background: transparent;
  border: 0;
  margin-bottom: 0;
}

.navbar-nav > li {
  background: @black;

  a{
    padding: 10px;
  }
}

Итак, мы просто фундаментально изменили внешний вид панели навигации. Высота меньше, чтобы соответствовать моему оригинальному дизайну. Панель навигации имеет прозрачный фон без границ и полей, и, наконец, элементы панели навигации имеют черный фон и небольшие отступы, чтобы соответствовать новой высоте панели навигации.

Давайте перейдем к jumbotron (следующий основной кусок):

.jumbotron {
  padding: 48px 0 36px;
  margin-top: -40px;
  background: url('');

  h1 {
    display: inline-block;
    padding: 10px;
    background: @white;
    margin: 0;
  }

  h2 {
    display: inline-block;
    background: @white;
    margin-bottom: 0;
    padding: 5px;
    margin-left: 124px;
    margin-top: 8px;
    font-size: 40px;
  }

}

Мы только что разместили jumbotron за навигацией, чтобы при объявлении фона он также охватывал область навигации. Кроме того, мы изменили заголовки в jumbotron, чтобы он соответствовал дизайну. Наконец, давайте изменим элемент списка группы:

.list-group-item {
  padding-left: 0;
}

Милая. Вот что у меня так далеко:

Неплохо! Почти готово. Обратите внимание, что я добавил фоновое изображение к jumbotron. Хорошо, так что осталось? Материал, который мне нужно будет добавить и ID в самом контенте:

• Я буду добавлять идентификатор «контент» к контенту и идентификатор «заголовок» к заголовку, чтобы я мог исправить интервал там.
• Я добавлю специальные «вытягивающие» классы к изображениям, чтобы они торчали из своих столбцов

Хорошо, круто У меня не совсем мобильный вид, так что на это стоит посмотреть. Я не поклонник «активной» кнопки, поэтому я добавлю к ней.

Вот как я с этим справился:

 //navbar active button
.navbar-default .navbar-nav > .active > a {
  background: @white;
  @shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
  .box-shadow(@shadow);
}

//site specific CSS
.post-title{
  margin-top: 0;
}

#sidebar {
  h3:first-child{
    margin-top: 0;
  }
}

Как видите, миксины бутстрапа пригодятся!

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

<div class="col-md-2 visible-md visible-lg">
          <img src="#" width="100%" height="100px" />
          <p>
            Antonin Januska
            <br />
            5th of July 2013
            <br />
            blah blah blah
          </p>
        </div>

Ах, мы сделали так, чтобы этот материал исчез, потому что на маленьких экранах он выглядит как дерьмо (это боковая панель с моим именем и датой, самый левый столбец). Я вместо этого решил добавить эту информацию под заголовком статьи следующим образом:

<h1 class="post-title">
            Comforts of Life
          </h1>
          <p class="meta visible-sm visible-xs">
            Antonin Januska | 5th of July 2013 | blah blah blah
          </p>

Это гарантирует, что текст виден ТОЛЬКО для мобильных устройств / планшетов. Ухоженная. И наконец, давайте добавим классы «extra pull» к нашим изображениям:

@media (min-width: @screen-md-min) {
  .extra-left{
    margin-left: -55px;
    padding: @font-size-base;
  }

  .extra-right{
    margin-right: -55px;
    padding: @font-size-base;
  }
}

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

@media (max-width: @screen-xs-max) {
  .navbar-default{
    background-color: @black;
  }

  .navbar-default .navbar-collapse{
    border: 0;
  }
}

.navbar-default {
  background: transparent;
  border: 0;
  margin-bottom: 0;
  .navbar-toggle {
    background: @white;
  }
}

Первый бит гарантирует, что цвет панели навигации является черным, а границы не отображаются. Зачем? Что ж, подтолкнув вверх jumbotron и сделав панель навигации прозрачной в глобальном масштабе, мы создадим несколько проблем. Одним из них является то, что цвета становятся все шаткими, а другое — введением границы (она всегда есть по умолчанию).

Конечный продукт

Неплохо!

Bootstrap 3 Мысли Тема

предварительный просмотр