Найкращі практики налаштування завантажувальної програми Twitter [закрито]

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

Моє рішення схоже на jstam, але я уникаю внесення змін у вихідні файли, коли це можливо. Зважаючи на те, що зміни у завантажувальній програмі будуть частими, я хочу мати змогу зняти останнє джерело та внести мінімальні зміни, зберігаючи мої модифікації в окремих файлах. Звичайно, це не зовсім кулезахисне.

1. Скопіюйте файл bootstrap.less і variables.less в батьківський каталог. Перейменуйте bootstrap.less на topic.less або що завгодно. Структура каталогу каталогу повинна виглядати так:

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

2. Оновіть усі посилання в topic.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 у файл topic.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. Посилання на topic.less замість bootstrap.less на своїх HTML-сторінках.

Щоразу, коли виходить нова версія, ваші зміни повинні бути безпечними. Ви також повинні робити різницю між власними завантажувальними файлами, коли виходить нова версія. Змінні та імпорт можуть змінюватися.

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

Моє рішення (поки що) - створити додатковий Менший файл та вставити його у bootstrap.lessфайл після імпорту змінних та mixins. Тож щось подібне:

...

// 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у ньому, і трохи нижче я переосмислюю (навіть якщо це здається поганим за допомогою МЕНШЕ, але добре, що це легше підтримувати) змінне значення, яке я не хочу оновлювати .

Це добре допомагає мати власні значення змінних у variables.less

Після цього я збираю свій theme.lessфайл замість ньогоbootstrap.less

Приклад theme.less:

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

Набагато кращий (IMHO) підхід полягає в тому, щоб визначитись із проекту gotsub 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 і не можу просто кинути і забути рамку в проект / почати з нуля

Я прийшов до того ж рішення, що і Джоель:

Спеціальні менше файлів

Так само, як описано вище: я створюю локальні копії для всіх менших файлів, які я налаштовую: наприклад: "змінних-custom.less", "alerts-custom.less", "кнопки-custom.less". Тож я можу використовувати деякі стандарти та мати власні доповнення. Мінус: Коли оновлення Bootstrap буде оновлено, міграцію дійсно важко.

Але є ще щось:

Переосмислити стилі

Оглядаючи робочі потоки, я часто бачу людей, які пропонують просто змінити стилі. Отже, ви імпортуєте спочатку стандартні файли Менше, а потім додаєте власні декларації внизу. Зворотний бік тут: простіше оновити до нової версії. Мінус: компільований CSS-файл включає всі зміни. Деякі селектори CSS визначаються двічі. Таким чином, браузер повинен зробити деякий підйом, щоб з’ясувати, що застосовувати насправді. Це не зовсім чисто.

Мені цікаво, чому препроцесори недостатньо розумні для вирішення таких подвійних декларацій? Чи є якийсь кращий робочий потік, якого я тут відсутні?

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