CSS-фреймворки для верстальщиков
Глеб Летушов, редактор-фрилансер, написал статью специально для блога Нетологии о том, что такое СSS-фреймворки, как они помогают в создании сайта и нужно ли их использовать.
Что такое фреймворк
Фреймворк — это платформа, на которой строится программа. Понятие фреймворка используется во многих языках программирования.
Программа обучения: «Профессия Frontend-разработчик»
Когда мы говорим о верстке, то имеем в виду фреймворк как готовую библиотеку CSS и JavaScript файлов, которые используются в оформлении HTML-страницы. С помощью такого набора сверстать страницу намного легче, потому что не нужно разбираться с адаптивностью и думать о том, как страница будет выглядеть на мобильных экранах и планшетах. Также не нужно подбирать размеры шрифтов, кнопок и форм, потому что почти во всех фреймворках эти параметры уже настроены. Остается лишь подключить его и собрать страницу из готовых блоков.
Кому пригодятся CSS-фреймворки
Фреймворки помогают упростить и ускорить многие вещи, облегчают жизнь начинающим верстальщикам, программистам без опыта в верстке и тем, кто хочет быстро создать HTML-страницу, не изучая всех правил HTML.
Популярные фреймворки создаются и тщательно тестируются опытными разработчиками и сообществом пользователей. Поэтому сайт, созданный с помощью фреймворка, скорее всего, будет хорошо выглядеть в разных браузерах и устройствах.
Какой фреймворк выбрать
Изменение стандартного оформления во фреймворке занимает достаточно много времени. Поэтому лучше сразу выбрать более подходящий, чтобы потом не пришлось менять предустановленное оформление.
Я расскажу о тех решениях, с которыми знаком и которые мне приглянулись.
Bootstrap
Один из самых используемых фреймворков. Построен по принципу mobile-first, то есть хорошо выглядит на мобильных телефонах.
В этот фреймворк входит сетка из двенадцати колонок, шрифты, формы, кнопки, JS-скрипты. Их оформление уже прописано в CSS-классах, поэтому достаточно только подключить стили и сделать разметку.
Верстать сайт с помощью Бутстрап способны даже начинающие разработчики. Можно быстро создать прототип и макет с необходимой функциональностью в HTML. Правда, в стандартном оформлении сайты выглядят одинаково, но стили для классов можно изменить со временем.
Bootstrap хорошо работает на разных устройствах и отображается в современных браузерах.
.png)
Страница блога, созданная с помощью Bootstrap
Полная сборка Bootstrap содержит описания множества стилей для веб-элементов, шрифтов, сетки. Если еще неизвестно, каким будет сайт, лучше пользоваться полной сборкой.
Если нужны какие-то определенные элементы оформления, например, сетка, то на сайте можно скомпилировать собственную сборку. Просто выбрать нужные элементы, а остальное удалить. Благодаря этому можно сократить вес фреймворка и увеличить скорость загрузки сайта.
С сайта можно скачать две версии фреймворка: Bootstrap 3 или 4. Третья версия самая распространенная. Но я советую сразу разбираться с четвертой, так как в неё добавлены новые классы, структура и интересные фишки.
Сайт: GetBootstrap.
Skeleton
Небольшой фреймворк, включающий в себя всего лишь два файла: normalize.css — общий файл для сброса стилей, и skeleton.css со стилями. Стилей немного, это 12-колоночная сетка и основные CSS-правила — типографика, кнопки, формы. Так же, как и в Bootstrap, в Skeleton используется подход mobile-first.
Skeleton — простой и легкий, мне он понравился даже больше, чем Bootstrap.
Если нужно быстро сверстать страницу и не путаться в элементах, то советую Skeleton: GetSkeleton.
Milligram
Легкий фреймворк, похожий на предыдущий. Чистый код, минимальное оформление — удобный для начинающих разработчиков. Используются основные компоненты — типографика, кнопки, цитаты. Сетка в Milligram отличается от других, потому что строится на флексбоксах — особых контейнерах, которые выстраиваются в строку или столбик, а пространство между ними заполняется разными способами.
Посмотреть и изучить: Milligram.
Semantic UI
Позволяет быстро верстать красивые сайты и обладает полностью адаптивным дизайном. Все элементы Semantic UI хорошо подобраны и выглядят превосходно: красивая анимация, формы, селекторы.
.png)
Элементы Semantic UI
Полная версия много весит, поэтому ненужные функции нужно будет удалить. В освоении этот фреймворк сложнее, чем Bootstrap, но стоит того, чтобы с ним познакомиться. Если Bootstrap предлагает базовые элементы, то в Semantic UI уже есть законченные блоки с продуманным дизайном, которые сразу можно использовать для верстки страницы.
Сайт фреймворка: Semantic-UI.
Foundation Zurb
Один из популярных фреймворков. Так же, как и Bootstrap, Foundation — это набор компонентов, с помощью которых собирается готовый сайт. Фреймворк также построен по концепции mobile-first, обладает 12-колоночной сеткой и подстраивается под размер экрана. Интересные стили и кнопки, ограничений в стилизации почти нет. На сайте приведены примеры готового кода, примеры основных элементов и шаблоны сайтов, которые можно переделать. На сайте можно сделать сборку Foundation с теми элементами, которые нужны, удалив лишние. Это сократит вес и уменьшит время загрузки.
.png)
Сайт Барака Обамы использует Foundation Zurb
Чтобы оживить страницу, которую верстаете, можно использовать дополнительную библиотеку с переходами и анимацией — Motion UI.
Foundation — сложный в освоении, поэтому новичкам в верстке не подойдет.
Скачать фреймворк и посмотреть документацию можно на сайте ZurbFoundation.
Заключение
При правильном выборе и использовании фреймворка, он экономит время на разработку макета и верстку страницы, облегчает работу верстальщику любого уровня. Сложности появляются, когда нужно отойти от структуры, которую неудобно менять.
Читать ещё: «Как работает Flexbox: объясняем на гифках»
CSS-фреймворк идеально подойдет для того, чтобы быстро сверстать страницу и выложить в сеть. А если нужен какой-то сложный и выделяющийся сайт, возможно, стоит взять только сетку от одного из фреймворков, а оформление для всех классов написать с нуля.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Полный текст статьи читайте на Нетология
