Советы по настройке Twitter Bootstrap

Мое решение похоже на jstam's, но я избегаю внесения изменений в исходные файлы, когда это возможно. Учитывая, что изменения в начальной загрузке будут частыми, я хочу, чтобы вы могли использовать последний источник и вносить минимальные изменения, сохраняя мои изменения в отдельных файлах. Конечно, это не полностью пуленепробиваемый.

• Скопируйте bootstrap.less и variables.less в родительский каталог. Переименуйте bootstrap.less на тему .less или что хотите. Структура каталогов каталогов должна выглядеть следующим образом:

  /Website            
       theme.less
       variables.less
       /Bootstrap
       ...
  

• Обновите все ссылки в theme.less, чтобы указать подкаталог bootstrap. Убедитесь, что ваши переменные .less ссылаются на родительский, а не на каталог начальной загрузки:

  ...
  // CSS Reset
  @import "bootstrap/reset.less";
  
  // Core variables and mixins
  @import "variables.less"; // Modify this for custom colors, font-sizes, etc
  @import "bootstrap/mixins.less";
  
  // Grid system and page structure
  @import "bootstrap/scaffolding.less";
  @import "bootstrap/grid.less";
  @import "bootstrap/layouts.less";
  

  ...

• Добавьте свои переопределения CSS в файл theme.less сразу после их включения.

  ...
  // Components: Nav
  @import "bootstrap/navs.less";
  @import "bootstrap/navbar.less";
  
  // overrides
  .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
      border-radius: 0 0 0 0;
      padding: 10px;
  }
  
  .nav-tabs, .nav-pills {
      text-transform: uppercase;
  }
  
  .navbar .nav > li > a {
      text-shadow: none;
  }
  
  ...
  

• Ссылка на тему .less вместо bootstrap.less на ваших HTML-страницах.

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

Это то, с чем я боролся. С одной стороны, я хочу сильно настроить файл variables.less с собственными цветами и настройками. С другой стороны, я хочу немного изменить файлы Bootstrap, чтобы облегчить процесс обновления.

Моим решением (на данный момент) является создание файла LESS addon и его вставка в файл bootstrap.less после импорта переменных и микшинов. Так что-то вроде этого:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

Таким образом, если я хочу reset цвета Bootstrap, шрифты или добавлять дополнительные миксы, я могу. Мой код является отдельным, но будет скомпилирован в остальной части импорта Bootstrap. Это не идеально, но это прекрасная работа, которая хорошо работала для меня.

С моей стороны, у меня просто есть файл с именем theme.less с импортом boostrap.less в нем, и чуть ниже я переопределяю (даже если он плохо работает с использованием LESS, но, что проще, его поддерживать) значение переменной, которое я не обновляю.

Это хорошо работает для создания пользовательских значений для переменных в variables.less

После этого я скомпилирую файл theme.less вместо bootstrap.less

Пример theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

А лучше подход (IMHO) - это взять вызов из проекта Bootswatch github под названием swatchmaker. Этот проект специально разработан для создания и управления десятками тем Bootstrap на веб-сайте.

Makefile в проекте строит swatchmaker.less (вы можете переименовать его в нечто вроде customizations.less). Этот файл содержит кучу импорта:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

Вы можете переименовать папку swatch и bootswatch.less в любое удобное для вас время.

Это имеет смысл, поскольку вы можете обновить Bootstrap, не затрагивая ваши собственные файлы. Фактически, Makefile также содержит команды для извлечения последней версии Bootstrap. Подробнее см. README на странице проекта.

В качестве бонуса README также предлагает установить камень watchr, который автоматически сгенерирует проект при изменении файла .less.

Я пришел к тому же решению, что и Джоэл:

Пользовательские меньше файлов

Как описано выше: я создаю локальные копии для всех файлов меньшего размера, которые меня настраивают: например, "variables-custom.less", "warn-custom.less", "buttons-custom.less". Поэтому я могу использовать некоторые стандарты и иметь свои собственные дополнения. Недостатком является то, что когда Bootstrap будет обновляться, его очень сложно перенести.

Но есть что-то еще:

Переопределить стили

При взгляде на рабочие потоки я часто вижу людей, предлагающих просто переопределять стили. Итак, сначала импортируйте стандартные файлы меньшего размера, а затем добавьте свои пользовательские объявления внизу. Верх: здесь проще обновиться до более новой версии. Недостатком является: Скомпилированный файл CSS включает все переопределения. Некоторые селектора CSS определены дважды. Поэтому браузеру необходимо сделать некоторые шаги, чтобы выяснить, что применять на самом деле. Это не очень чисто.

Мне интересно, почему препроцессоры недостаточно умны для решения таких двойных объявлений? Есть ли лучший рабочий поток, который я здесь отсутствует?

Если (И ТОЛЬКО ЕСЛИ), у вас есть время, которое вы можете сделать так, как я. Я сохраняю свою измененную версию фреймворка (ов) и каждое обновление фреймворка читаю документы и проверяю источник изменений.

Это решение может показаться менее идеальным при первом взгляде, но у меня есть причины для этого. Я не работаю ни с одним, ни с амальгамом многих фреймворков, лучших практик, списков стилей/нормализации стиля и т.д., И я всегда уверен, что никакое обновление никогда не изменит существующие проекты каким-либо образом, я не видел.

Я работаю над своей собственной инфраструктурой по следующим причинам.

• Я изгоняю каждый маленький бит, мне не нужно хранить модульные и мелкие
• Я использую свою фреймворк для клиентских заданий и хочу: а) знать, с чем именно я работаю, а б) владею всем, что я продаю клиенту. Я не просто копирую и использую фреймворки, но пытаюсь понять и воссоздать их.
• Я использую свою фреймворк в сочетании с CMS и не могу просто отказаться и забыть фреймворк в проекте/начать с нуля

Просто добавьте @import "../../styles.less"; (или везде, где ваша таблица стилей) к bootstrap.less внизу. Это позволяет использовать бутстрап-смеси, такие как .gradient или .border-radius внутри ваших собственных стилей.