Bootstrap, пожалуй, один из самых знаменитых фреймворков формата css-is-js. Уж кто его только не использует и сколько всего он в себя не включает. Однако же, это хоть и популярный, но (неожиданно) далеко не единственный популярный фреймворк для верстки сайтов. О муках выбора
Итак, начиная работу над одним своим проектом, я решил попробовать "не топтаться на одном месте", а применить что-то новое во front-endе и открыл для себя мир чудес , что фреймворков для верстки огромное множество и что bootstrap не прям "лечение для всех болезней". Конечно же, выбор пал вначале на ZURB foundation, который до сих пор кажется мощной машиной, которую изучить полностью не возможно. Установив и проработав примерно год, я решил найти что-то более легкое, что включало бы в себя только css. И вот путем чтения\гугления\просмотров ютуба, я скомпоновал свой список css фреймворков, который хотелось бы с вами обсудить, но комментариев у меня нет, поэтому просто показать.
ZURB Foundation 6 https://get.foundation/ о котором я уже писал ранее. Мощная вещь, можно найти готовые блоки и шаблоны болванки.
Tailwind (css ui) https://tailwindcss.com/ и как отдельно https://tailwindui.com/ - занятная библиотека с малым весом готовых классов. Как дополнение вполне пойдет
Bulma https://bulma.io/ - отличный фреймворк css, который легко запоминается и хорошо работает. Можно переопределять переменные через SASS.
Milligram https://milligram.io/ - небольшая и легкая библиотека.
Ui kit https://getuikit.com/ - популярная, также машина, с множеством набором всего и вся (css + js). Документация https://getuikit.com/docs/
Materialize https://materializecss.com/ - для любящих материалдизайн. Вроде как считается устаревшей. Но в целом еще актуальной.
Skeleton css http://getskeleton.com/ - часто встречал упоминание, ничего не могу сказать.
Semantic UI https://semantic-ui.com/ - не менее популярная мощная библиотека, тоже все в себя включает
Pure CSS https://purecss.io/ - не могу ничего описать.
И другие, например Primer CSS, Ant Design
По хорошему стоило бы упомянуть вес, объем, провести анализ, показать примеры. Однако же, лень на каждом ресурсе есть хорошая документация и примеры. Попытка провести опрос у себя на страницы в вк, я получил 0 результатов, что недурно. Если не боитесь, вот оно. Да, голосование ПОЛНОСТЬЮ АНОНИМНО! Я не узнаю, кто и что выбрал. (переместил в конец материала).
Пока мне понравилась связка bulma и tailwind, в первую очередь за flex и чистый css, скорее всего их я и применю. Очень многие импортируют обычно себе весь объем JS утилит, которыми по сути и не пользуются, а лишь занимают вес, получая низкие балы в GT metrix.
Не могу не заметить, что в порыве поиска я нашел хорошие видео на ютубе, которыми тоже поделюсь:
В первую очередь это очень прекрасный и хороший youtube-канал Анны Блок Особенно если вы начинающий фронтальщик-верстальщик. У нее же и есть по Tailwind подробное видео https://www.youtube.com/watch?v=skSpvzyEljo
Зарубежные видео:
https://www.youtube.com/watch?v=N6SXu86bJ6I - беглый быстрый обзор чуть ли не всех существующих библиотек.
https://www.youtube.com/watch?v=3pXGm6s5Ej4 - обзор 6 библиотек (bootstrap, foundation, tailwind, bulma, uikit, pure)
https://www.youtube.com/watch?v=jPlIK-tJ1RM - обзор 5 библиотек (foundation, materialize, bulma, tailwind, bootstrap) с плюсами и минусами
https://www.youtube.com/watch?v=TCgA1iL3HNY - и еще обзор 5 библиотек (uikit, bootstrap, foundation, semantic ui, bulma)
Upd. В итоге перешел на Bulma css и вот почему:
- в булме только CSS и ничего лишнего, но более того, с помощью SASS/SCSS файла и import можно подключить ТОЛЬКО необходимые компоненты и элементы: например не нужны элементы формы или hero или tab - мы и не собираем их. Ну и также плюсом, что можно переопределить некоторые переменные, например глобально отключить скругления, цвета primary и т.д. Возможностей масса для оптимального файла на выходе. в IDE редакторе несложно подключить и настроить обработку sass/scss для компиляции в css (кстати, открыл для себя возможность минификации файла "на лету" перед деплоем или push.
- все классы интуитивно понятны. Т.е. можно особо не морщиться, вспоминая как там в документации - все просто, вот примеры классов: title, has-text-bold is-shadow, subtitile. Да и мобильная версия тоже делается сразу классом, что еще легче для запоминания, например: is-6-mobile is-4-desktop. Так что не соврали нигде, что он просто и легок в освоении и изучении
- Много полезных helpers классов, которые влет запоминаются и как же жил до этого, например отступы mt, p и т.д.
- Стилизация приятная и, еще раз подчеркну, с помощью SCSS можно под себя настроить типовые цвета. Однако же готовых решений и оттенков там завались. Честно даже устал, подбирая лучший вариант для класса tag :-) has-gray-light.
- шикарная и менее замороченная верстка сетки, с помощью column. гениально и просто. Особенно, если включить параметр multiline, то можно забыть про постоянные row row row. Итак: Контейнер -> columns -> column. Flexbox рулит.
Bulma лав.
В поиске css фреймворка открыл для себя хороший сайт подбора пастельных цветов - https://colorhunt.co/palettes/pastel
и хорошие подкасты:
https://music.yandex.ru/album/7293227 - пятиминутка php
https://music.yandex.ru/album/6245956 - вебстандарты
https://music.yandex.ru/album/6411645/track/94681241 - радио Т
Ну и сделал вывод, что пора уже начинать изучать node.js/vue.js
Не только о программировании. Посмотрел шикарное кино "Кошачьи миры Луиса Уэйна" - очень атмосферно снятое, с Бенедиктом Камбербэтчем в главное роли о нелегкой судьбе иллюстратора Луиса Уэйна. Достаточно тяжелая драма-биография, но если почитать об этом человеке, то все станет на свои места. Рекомендую.
И вот анонимный опрос в ВК
