Дефолтный шаблон OpenCart на Bulma вместо Bootstrap это не прихоть, а здравый смысл


232

Я честно пытался полюбить Bootstrap и пользоваться им (ибо он по дефолту в шаблоне). Но глубоко внутри назревал нешуточный конфликт, моё нутро говорило мне что CSS фреймворк это только CSS, без всякого JS. Масла в огонь подливал, вызывающий личную неприязнь, подход к именованию классов и реализация отдельных компонетов. Переломным моментом стала попытка кастомизации через SASS переменные (осмысленная, а не на удачу). В воздухе ощущался чуждый мне подход к логике реализации самой сути Boostrap. Боль было невозможно терпеть дальше и одним солнечным летним деньком, я блуждая по просторам сети встретил Bulma. Никакого JS, простые как три копейки компоненты, приятный UI, прочитал про кастомизацию, сразу всё понял. Уже вечером я снёс Bootstrap и поставил Bulma 0.9. Одно потянуло другое и я пришел к выводу что нужно пилить свою сборку с блэкджеком и шлюхами, вместо очередного шаблона. Так родилась идея exopencart. Ну ладно, давай про Bulma. Почему именно она и именно 0.9? 

Почему Bulma лучше (субъективно, но факт)

  • Полностью без JavaScript. Никакого jQuery, никаких Popper.js, никаких лишних 200–300 КБ в бандле. Всё на чистом CSS. Хочешь анимации/модалки/дропдауны? Пиши сам или подключай микроскопический скрипт - твоё дело. Нет навязанного поведения.
  • Кастомизация - это кайф. Всё на переменных SASS, структура понятная, никаких монструозных override'ов. Хочешь поменять цвет акцента? Одна строка в _variables.scss. Хочешь другой радиус углов? Ещё одна.
  • Лёгкая и быстрая. Bulma 0.9 - это ~200 КБ (без gzip) минифицированного CSS после компиляции. Bulma 1.0 - уже ~500 КБ из-за встроенной тёмной темы и подхода к её реализации. Разница ощутима на мобильных и слабых хостингах.
  • Тёмная тема? В exopencart она есть в виде отдельного файла dark.css, через CSS переменные. Добавляет 10Кб к бандлу, но всё просто и под полным контролем.
  • Компиляция через SASS/SCSS. Запилил встроенный в сборку модуль SASS компилятора. Меняешь переменную прямо в админке, жмешь кнопку, через 2 секунды видишь результат. Никаких "пересобрать вручную npm run build".

Почему я не взял Bootstrap 5 или Tailwind? Bootstrap 5 конечно изменился в лучшую сторону относительно Bootstrap 3, но всё равно тащит JS-зависимости и остаётся слишком "коробочным", скорее для дашбордов, а не кастомных UI. Tailwind - это круто и я люблю его больше Bulma, но не нашел удобного способа работать с ним на LAMP стеке, да еще и на shared хостингах. А тащить nodejs ради него моветон.

Короче, в exopencart Bulma 0.9 - это не прихоть, а осознанный выбор: минимум веса, максимум свободы, полная кастомизация без слёз. Всё, что нужно для красивого, быстрого и поддерживаемого фронта - уже внутри, сиди пили с кайфом.

Хочешь проверить? Скачай сборку, поменяй пару переменных и убедись сам. Не понравится, ну и ладно, переживу.


Написать комментарий
Введите код с картинки