Twitter Рекомендации по настройке Bootstrap

Question

Я работаю с Bootstrap 2.0.3, используя LESS. Я хочу настроить его очень интенсивно, но я хочу избегать внесения изменений в источник, когда это возможно, поскольку часто происходят изменения в библиотеках. Я новичок в LESS, поэтому не знаю, как его компиляция полностью работает. Каковы некоторые рекомендации по работе с основанными на LESS или LESS структурами?

Answer 1

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

Моим решением (на данный момент) является создание файла LON 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"; 

... 

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

Answer 2

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

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

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

2. Обновить все ссылки в theme.less, чтобы указать на самонастройки подкаталог. Убедитесь, что ваш variables.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"; 
   

   ...

3. Добавьте 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; 
   } 
   
   ... 
   

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Так же, как описано выше: я создавать локальные копии для всех файлов Less я кастомизации: такие, как: «переменные-custom.less» , "alert-custom.less", "buttons-custom.less". Поэтому я могу использовать некоторые стандарты и иметь свои собственные дополнения. Недостатком является то, что когда Bootstrap будет обновляться, его очень сложно перенести.

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

Override Стили

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

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

Answer 5

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

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

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

Пример theme.less:

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

Answer 6

гораздо лучше (ИМХО) подход заключается в том, чтобы взять реплику из проекта 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.

Answer 7

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