2

Проблема возникла следующая. Мне необходимо использовать компоненты bootstrap (целиком это свалка), а вот отдельные компоненты очень даже хорошая штука.

Я зашел в гости к разработчикам: https://github.com/twbs/bootstrap скачал это все дело и меня интересует следующее: - dropdown.js - modal.js - popover.js - tab.js - tooltip.js

Естественно к этим плагинам нужны стили, их можно взять тут: https://github.com/twbs/bootstrap/tree/master/less Для компиляции LESS в CSS я использую плагин в phpStorm.

И возникает следующая проблема: Каждый LESS файл использует переменные: https://github.com/twbs/bootstrap/blob/master/less/modals.less, поэтому при редактировании кода я не могу редактировать 1 файл и сразу смотреть на изменения в браузере, так как возникает ошибка (к примеру переменная @modal-content-bg не найдена).

Как вариант создать свой файл настроек и импортировать в каждый LESS файл плагина или постоянно собирать все это дело через grunt, что достаточно не удобно.

Подскажите пожалуйста как это дело правильно готовить?

1
  • все переменные у twitter bootstrap находятся в файле variables.less, поэтому обязательно скопируйте этот файл, поставьте его самым первым в результирующем файле сборки и при необходимости удалите неиспользуемые переменные, а без этого файла там вообще ничего работать не будет
    – MasterAlex
    26 июл 2015 в 12:17

3 ответа 3

5

Собирать все это дело через грунт как раз очень удобно и не требует никаких лишних телодвижений. Делается автоматически с помощью grunt-watch.

Изучите вот этот очень простой мануал по настройке Grunt и вы поймете, что на самом деле все делается очень легко.

1
  • Большое спасибо, про watch не знал. Вот тренируюсь щас.
    – Nepster
    28 июл 2015 в 20:41
0

Как у нас в компании делают. 1) Есть less файл с переменным и примесями. (У Вас это тот less variables.less (как указал человек выше) ) 2) Дальше ставите импорт variables.less в начало less плагина. 3) При компиляции phpStorm будет вытягивает в готовый css переменные стили которые нужно с variables.less

Как то так, конечно может не лучший вариант)

1
  • 1
    у меня плагинов штук 40 =)
    – Nepster
    28 июл 2015 в 20:41
0

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

С Bootstrap примерно так:

  1. Скачать или склонировать репу с github.
  2. Nodejs -> npm -> grunt - установка зависит от системы (линейка PhpStorm нет, а вот WebStorm и IntelliJ IDEA, которая Ultimate, сами попросят и установят ноду, могут в команды npm и grunt).
  3. Выполнить npm install в корне репы.

Bootstrap готов к использованию, фактически это локальный форк, который можно урезать до нуля и/или расширить функционалом по js, less/css, плагинам grunt.

Как красиво совместить со своим проектом, настроить систему сборки со всеми плюшками, разговор отдельный. Если кратко, package.json Gruntfile.js bootstrap.less- разобраться, настроить и забыть о рутине.

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

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

Ну а так, конечно, фломастеры у всех разные.

1
  • подтянул бутстрап, 250+ метром. "который можно урезать " вот этим как раз я в своей черной лаборатории и буду заниматься, урежу его примерно до 10 файлов. =)
    – Nepster
    28 июл 2015 в 20:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.