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

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

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

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

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

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

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

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

Мое решение (на данный момент) состоит в том, чтобы создать дополнительный файл LESS и вставить его в 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. Это не идеально, но это временная задержка, которая хорошо сработала для меня.

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

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

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

Пример theme.less:

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

Гораздо лучший (IMHO) подход заключается в том, чтобы воспользоваться репликой проекта github Bootswatch под названием 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изменении файла.

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

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

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

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

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

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

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

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

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

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

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

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