Что представляют собой css фреймворки
Есть много CSS-фреймворков, которые предлагают адаптивный дизайн.
Они бесплатны и просты в использовании.
Что такое CSS-фреймворк
CSS-фреймворк — это фреймворк (набор готовых стилей), созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т.д.). Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего css-файла, подключаются к проекту (добавляются в раздел <head> веб-страницы).
Преимущества использования CSS-фреймворков
- Позволяет верстальщику сайтов быстро и правильно создать HTML-макет.
- Вёрстка производится на базе слоёв, а не таблиц.
- Кроссбраузерность.
- Возможность использования генераторов кода и визуальных редакторов.
- Один стиль кода при работе в команде позволяет снизить число разногласий при разработке.
Использование W3.CSS
Отличным способом создания адаптивного дизайна является использование адаптивной таблицы стилей, например W3.CSS
W3.CSS позволяет легко создавать сайты, которые выглядят красиво в любом размере; настольный компьютер, ноутбук, планшет или телефон:
Измените размер страницы, чтобы увидеть адаптивность!
Лондон
Лондон - столица Англии.
Это самый густонаселенный город в Соединенном Королевстве, с населением более 13 миллионов человек.
Париж
Париж - столица Франции.
Агломерация Парижа является одним из крупнейших населенных пунктов в Европе с населением более 12 миллионов человек.
Токио
Токио - столица Японии.
Это центр Большого Токио, и самый густонаселенный мегаполис в мире.
Пример
<div w3-green">
<h1>W3Schools Демо</h1>
<p>Измените размер этой адаптивной веб-страницы!</p>
</div>
<div > <div > <h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div > <h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div > <h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
Чтобы узнать больше о W3.CSS, прочитайте W3.CSS Учебник на нашем сайте W3Schools на русском.
Bootstrap
Другой популярный фреймворк - Bootstrap, он использует HTML, CSS и jQuery для создания адаптивных веб-страниц.
Пример
Чтобы узнать больше о Bootstrap, перейдите на Bootstrap Учебник на нашем сайте W3Schools на русском.
Глеб Летушов, редактор-фрилансер, написал статью специально для блога Нетологии о том, что такое СSS-фреймворки, как они помогают в создании сайта и нужно ли их использовать.
Обучение в онлайн-университете: курс «Старт в программировании»
Что такое фреймворк
Фреймворк — это платформа, на которой строится программа. Понятие фреймворка используется во многих языках программирования.
Когда мы говорим о верстке, то имеем в виду фреймворк как готовую библиотеку CSS и JavaScript файлов, которые используются в оформлении HTML-страницы. С помощью такого набора сверстать страницу намного легче, потому что не нужно разбираться с адаптивностью и думать о том, как страница будет выглядеть на мобильных экранах и планшетах. Также не нужно подбирать размеры шрифтов, кнопок и форм, потому что почти во всех фреймворках эти параметры уже настроены. Остается лишь подключить его и собрать страницу из готовых блоков.
Кому пригодятся CSS-фреймворки
Фреймворки помогают упростить и ускорить многие вещи, облегчают жизнь начинающим верстальщикам, программистам без опыта в верстке и тем, кто хочет быстро создать HTML-страницу, не изучая всех правил HTML.
Популярные фреймворки создаются и тщательно тестируются опытными разработчиками и сообществом пользователей. Поэтому сайт, созданный с помощью фреймворка, скорее всего, будет хорошо выглядеть в разных браузерах и устройствах.
Какой фреймворк выбрать
Изменение стандартного оформления во фреймворке занимает достаточно много времени. Поэтому лучше сразу выбрать более подходящий, чтобы потом не пришлось менять предустановленное оформление.
Я расскажу о тех решениях, с которыми знаком и которые мне приглянулись.
Bootstrap
Один из самых используемых фреймворков. Построен по принципу mobile-first, то есть хорошо выглядит на мобильных телефонах.
В этот фреймворк входит сетка из двенадцати колонок, шрифты, формы, кнопки, JS-скрипты. Их оформление уже прописано в CSS-классах, поэтому достаточно только подключить стили и сделать разметку.
Верстать сайт с помощью Бутстрап способны даже начинающие разработчики. Можно быстро создать прототип и макет с необходимой функциональностью в HTML. Правда, в стандартном оформлении сайты выглядят одинаково, но стили для классов можно изменить со временем.
Bootstrap хорошо работает на разных устройствах и отображается в современных браузерах.
.jpg)
Полная сборка 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 хорошо подобраны и выглядят превосходно: красивая анимация, формы, селекторы.
.jpg)
Элементы Semantic UI
Полная версия много весит, поэтому ненужные функции нужно будет удалить. В освоении этот фреймворк сложнее, чем Bootstrap, но стоит того, чтобы с ним познакомиться. Если Bootstrap предлагает базовые элементы, то в Semantic UI уже есть законченные блоки с продуманным дизайном, которые сразу можно использовать для верстки страницы.
Foundation Zurb
Один из популярных фреймворков. Так же, как и Bootstrap, Foundation — это набор компонентов, с помощью которых собирается готовый сайт. Фреймворк также построен по концепции mobile-first, обладает 12-колоночной сеткой и подстраивается под размер экрана. Интересные стили и кнопки, ограничений в стилизации почти нет. На сайте приведены примеры готового кода, примеры основных элементов и шаблоны сайтов, которые можно переделать. На сайте можно сделать сборку Foundation с теми элементами, которые нужны, удалив лишние. Это сократит вес и уменьшит время загрузки.
.jpg)
Сайт Барака Обамы использует Foundation Zurb
Чтобы оживить страницу, которую верстаете, можно использовать дополнительную библиотеку с переходами и анимацией — Motion UI.
Foundation — сложный в освоении, поэтому новичкам в верстке не подойдет.
Заключение
При правильном выборе и использовании фреймворка, он экономит время на разработку макета и верстку страницы, облегчает работу верстальщику любого уровня. Сложности появляются, когда нужно отойти от структуры, которую неудобно менять.
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-фреймворков на основе живых примеров, как в TodoMVC для js решений.
В вводной статье Вы узнаете о фреймворках и библиотеках и об их различиях. Расскажу, на какие типы они делятся. Укажу планируемый список готовых решений для анализа.
Содержание
- Пролог
- Введение
- Различия между понятиями фреймворк и библиотека
- Типы решений по реализации пользовательских веб-интерфейсов
- Простой css-фреймворк
- Web-component
- Css-сетка
- Комплексный css-фреймворк
Введение
Ежедневно мир наполняется множеством идей и технологий, особенно в IT-секторе. Люди в нем спешно начинают переходить от одного новшества к другому, применяя его не по назначению.
Из-за перенасыщенности рынка готовыми решениями и нехватки информации о них усложняется выбор, и создается отрицательный эффект на производительность и качество продуктов.
При создании новой версии mr. Gefest'а нам не хватало информации о css-фреймворках. Нам нужно было узнать не только, какие там компоненты, но и как устроены они изнутри, получить их наиболее полное и корректное сравнение.
Вы, наверное, заметили, что уже существует не меньше 30 css-фреймворков с разным набором компонентов и архитектур. Разобраться во всем этом с первого раза непросто, да и со второго, и с третьего, и с.
Поэтому мы решили сделать сравнение css-фреймворков на живом примере, как в ToMVC. Это должно помочь веб-разработчикам быстро выбрать подходящее css-решение.
Работы много, поэтому сравнение я буду описывать на хабре постепенно — в виде цикла статей. Надеюсь, мой труд будет Вам полезен.
Различия в понятиях «фреймворк» и «библиотека».
Перед анализом решений необходимо рассмотреть два понятия: фреймворк и библиотека. На первый взгляд, они могут показаться одинаковыми, но это не так. Обратимся к их определениям в Википедии.
Фреймворк (неологизм от англ. framework — каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.
Библиотека (от англ. library) в программировании — сборник подпрограмм или объектов, используемых для разработки программного обеспечения (ПО).
Css-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).
Про различия между понятиями там написано:
"Фреймворк отличается от библиотеки тем, что библиотека может быть использована в программном продукте просто как набор подпрограмм близкой функциональности, не влияя на архитектуру программного продукта и не накладывая на неё никаких ограничений. В то время как каркас диктует правила построения архитектуры приложения, задавая на начальном этапе разработки поведение по умолчанию, каркас, который нужно будет расширять и изменять согласно указанным требованиям.".
- задает правила построения архитектуры программного кода;
- диктует принципы структурирования файлов;
- внутри себя имеет несколько библиотек.
Типы css-фреймворков/библиотек
- Простые css-фреймворки;
- Web-components;
- Css-сетки;
- Комплексные css-фреймворки.
Простые css-фреймворки
В них не используется javascript. Все их модули пишутся на css и html. Они легки, быстры и просты. Из-за отсутствия javascript-компонентов у простых css-фреймворков не достаточно некоторых функциональных возможностей.
- примитивы (типография, изображения и т.д.);
- сетку;
- кнопки;
- таблицы;
- элементы форм;
- меню;
- вспомогательные элементы.
-
; ; ; ; ; ; ; ; ; ; ; ; ; .
Web-components
Они основаны на новом механизме веб-компонентов.
Веб-компоненты — это комплекс стандартов, который добавляет в браузер технологию для удобной реализации ui-решений. Каждый такой элемент будет работать в своем личном DOM-дереве без перекрытия стилями основной страницы. Это одно из главных преимуществ web-components, так как позволяет поддерживать ему свойство инкапсуляции. Более подробно об этом я писал в группе проекта: Веб-компоненты.
Css-сетки
Большинство решений по реализации сетки имеет скромный набор возможностей и выполняет только одну задачу, поэтому она не входит в понятие фреймворков. Несмотря на это, мы все равно их проанализируем и сравним.
Комплексные css-фреймворки
Самые масштабные фреймворки. Обладают javascript и css+html модулями. Способны решить большинство задач по созданию web-UI.
- примитивы (типография, изображения и т.д.);
- сетки;
- диалоговые окна;
- разделители на страницы (пагинации) ;
- панели;
- шрифты с векторными иконками;
- карточки;
- списки данных;
- хлебные крошки;
- аккордеоны;
- кнопки;
- таблицы;
- элементы форм;
- меню;
- вспомогательные элементы;
- и многое другое.
-
; ; ; ; ; ; ; .
Заключение вводного материала
Вы узнали, что в it-отрасли существует множество css-фреймворков и библиотек, и трудно определить, что именно выбрать из них для решения конкретной задачи. Вследствие чего для упрощения этого процесса я собрался сделать для Вас их полноценный анализ и сравнение на живых примерах.
- Простые css-фреймворки;
- Web-components;
- Css-сетки;
- Комплексные css-фреймворки.
В следующих статья мы начнем с анализа конкретных css-фреймворков и библиотек (список может меняться). До новых встреч.
UPD 21.12.2015: благодаря oledje в комплексные css-фреймворки добавил Materialize и Material Design Lite.
UPD 22.12.2015: andrewiWD предложил Gridle и я его добавили в список css-сеток.
Создание красивых стилей убивает уйму времени. CSS фреймворки выполняют ту же задачу на лету. Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность.
Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы:
- сетка;
- иконки;
- таблицы;
- элементы форм и кнопок;
- типографика;
- интерфейсные паттерны, например, карточки и модальные окна;
- вспомогательные классы оформления элементов: отступы, цвета и т. д.
Можно начать работу над проектом, не тратя время на копирование шаблонного кода или написание с чистого листа. CSS фреймворк – фундамент системы стилей.
Зачем нужен фреймворк?
Чем сложнее приложение, тем больше оснований воспользоваться готовым инструментом. Фреймворк необходим в следующих случаях:
- Нужно быстро создать сайт. Кастомизировать компоненты проще, чем создавать с нуля.
- Если вы плохо знаете CSS. Берите готовые классы и наслаждайтесь стандартным, но элегантным и продуманным интерфейсом.
- Хотите протестировать дизайн-гипотезу. Создать прототип и проверить идею в деле.
Выбираем CSS фреймворк
Bootstrap
Популярнейшая библиотека компонентов. В 2018 году вышел Bootstrap 4. В нём ещё больше удобных утилит и модификаторов. Четвертая версия написана на SASS, так что можно использовать в разработке все преимущества препроцессоров.
Bootstrap – самый популярный CSS фреймворк
Главные фичи Bootstrap:
- Проработанная адаптивная сетка, основанная на Flex-модели, прошла испытание временем на всех возможных разрешениях. Решает большинство задач компоновки контента.
- На Bootstrap созданы тысячи шаблонов, тем и готовых компонентов. Можно собрать сайт, не написав ни строчки CSS-кода.
- Простота обучения. Очевидные концепции, подробная документация с примерами. Масса пособий для разработчиков с разной степенью погружения в тему.
- Готовый JavaScript для большинства интерактивных компонентов. Аккордеоны и карусели уже написаны за вас.
- Препроцессоры SASS и LESS.
Foundation
Foundation – вероятно, второй по распространенности CSS фреймворк. Утонченный и гибкий инструмент подойдёт для очень больших проектов. Им пользуются Facebook, eBay, Mozilla, Adobe, HP, Cisco и Disney.
Фреймворк также построен на препроцессоре SASS и имеет отличную JavaScript-составляющую. Кривая обучения по сравнению с Bootstrap более крутая, но есть и преимущества.
Foundation – идеальное решение для крупных проектов
Главные фичи Foundation:
- Адаптивная система сеток. В создании отзывчивого дизайна не уступает Bootstrap.
- Мощный email-фреймворк. Responsive-дизайн не только в веб-приложениях, но и в письмах. Никаких громоздких табличек – используйте Foundation for emails.
- Техническая поддержка. Компания-разработчик предлагает обучающие онлайн-тренинги и консультации по продукту. Увы, не бесплатно :(
- Простая кастомизация. Foundation гибок. Вы полностью контролируете интерфейс проекта.
- JavaScript-компоненты.
- Легкое создание анимаций.
- Вертикальный контроль разметки.
- Инструменты для разработчика.
- Препроцессор SASS.
Этот легковесный (3.8 Кб) CSS-фреймворк создан Yahoo в 2014 году. За легкость приходится платить универсальностью. Pure не предлагает богатую библиотеку компонентов – он сконцентрирован на лейаутах и меню. И конечно, ни капли JavaScript.
Pure.css – легкое решение для отзывчивых макетов
Главные фичи Pure.css:
- Крошечный размер.
- Чистый CSS – для встраивания нужен лишь один файл.
- Меню на любой вкус – вертикальные, горизонтальные, выпадающие.
- Удобная работа с элементами форм.
Bulma
Серьезный игрок на CSS рынке – Bulma. Гармоничная смесь качеств: маленький, отзывчивый, удобный и интуитивно понятный фреймворк. Написан на SASS, сетка на флексах, mobile-first подход, чистый CSS – JavaScript не прилагается.
Bulma – гармоничный CSS фреймворк
Главные фичи Bulma:
- Логичные и запоминающиеся имена классов.
- Чистый CSS – весь фреймворк в одном файле.
- Большое и дружелюбное сообщество, легко найти ответы на все вопросы.
- Просто изучать. Идеальный выбор для начинающих верстальщиков.
- Препроцессор SASS.
Semantic UI
Фреймворк, как следует из названия, трепетно относится к семантике интерфейсов. В Semantic UI 3000 настраиваемых переменных и 50 компонентов для создания сайтов.
Semantic UI – фреймворк для создания интерфейсов, понятных каждому
Главные фичи Semantic UI:
- Интеграция с React, Angular, Meteor, Ember и другими фронтенд-инструментами. Semantic UI легко ввести в существующий проект, не переписывая его заново.
- «Человекопонятный» HTML, упор на семантику веба, легко читаемые имена классов.
- Красивые макеты «из коробки». Даже некастомизированный фреймворк выглядит превосходно.
- Широкий простор для настройки.
- Интуитивно понятный JavaScript.
UI Kit
Еще один добротный CSS фреймворк с классическим набором полезностей и удобств. Небольшой размер, встроенные интерфейсные компоненты, поддержка препроцессоров, отзывчивая сетка и возможность кастомизации – всё это UI Kit.
UI Kit – чистый код и минимализм
Главные фичи UI Kit:
- Минимализм. Фреймворк поощряет создание чистого кода и ясных интерфейсов.
- Отличный набор компонентов из коробки с шаблонами использования, полезными методами и возможностями кастомизации.
- Препроцессоры LESS и SASS.
Materialize CSS
Детище Google появилось на свет в 2014 и до сих пор занимает лидирующие места в гонке фреймворков. Materialize CSS предлагает набор готовых к использованию компонентов в стиле Material Design.
Materialize CSS – современный фронтенд-фреймворк, основанный на Material Design
Главные фичи Materialize CSS:
- Material Design. Это по праву один из самых популярных языков дизайна в мире.
- Фреймворк использует сетку Bootstrap. Можно не разбираться в новых концепциях.
- Компоненты мобильных меню.
- Препроцессор SASS.
Milligram
Один из самых миниатюрных CSS фреймворков. В сжатом виде Milligram весит всего 2Кб. Но мал, да удал – в вашем распоряжении полный набор инструментов верстальщика.
Milligram – миниатюрный CSS фреймворк.
Главные фичи Milligram:
- Маленький размер файла.
- Классные темы.
Skeleton
Всего 400 строк кода – а на выходе мы имеем полноценный CSS фреймворк. Skeleton – это не только лейауты, как можно было бы подумать. Здесь весь стандартный набор: типографика, таблицы, формы, кнопки и т. д. Можно брать и создавать полноценный веб-сайт.
Skeleton – идеальный CSS фреймворк для небольших приложений
Главные фичи Skeleton:
- Только самая необходимая функциональность.
- Просто изучить.
Tailwind CSS
Низкоуровневый CSS фреймворк, открыты все возможности кастомизации. Tailwind CSS подходит для нестандартных дизайн-решений. Если вы имеете представление о концепции атомарного CSS, это именно то, что вам нужно. Фреймворк написан на PostCSS и конфигурируется на JS.
Tailwind CSS – низкоуровневый фреймворк с множеством утилитарных классов
Главные фичи Tailwind CSS:
- Множество утилитарных классов. Простая кастомизация элементов.
- Набор адаптивных опций.
Spectre
Spectre – классический компонентный CSS-фреймворк с элегантным дефолтным оформлением.
Spectre – элегантный CSS-фреймворк
- Чистый CSS, без JavaScript-кода.
- Препроцессор SASS.
Base – компактный и легкий, но довольно мощный фреймворк, который может стать надежным фундаментом для ваших проектов.
Base – надежный CSS-фундамент для вашего сайта
Главные фичи Base:
- Основан на последней версии Normalize.css.
- Разбит на независимые друг от друга модули.
Picnic CSS
Небольшая библиотека статических и интерактивных компонентов. Picnic включает в себя сетку, формы, табы, всплывающие подсказки, модальные элементы и т. п.
Picnic – легкий CSS фреймворк с симпатичным дизайном
Главные фичи Picnic CSS:
- Симпатичный дефолтный дизайн.
- Настраиваемые переменные.
- Препроцессор Sass.
Mustard UI
Ищете CSS фреймворк для новичков? Вы его нашли. Опенсорсный легкий Mustard создан специально для начинающих разработчиков.
Mustard UI – CSS фреймворк для начинающих верстальщиков
Главные фичи Mustard UI:
- Отдельные модули. Можно работать только с компонентами, которые действительно нужны.
- Отличная документация.
- Маленький размер.
Dead Simple Grid
Однозначный чемпион в номинации Самый крохотный CSS фреймворк. Dead Simple Grid – это, по большому счету, и не фреймворк вовсе. Весит всего 250 байт(!) и состоит лишь из двух классов. Все, что умеет Dead Simple Grid, – строить сетки, но иногда только это вам и требуется.
Dead Simple Grid – убийственно простой инструмент для построения сеток
Главные фичи Dead Simple Grid:
- Элементарная структура. Вряд ли вам вообще потребуется документация.
- Адаптивные колонки и фиксированные отступы.
- Поддержка бесконечной вложенности.
Бонус
В качестве награды за прочтение еще 3 интересных CSS библиотеки, которые могут вам пригодиться:
Как сделать выбор?
CSS фреймворки предлагают много готового кода, уже проверенного в различных браузерах и на разных разрешениях, чем здорово экономят время. При выборе нужно задаваться не вопросом «какой из этих инструментов лучше?», а «какой из них лучше подходит для моего проекта?».
Основные значащие факторы:
- Размер файлов фреймворка или библиотеки.
- Необходимый набор компонентов.
- Наличие или отсутствие JavaScript-сопровождения.
- Поддержка препроцессоров.
- Концептуальный подход.
Разобравшись в своих потребностях, вы без труда подберёте CSS фреймворк. Возможно, даже из нашего списка.
Читайте также: