Сегодня родственник поделился вот такой ссылкой https://bulma.io. Он при мне её натягивал на свой проект. Что сразу понравилось, реализована простая вертикальная центровка прямо из коробки без бубна и костылей. Ну и в целом очень приятный и логичный css-фреймворк
Открыть
Ответить
CSS фреймворки Bootstrap, Foundation, Semantic UI, UIkIt
Bulma интересный CSS фреймворк, ранее не знал о нём при анализе самых популярных на сегодняшний день. Думаю стоит обратить на него внимание!
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
Решил один из своих сайтов перевести на тему на основе Bulma. Первое, что бросилось в глаза - вес фреймворка. Он вообще невесомый по сравнению с Bootstrap.
Из коробки в его составе нет ни одного js файла. По сути, Bulma - это один файл bulma.css . Конечно, совсем без js не обойтись, например для работы мобильной версии навигации нужно подключить небольшой js файл.
Логика примерно такая же как у Бутстрапа, так что, проблем с переходом возникнуть не должно.
Сейчас руку набью и в дальнейшем хочу в своей сборке админку сделать на основе этого фреймворка.
Из коробки в его составе нет ни одного js файла. По сути, Bulma - это один файл bulma.css . Конечно, совсем без js не обойтись, например для работы мобильной версии навигации нужно подключить небольшой js файл.
Логика примерно такая же как у Бутстрапа, так что, проблем с переходом возникнуть не должно.
Сейчас руку набью и в дальнейшем хочу в своей сборке админку сделать на основе этого фреймворка.
otherside, приветствую данную инициативу! Интересно будет посмотреть на результат.
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
Что касается перевода Slaed на какой либо css-фреймфорк. Мое мнение - это нужно сделать. Это удобно, это в итоге экономит много времени.
На какой? Ну тут решать автору. Мое мнение такое: система ориентирована на новичков, поэтому нужно выбрать Bootstrap. Он более распространен, по нему куча документации и готовых расширений. Все это говорит в его пользу.
Ну а если вы поймете как работает Бутстрап, то и с остальными фреймворками у вас не будет проблем, все они примерно по одному принципу построены.
В обще вывод такой: для продукта, рассчитанного на массового потребителя, нужно выбирать инструменты, которые более распространены и имеют больше мануалов.
И сразу совет тем, кто решит начать изучать любой css-фреймворк. Никогда не вносите изменения в родные css файлы фреймворка. Сегодня поправили размер шрифта в тексте на кнопке. Завтра увеличили отступ между заголовками h2. Затем таких правок накопится очень много. А потом вышла новая версия вашего фреймворка. И у вас уже не получится просто обновить файлы. Нужно будет вспоминать где и какие правки в родных файлах вы вносили.
Поэтому, первым делом после того, как начинаете творить что-то новое, под родными css файлами в вашей верстке сразу подключите пустой файл custom.css (ну и создайте его конечно же). И вот в него вносите все правки. Это можно проделывать даже с классами, которые включены в родные css файлы фреймворка.
Например, в родной таблице стилей есть класс section и там прописан свойство: padding-bottom:30px;
Создаете в своем файле custom.css точно такой же класс и правите его как вам нужно. Не забывайте только кэш в браузере чистить, перед тем как обновляете страницу, чтобы увидеть разницу.
если будете делать так, то в дальнейшем у вас не возникнет проблем с обновлением своего фреймворка
На какой? Ну тут решать автору. Мое мнение такое: система ориентирована на новичков, поэтому нужно выбрать Bootstrap. Он более распространен, по нему куча документации и готовых расширений. Все это говорит в его пользу.
Ну а если вы поймете как работает Бутстрап, то и с остальными фреймворками у вас не будет проблем, все они примерно по одному принципу построены.
В обще вывод такой: для продукта, рассчитанного на массового потребителя, нужно выбирать инструменты, которые более распространены и имеют больше мануалов.
И сразу совет тем, кто решит начать изучать любой css-фреймворк. Никогда не вносите изменения в родные css файлы фреймворка. Сегодня поправили размер шрифта в тексте на кнопке. Завтра увеличили отступ между заголовками h2. Затем таких правок накопится очень много. А потом вышла новая версия вашего фреймворка. И у вас уже не получится просто обновить файлы. Нужно будет вспоминать где и какие правки в родных файлах вы вносили.
Поэтому, первым делом после того, как начинаете творить что-то новое, под родными css файлами в вашей верстке сразу подключите пустой файл custom.css (ну и создайте его конечно же). И вот в него вносите все правки. Это можно проделывать даже с классами, которые включены в родные css файлы фреймворка.
Например, в родной таблице стилей есть класс section и там прописан свойство: padding-bottom:30px;
Создаете в своем файле custom.css точно такой же класс и правите его как вам нужно. Не забывайте только кэш в браузере чистить, перед тем как обновляете страницу, чтобы увидеть разницу.
если будете делать так, то в дальнейшем у вас не возникнет проблем с обновлением своего фреймворка
И пара слов о Bulma.
На собственном опыте убедился, что на этом фреймворке можно делать проекты любой сложности. До этого на него перевел сайт с очень простым дизайном. А теперь полностью переверстал тему на 4.jumi.ru . Теперь внешний вид этого сайта базируется на Bulma.
Так что я лично теперь буду плотно сидеть именно на Бульме
На собственном опыте убедился, что на этом фреймворке можно делать проекты любой сложности. До этого на него перевел сайт с очень простым дизайном. А теперь полностью переверстал тему на 4.jumi.ru . Теперь внешний вид этого сайта базируется на Bulma.
Так что я лично теперь буду плотно сидеть именно на Бульме
otherside, по поводу CSS фреймворка Bootstrap, полностью с вами согласен. Склоняюсь к применению именно его, но есть несколько нюансов. Основной из них, это нехватка в нём всех компонентов которые нужны системе, тот же рейтинг, календарь, datepicker и несколько других. Придётся ставить сторонние что очень не хотелось бы.
Так же, если использовать Bootstrap, то правильно бы отказаться от jQuery UI, дабы не плодить дубликаты и количество встроенных библиотек. К тому же библиотека jQuery UI не обновлялась авторами с 2016 года.
Стандартную jQuery придётся пока использовать дальше, так как на ней завязан Ajax системы. Благо обновления выходят регулярно.
Понравилась библиотека/фреймворк Buefy базирующий на Bulma + Vue, он не столь популярен как Bootstrap, но зато в нём есть всё что нужно CMS.
В общем пока думаю, буду рад выслушать другие мнения!
Так же, если использовать 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-быстрый старт. Кратко изложил базовый принцип работы фреймворка.
Скачать можно тут https://goods-xml.ru/files-view-4.html.
Есть демо-версия. Нужно зарегистрироваться по ссылке выше и выбрать в настройках defaultPureGrid.
Как уже понятно из названия адаптация осуществлялась на фрэймворке Pure.
Буду рад замечаниям.
Update:
Добавил статью Pure-быстрый старт. Кратко изложил базовый принцип работы фреймворка.
Версия системы: SLAED CMS 6.* Pro
Версия PHP: 7
Сервер: Сервер в интернете
olevpa, спасибо! Интересное решение заслуживающее внимания.
Было просто отлично добавить данную тему в наш архив файлов
Было просто отлично добавить данную тему в наш архив файлов
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
olevpa, спасибо! Интересное решение заслуживающее внимания.
Было просто отлично добавить данную тему в наш архив файлов
Добавил в архив файлов. Адаптив + модифицированный блок категорий (опционально).
И ещё добавил хак для подключения турбо страниц яндекса.