CSS фреймворки Bootstrap, Foundation, Semantic UI, UIkIt

Сегодня родственник поделился вот такой ссылкой https://bulma.io. Он при мне её натягивал на свой проект. Что сразу понравилось, реализована простая вертикальная центровка прямо из коробки без бубна и костылей. Ну и в целом очень приятный и логичный css-фреймворк

Bulma интересный CSS фреймворк, ранее не знал о нём при анализе самых популярных на сегодняшний день. Думаю стоит обратить на него внимание!

Решил один из своих сайтов перевести на тему на основе Bulma. Первое, что бросилось в глаза - вес фреймворка. Он вообще невесомый по сравнению с Bootstrap.

Из коробки в его составе нет ни одного js файла. По сути, Bulma - это один файл bulma.css . Конечно, совсем без js не обойтись, например для работы мобильной версии навигации нужно подключить небольшой js файл.

Логика примерно такая же как у Бутстрапа, так что, проблем с переходом возникнуть не должно.

Сейчас руку набью и в дальнейшем хочу в своей сборке админку сделать на основе этого фреймворка.

otherside, приветствую данную инициативу! Интересно будет посмотреть на результат.

Что касается перевода Slaed на какой либо css-фреймфорк. Мое мнение - это нужно сделать. Это удобно, это в итоге экономит много времени.

На какой? Ну тут решать автору. Мое мнение такое: система ориентирована на новичков, поэтому нужно выбрать Bootstrap. Он более распространен, по нему куча документации и готовых расширений. Все это говорит в его пользу.

Ну а если вы поймете как работает Бутстрап, то и с остальными фреймворками у вас не будет проблем, все они примерно по одному принципу построены.

В обще вывод такой: для продукта, рассчитанного на массового потребителя, нужно выбирать инструменты, которые более распространены и имеют больше мануалов.

И сразу совет тем, кто решит начать изучать любой css-фреймворк. Никогда не вносите изменения в родные css файлы фреймворка. Сегодня поправили размер шрифта в тексте на кнопке. Завтра увеличили отступ между заголовками h2. Затем таких правок накопится очень много. А потом вышла новая версия вашего фреймворка. И у вас уже не получится просто обновить файлы. Нужно будет вспоминать где и какие правки в родных файлах вы вносили.

Поэтому, первым делом после того, как начинаете творить что-то новое, под родными css файлами в вашей верстке сразу подключите пустой файл custom.css (ну и создайте его конечно же). И вот в него вносите все правки. Это можно проделывать даже с классами, которые включены в родные css файлы фреймворка.

Например, в родной таблице стилей есть класс section и там прописан свойство: padding-bottom:30px;

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

если будете делать так, то в дальнейшем у вас не возникнет проблем с обновлением своего фреймворка

И пара слов о Bulma.
На собственном опыте убедился, что на этом фреймворке можно делать проекты любой сложности. До этого на него перевел сайт с очень простым дизайном. А теперь полностью переверстал тему на 4.jumi.ru . Теперь внешний вид этого сайта базируется на Bulma.

Так что я лично теперь буду плотно сидеть именно на Бульме

otherside, по поводу CSS фреймворка Bootstrap, полностью с вами согласен. Склоняюсь к применению именно его, но есть несколько нюансов. Основной из них, это нехватка в нём всех компонентов которые нужны системе, тот же рейтинг, календарь, datepicker и несколько других. Придётся ставить сторонние что очень не хотелось бы.

Так же, если использовать Bootstrap, то правильно бы отказаться от jQuery UI, дабы не плодить дубликаты и количество встроенных библиотек. К тому же библиотека jQuery UI не обновлялась авторами с 2016 года.

Стандартную jQuery придётся пока использовать дальше, так как на ней завязан Ajax системы. Благо обновления выходят регулярно.

Понравилась библиотека/фреймворк Buefy базирующий на Bulma + Vue, он не столь популярен как Bootstrap, но зато в нём есть всё что нужно CMS.

В общем пока думаю, буду рад выслушать другие мнения!

Сделал технический адаптивный шаблон для классической темы Slaed версии 6.2. Технический - т.е. без модифицированных меню, скрывающихся блоков и попиксельной подгонки шаблона. Пока эти задачи ложатся на плечи установщика. Здесь лишь адаптация под любые разрешения гаджетов с минимальными корректировками дефолтной версии.
Скачать можно тут https://goods-xml.ru/files-view-4.html.\ Есть демо-версия. Нужно зарегистрироваться по ссылке выше и выбрать в настройках defaultPureGrid.
Как уже понятно из названия адаптация осуществлялась на фрэймворке Pure.
Буду рад замечаниям.

Update:
Добавил статью Pure-быстрый старт. Кратко изложил базовый принцип работы фреймворка.

olevpa, спасибо! Интересное решение заслуживающее внимания.

Было просто отлично добавить данную тему в наш архив файлов 😉

olevpa, спасибо! Интересное решение заслуживающее внимания.

Было просто отлично добавить данную тему в наш архив файлов 😉

Добавил в архив файлов. Адаптив + модифицированный блок категорий (опционально).
И ещё добавил хак для подключения турбо страниц яндекса.