CSS-фреймворки для верстальщиков
Глеб Летушов, редактор-фрилансер, написал статью специально для блога Нетологии о том, что такое СSS-фреймворки, как они помогают в создании сайта и нужно ли их использовать.
Обучение в онлайн-университете: курс «Старт в программировании»
Что такое фреймворк
Фреймворк — это платформа, на которой строится программа. Понятие фреймворка используется во многих языках программирования.
Когда мы говорим о верстке, то имеем в виду фреймворк как готовую библиотеку CSS и JavaScript файлов, которые используются в оформлении HTML-страницы. С помощью такого набора сверстать страницу намного легче, потому что не нужно разбираться с адаптивностью и думать о том, как страница будет выглядеть на мобильных экранах и планшетах. Также не нужно подбирать размеры шрифтов, кнопок и форм, потому что почти во всех фреймворках эти параметры уже настроены. Остается лишь подключить его и собрать страницу из готовых блоков.
Кому пригодятся CSS-фреймворки
Фреймворки помогают упростить и ускорить многие вещи, облегчают жизнь начинающим верстальщикам, программистам без опыта в верстке и тем, кто хочет быстро создать HTML-страницу, не изучая всех правил HTML.
Популярные фреймворки создаются и тщательно тестируются опытными разработчиками и сообществом пользователей. Поэтому сайт, созданный с помощью фреймворка, скорее всего, будет хорошо выглядеть в разных браузерах и устройствах.
Какой фреймворк выбрать
Изменение стандартного оформления во фреймворке занимает достаточно много времени. Поэтому лучше сразу выбрать более подходящий, чтобы потом не пришлось менять предустановленное оформление.
Я расскажу о тех решениях, с которыми знаком и которые мне приглянулись.
Bootstrap
Один из самых используемых фреймворков. Построен по принципу mobile-first, то есть хорошо выглядит на мобильных телефонах.
В этот фреймворк входит сетка из двенадцати колонок, шрифты, формы, кнопки, JS-скрипты. Их оформление уже прописано в CSS-классах, поэтому достаточно только подключить стили и сделать разметку.
Верстать сайт с помощью Бутстрап способны даже начинающие разработчики. Можно быстро создать прототип и макет с необходимой функциональностью в HTML. Правда, в стандартном оформлении сайты выглядят одинаково, но стили для классов можно изменить со временем.
Bootstrap хорошо работает на разных устройствах и отображается в современных браузерах.
.png)
Страница блога, созданная с помощью Bootstrap
Полная сборка Bootstrap содержит описания множества стилей для веб-элементов, шрифтов, сетки. Если еще неизвестно, каким будет сайт, лучше пользоваться полной сборкой.
Если нужны какие-то определенные элементы оформления, например, сетка, то на сайте можно скомпилировать собственную сборку. Просто выбрать нужные элементы, а остальное удалить. Благодаря этому можно сократить вес фреймворка и увеличить скорость загрузки сайта.
С сайта можно скачать две версии фреймворка: Bootstrap 3 или 4. Третья версия самая распространенная. Но я советую сразу разбираться с четвертой, так как в неё добавлены новые классы, структура и интересные фишки.
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 уже есть законченные блоки с продуманным дизайном, которые сразу можно использовать для верстки страницы.
Foundation Zurb
Один из популярных фреймворков. Так же, как и Bootstrap, Foundation — это набор компонентов, с помощью которых собирается готовый сайт. Фреймворк также построен по концепции mobile-first, обладает 12-колоночной сеткой и подстраивается под размер экрана. Интересные стили и кнопки, ограничений в стилизации почти нет. На сайте приведены примеры готового кода, примеры основных элементов и шаблоны сайтов, которые можно переделать. На сайте можно сделать сборку Foundation с теми элементами, которые нужны, удалив лишние. Это сократит вес и уменьшит время загрузки.
.png)
Сайт Барака Обамы использует Foundation Zurb
Чтобы оживить страницу, которую верстаете, можно использовать дополнительную библиотеку с переходами и анимацией — Motion UI.
Foundation — сложный в освоении, поэтому новичкам в верстке не подойдет.
Скачать фреймворк и посмотреть документацию можно на сайте ZurbFoundation.
Заключение
При правильном выборе и использовании фреймворка, он экономит время на разработку макета и верстку страницы, облегчает работу верстальщику любого уровня. Сложности появляются, когда нужно отойти от структуры, которую неудобно менять.
CSS-фреймворк идеально подойдет для того, чтобы быстро сверстать страницу и выложить в сеть. А если нужен какой-то сложный и выделяющийся сайт, возможно, стоит взять только сетку от одного из фреймворков, а оформление для всех классов написать с нуля.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
О CSS-препроцессорах и фреймворках: зачем они нужны и с чем их едят
Сегодня поговорим о том, как можно сделать работу с CSS проще и удобнее, подключив препроцессоры и фреймворки.
Немного о CSS
CSS – это язык разметки, который позволяет настроить визуальное оформление веб-страницы или приложения, а также расположить объекты на экране в определенном порядке и плоскости. Это основной механизм, отвечающий за то, как выглядят сайты и программы, построенные на базе веб-технологий.
Но этот язык имеет ряд недостатков, а также недостаточно функционален, чтобы эффективно решать задачи программистов. Поэтому разработчики придумали несколько вариантов надстроек, модифицирующих CSS.
Что такое препроцессор и зачем он нужен?
CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.
По сути, препроцессоры – это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).
Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. А в некоторых случаях, чтобы добавить в CSS функции, по умолчанию отсутствующие в языке.
Что такое фреймворки и для чего они нужны?
CSS-фреймворк – это набор технологий, включающий в себя усовершенствованный синтаксис CSS, дополнительные функции, а также ряд шаблонов для быстрой развертки сайта без необходимости все элементы стиля прописывать самостоятельно.
Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:
Ускорить процесс разработки, за счет уничтожения привычных для CSS сложностей с визуальным оформлением страниц.
Добавить в сайт или приложение кроссбраузерность.
Вынудить команду разработчиков следовать определенным правилам дизайна.
Корректно выровнять все элементы на странице.
Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.
Особенности препроцессоров
У каждого препроцессора есть свой набор возможностей, но мы рассмотрим общие для всех них функции, чтобы проверить, на что способны эти расширения для CSS.
Примеры показаны на базе препроцессора LESS, но в других синтаксис отличается не принципиально.
Переменные
Да, они есть и в «чистом» CSS, но реализованы менее удобно.
Вложенность
Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML.
Mixins
Миксины – это шаблоны с готовым CSS-кодом, легко подставляемые к любому из элементов сайта или приложения. Достаточно вписать их название в блок оформления селектора. Миксины отчасти похожи на функции, так как умеют принимать аргументы при использовании.
Математические выражения
С помощью препроцессоров можно добавлять на сайт более продвинутые, динамически меняющиеся стили, используя привычные математические операторы и функции.
If/Else-выражения
В некоторых препроцессорах поддерживаются логические операции.
Функции
У всех препроцессоров есть набор функций, с помощью которых можно оперировать стилями. Некоторые позволяют менять цвета объектов, некоторые добавляют в них анимацию и т.п.
И это только часть возможностей препроцессоров. Подробнее ознакомиться с ними можно в официальной документации каждого.
4 популярных CSS-препроцессора
Есть несколько распространенных дополнений к CSS, используемых чаще остальных:
SASS – самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Требует более четко прописывать визуальные стили и все же заставляет вводить больше кода, чем хотелось бы. Но при этом SASS обладает функциями, недоступными у конкурентов, поэтому он и лежит в основе многих фреймворков.
LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов. 
Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.
PostCSS – мощный препроцессор с автоматической проверкой на ошибки, подстановкой нужных префиксов и генерацией названий для селекторов.
Краткий обзор лучших CSS-фреймворков
Фреймворки не просто модифицируют синтаксис и добавляют пару дополнительных опций. Здесь несколько иные масштабы, и с ними нередко полностью меняется подход к оформлению страниц.
Bootstrap
Самый популярный CSS-фреймворк, который на слуху, наверное, у каждого, кто хоть немного изучал веб-разработку. Это крупный проект, представляющий собой целый набор предустановленных компонентов для быстрой развертки собственного сайта на основе существующих шаблонов.
Прелесть Bootstrap заключается в том, что вам не нужно использовать конструкторы в духе WordPress и самому разбираться с визуальным оформлением сайта. Используя Bootstrap, можно получить лучшее из двух миров, продолжая самостоятельно писать логику приложения и не тратить время на его оформление.
Правда, нужно понимать, что Bootstrap, как и любой другой набор шаблонов, наверняка включает в себя десятки компонентов, которые вам не нужны. С их наличием придется смириться.
Foundation
Более громоздкий и универсальный продукт, подходящий для оформления не только сайтов и приложений, но и почтовых рассылок. Foundation предлагает семантическую верстку, чтобы упростить восприятие кода. Все компоненты, встроенные во фреймворк, изначально создавались для мобильных устройств, поэтому проблем с адаптацией под различные разрешения экранов не возникает.
Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.
И что важно, в Foundation заранее учтена адаптация веб-сайтов и приложений под требования людей с ограниченными возможностями.
Bulma
Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы.
Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS.
В Bulma, как и в Bootstrap, есть набор готовых визуальных решений. Можно выбрать любое и слегка адаптировать под свой ресурс, не тратя дни на создание собственных компонентов.
TailwindCSS
Стремительно набирающая обороты технология, практически исключающая CSS-синтаксис из приложений и сайтов. Благодаря TailwindCSS можно прописывать стили прямо в HTML-классы. Да, это похоже на то, как работают inline-стили, но не совсем, потому что TailwindCSS, помимо прочего, предлагает собственный синтаксис.
Например, вместо background-color: white используется сокращение bg-white. И таких вариаций много. Благодаря сокращенном директивам удается достичь опрятного вида при прописывании стилей прямо в HTML-классы.
А сами директивы оформляются в отдельном конфигурационном файле, где можно заменить значение каждой из них. Например, создать переменную bgw и использовать ее для окраски фона в белый цвет.
TailwindCSS избавляет от необходимости генерировать дополнительные файлы и возиться с селекторами. При этом не лишает свободы творчества и не сказывается на производительности приложения.
Skeleton
Минималистичный CSS-фреймворк, основная цель которого быстро собрать стильный сайт без необходимости мудрить с визуальным оформлением.
Skeleton по умолчанию адаптивный и идеально выглядит на экране любого размера. Но какой-то роскоши с точки зрения дизайна ожидать не стоит. Разработчики сделали все, чтобы предельно упростить стили в Skeleton. Здесь всего три цвета: белый, серый и голубой. Один вариант оформления списков, один вариант оформления кнопок.
Как и другие фреймворки, Skeleton поддерживает семантическую верстку. Вместо конкретных значений в духе grid-column-start: 3 можно написать grid-third, и объект расположится в нужном месте.
Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS.
Похожий на Skeleton фреймворк, в основе которого лежит та же идея – создать минималистичный плацдарм для всего визуального стиля сайта или приложения. Принципиальная разница заключается в том, что Skeleton навязывает свой дизайн, а Pure – предлагает создать свой.
В Pure уже прописана большая часть необходимых свойств, отвечающих за поведение, размеры и расположение объектов. Но часть решений все же остается за разработчиком. Например, нужно будет самостоятельно выбрать цвет, степень прозрачности, процент закругленности граней и т.п.
Pure отлично подходит в качестве стартового варианта, потому что не вынуждает переписывать уже готовый CSS, а действительно работает как шаблон и предлагает быстро создать что-то свое.
Вместо заключения
Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.
Либо комбинируйте эти технологии между собой, ведь это значительно упростит работу с CSS, и вы уже не сможете вернуться к классическому варианту разметки.
Список лучших CSS фреймворков для фронтенд-разработки
Мечтаете быстро создавать прототипы приложений? Упростите себе задачу с помощью этих CSS фреймворков. И не придётся беспокоится о стилях.
Зачем использовать CSS фреймворки при написании пользовательского CSS-кода? Время – ограниченный ресурс, поэтому тратьте его на создание функциональности. Улучшите ли производительность и эстетику, когда создадите CSS с нуля? Абсолютно! Но когда нет творческих способностей в области визуализации и огромного опыта работы с CSS, возможно, эффективнее передать эту работу профессионалу.
Или использовать крутой фреймворк для создания клиентского интерфейса. Вот полный список самых знаменитых и используемых CSS фреймворков.
Ant Design
Назначение: «Ant Design упрощает проектирование и облегчает создание прототипов для всех участников проекта. Тем самым повышает эффективность разработки фоновых приложений и продуктов». – веб-страница Ant Design.
Иллюстрация, сделанная с помощью Ant Design
Ant Design, язык дизайна для фоновых приложений, совершенствует команда Ant UED. Создатели стремятся к унификации спецификаций UI для внутренних фоновых проектов, снижению затрат на различия в дизайне и высвобождению ресурсов, обычно затрачиваемых на проектирование и внешнюю разработку.
Особенности
Поддержка среды
Foundation
Назначение: «Foundation – семейство передовых адаптивных фронтенд фреймворков. Ускоряет переход от прототипирования к производству. Создавайте сайты или приложения, которые будут работать на любом устройстве, с помощью Foundation. Фреймворк включает полностью настраиваемую отзывчивую сетку, большую библиотеку Sass примесей, часто используемые плагины JavaScript и полную доступность поддержки». – с веб-страницы Foundation.
Иллюстрация, сделанная с помощью Foundation 
Выпуски Foundation
Особенности
Bulma
Назначение: Bulma – CSS фреймворк. По этой причине на выходе единственный файл CSS: bulma.css.
Логотип Bulma
Используйте представленный выше файл из коробки или загрузите исходные файлы Sass для настройки переменных.
JavaScript здесь не прилагается. Люди, как правило, стремятся использовать собственную реализацию JS (и уже написали такую). Bulma не зависит от среды: это слой стиля поверх логики.
Особенности
Spectre.css
Согласно веб-сайту, Spectre.css – «лёгкий, отзывчивый и современный CSS фреймворк для ускоренной и расширяемой разработки. Spectre предоставляет базовые стили для шрифтового оформления и элементов, адаптивную систему макетов на основе Flexbox, а также чистые компоненты и утилиты CSS».
spectre.css
Особенности
Tailwind CSS
Назначение: «Tailwind CSS – тонко настраиваемый низкоуровневый CSS фреймворк, который предоставляет все необходимые строительные блоки для создания персонализированного дизайна без лишней борьбы с переопределением раздражающих встроенных стилей». – с веб-страницы Tailwind CSS.
Снимок экрана домашней страницы Tailwind CSS
Особенности
Shoelace
Назначение: «Shoelace.css – лёгкая, прогрессивная библиотека CSS, созданная с использованием синтаксиса будущего CSS. Простая в использовании и настраиваемая. Пользователям Bootstrap эта библиотека покажется знакомой, но освежающей. Вы можете использовать Shoelace практически с любым браузером. Версия CDN отлично подходит для создания прототипов, но чтобы воспользоваться всеми преимуществами, придётся собрать Shoelace из исходного кода». – с веб-страницы Shoelace.
Логотип Shoelace
Особенности
Semantic UI
Назначение: «Semantic UI рассматривает слова и классы как взаимозаменяемые понятия. Классы используют синтаксис из естественных языков: отношение существительное-определение, порядок слов и множественность, чтобы интуитивно связать понятия. Получите те же преимущества, что и BEM или SMACSS, но без утомительности». – с веб-страницы Semantic UI.
Особенности
Skeleton
Назначение: «Skeleton стилизует только часть стандартных элементов HTML и включает в себя сетку, но этого часто предостаточно для начала работы. Используйте Skeleton, если приступаете к меньшему проекту или просто чувствуете, что вам не нужны все полезности более крупных CSS фреймворков». – с веб-страницы Skeleton.
Скриншот с сайта Skeleton
Особенности
Вы полюбите Skeleton за ускорение разработки и лёгкость настройки.
Tachyons
Назначение: «Tachyons – система дизайна для функционального CSS и людей. Быстро создавайте и проектируйте новый пользовательский интерфейс без написания CSS». – со страницы GitHub Tachyons.
Tachyons
«Системы проектирования ломаются при масштабировании (либо организации, либо продукта), потому что вводятся новые компоненты или варианты компонента. Такие модификации иногда – читайте: часто – остаются недокументированными, что приводит к дублированию, когда этот компонент или вариант необходим (и создаётся) снова. Даже когда компонент задокументированный, результативность этой процедуры часто означает десятки или сотни экземпляров для описания всех состояний либо вариантов. Такие системы, как Tachyons и подобные, иначе подходят к проблеме: вместо этого документируют и ограничивают *свойства* компонентов. (Приятно думать об этом как о «субатомном» дизайне.)
Затем вы создаёте компоненты путём составления субатомных компонентов (свойств). Вместо того, чтобы реализовать компонент и его варианты, вы получаете полный список субатомных компонентов «ингредиента». Эти субатомные компоненты объединяются тысячами способов для создания сотен компонентов. Свойства этих компонентов многочисленны, но ограничиваются набором допустимых значений (наши субатомные компоненты)». – Даниэль Иден, дизайнер Facebook.
Особенности
Material Design
Назначение: «Созданный и спроектированный Google, Material Design – дизайн-система, которая сочетает классические принципы эффективного дизайна вместе с инновациями и технологиями. Цель Google состоит в том, чтобы разработать систему дизайна, которая предоставляет единообразный опыт взаимодействия пользователя со всеми продуктами на любой платформе». – с веб-страницы Material Design.
Снимок экрана домашней страницы Material Design
