Что представляют собой css фреймворки

Обновлено: 06.07.2024

Есть много 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 хорошо работает на разных устройствах и отображается в современных браузерах.

CSS-фреймворки для верстальщиков

Полная сборка 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 хорошо подобраны и выглядят превосходно: красивая анимация, формы, селекторы.

CSS-фреймворки для верстальщиков

Элементы Semantic UI

Полная версия много весит, поэтому ненужные функции нужно будет удалить. В освоении этот фреймворк сложнее, чем Bootstrap, но стоит того, чтобы с ним познакомиться. Если Bootstrap предлагает базовые элементы, то в Semantic UI уже есть законченные блоки с продуманным дизайном, которые сразу можно использовать для верстки страницы.

Foundation Zurb

Один из популярных фреймворков. Так же, как и Bootstrap, Foundation — это набор компонентов, с помощью которых собирается готовый сайт. Фреймворк также построен по концепции mobile-first, обладает 12-колоночной сеткой и подстраивается под размер экрана. Интересные стили и кнопки, ограничений в стилизации почти нет. На сайте приведены примеры готового кода, примеры основных элементов и шаблоны сайтов, которые можно переделать. На сайте можно сделать сборку Foundation с теми элементами, которые нужны, удалив лишние. Это сократит вес и уменьшит время загрузки.

CSS-фреймворки для верстальщиков

Сайт Барака Обамы использует Foundation Zurb

Чтобы оживить страницу, которую верстаете, можно использовать дополнительную библиотеку с переходами и анимацией — Motion UI.

Foundation — сложный в освоении, поэтому новичкам в верстке не подойдет.

Заключение

При правильном выборе и использовании фреймворка, он экономит время на разработку макета и верстку страницы, облегчает работу верстальщику любого уровня. Сложности появляются, когда нужно отойти от структуры, которую неудобно менять.

CSS-фреймворк идеально подойдет для того, чтобы быстро сверстать страницу и выложить в сеть. А если нужен какой-то сложный и выделяющийся сайт, возможно, стоит взять только сетку от одного из фреймворков, а оформление для всех классов написать с нуля.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

О CSS-препроцессорах и фреймворках

Сегодня поговорим о том, как можно сделать работу с CSS проще и удобнее, подключив препроцессоры и фреймворки.

Немного о CSS

CSS – это язык разметки, который позволяет настроить визуальное оформление веб-страницы или приложения, а также расположить объекты на экране в определенном порядке и плоскости. Это основной механизм, отвечающий за то, как выглядят сайты и программы, построенные на базе веб-технологий.

Но этот язык имеет ряд недостатков, а также недостаточно функционален, чтобы эффективно решать задачи программистов. Поэтому разработчики придумали несколько вариантов надстроек, модифицирующих CSS.

Что такое препроцессор и зачем он нужен?

CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.

По сути, препроцессоры – это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).

PostCSS

Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. А в некоторых случаях, чтобы добавить в CSS функции, по умолчанию отсутствующие в языке.

Что такое фреймворки и для чего они нужны?

CSS-фреймворк – это набор технологий, включающий в себя усовершенствованный синтаксис CSS, дополнительные функции, а также ряд шаблонов для быстрой развертки сайта без необходимости все элементы стиля прописывать самостоятельно.

Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:

Ускорить процесс разработки, за счет уничтожения привычных для CSS сложностей с визуальным оформлением страниц.

Добавить в сайт или приложение кроссбраузерность.

Вынудить команду разработчиков следовать определенным правилам дизайна.

Корректно выровнять все элементы на странице.

Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.

Особенности препроцессоров

У каждого препроцессора есть свой набор возможностей, но мы рассмотрим общие для всех них функции, чтобы проверить, на что способны эти расширения для CSS.

Примеры показаны на базе препроцессора LESS, но в других синтаксис отличается не принципиально.

Переменные

Да, они есть и в «чистом» CSS, но реализованы менее удобно.

Вложенность

Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML.

Mixins

Миксины – это шаблоны с готовым CSS-кодом, легко подставляемые к любому из элементов сайта или приложения. Достаточно вписать их название в блок оформления селектора. Миксины отчасти похожи на функции, так как умеют принимать аргументы при использовании.

Математические выражения

С помощью препроцессоров можно добавлять на сайт более продвинутые, динамически меняющиеся стили, используя привычные математические операторы и функции.

If/Else-выражения

В некоторых препроцессорах поддерживаются логические операции.

Функции

У всех препроцессоров есть набор функций, с помощью которых можно оперировать стилями. Некоторые позволяют менять цвета объектов, некоторые добавляют в них анимацию и т.п.

И это только часть возможностей препроцессоров. Подробнее ознакомиться с ними можно в официальной документации каждого.

4 популярных CSS-препроцессора

Есть несколько распространенных дополнений к CSS, используемых чаще остальных:

SASS – самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Требует более четко прописывать визуальные стили и все же заставляет вводить больше кода, чем хотелось бы. Но при этом SASS обладает функциями, недоступными у конкурентов, поэтому он и лежит в основе многих фреймворков.

Главная страница LESS

LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов.

Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.

PostCSS – мощный препроцессор с автоматической проверкой на ошибки, подстановкой нужных префиксов и генерацией названий для селекторов.

Краткий обзор лучших CSS-фреймворков

Фреймворки не просто модифицируют синтаксис и добавляют пару дополнительных опций. Здесь несколько иные масштабы, и с ними нередко полностью меняется подход к оформлению страниц.

Bootstrap

Самый популярный CSS-фреймворк, который на слуху, наверное, у каждого, кто хоть немного изучал веб-разработку. Это крупный проект, представляющий собой целый набор предустановленных компонентов для быстрой развертки собственного сайта на основе существующих шаблонов.

Прелесть Bootstrap заключается в том, что вам не нужно использовать конструкторы в духе WordPress и самому разбираться с визуальным оформлением сайта. Используя Bootstrap, можно получить лучшее из двух миров, продолжая самостоятельно писать логику приложения и не тратить время на его оформление.

Стили оформления сайтов на базе Bootstrap

Правда, нужно понимать, что Bootstrap, как и любой другой набор шаблонов, наверняка включает в себя десятки компонентов, которые вам не нужны. С их наличием придется смириться.

Foundation

Более громоздкий и универсальный продукт, подходящий для оформления не только сайтов и приложений, но и почтовых рассылок. Foundation предлагает семантическую верстку, чтобы упростить восприятие кода. Все компоненты, встроенные во фреймворк, изначально создавались для мобильных устройств, поэтому проблем с адаптацией под различные разрешения экранов не возникает.

Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.

И что важно, в Foundation заранее учтена адаптация веб-сайтов и приложений под требования людей с ограниченными возможностями.

Bulma

Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы.

Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS.

Примеры сайтов на Bulma

В 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, и объект расположится в нужном месте.

Кнопки в стилистике Skeleton

Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS.

Похожий на Skeleton фреймворк, в основе которого лежит та же идея – создать минималистичный плацдарм для всего визуального стиля сайта или приложения. Принципиальная разница заключается в том, что Skeleton навязывает свой дизайн, а Pure – предлагает создать свой.

В Pure уже прописана большая часть необходимых свойств, отвечающих за поведение, размеры и расположение объектов. Но часть решений все же остается за разработчиком. Например, нужно будет самостоятельно выбрать цвет, степень прозрачности, процент закругленности граней и т.п.

Pure отлично подходит в качестве стартового варианта, потому что не вынуждает переписывать уже готовый CSS, а действительно работает как шаблон и предлагает быстро создать что-то свое.

Вместо заключения

Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.

Либо комбинируйте эти технологии между собой, ведь это значительно упростит работу с CSS, и вы уже не сможете вернуться к классическому варианту разметки.

сравнение 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 – самый популярный CSS фреймворк

    Главные фичи Bootstrap:

    • Проработанная адаптивная сетка, основанная на Flex-модели, прошла испытание временем на всех возможных разрешениях. Решает большинство задач компоновки контента.
    • На Bootstrap созданы тысячи шаблонов, тем и готовых компонентов. Можно собрать сайт, не написав ни строчки CSS-кода.
    • Простота обучения. Очевидные концепции, подробная документация с примерами. Масса пособий для разработчиков с разной степенью погружения в тему.
    • Готовый JavaScript для большинства интерактивных компонентов. Аккордеоны и карусели уже написаны за вас.
    • Препроцессоры SASS и LESS.

    Foundation

    Foundation – вероятно, второй по распространенности CSS фреймворк. Утонченный и гибкий инструмент подойдёт для очень больших проектов. Им пользуются Facebook, eBay, Mozilla, Adobe, HP, Cisco и Disney.

    Фреймворк также построен на препроцессоре SASS и имеет отличную JavaScript-составляющую. Кривая обучения по сравнению с Bootstrap более крутая, но есть и преимущества.

    Foundation – идеальное решение для крупных проектов

    Foundation – идеальное решение для крупных проектов

    Главные фичи Foundation:

    • Адаптивная система сеток. В создании отзывчивого дизайна не уступает Bootstrap.
    • Мощный email-фреймворк. Responsive-дизайн не только в веб-приложениях, но и в письмах. Никаких громоздких табличек – используйте Foundation for emails.
    • Техническая поддержка. Компания-разработчик предлагает обучающие онлайн-тренинги и консультации по продукту. Увы, не бесплатно :(
    • Простая кастомизация. Foundation гибок. Вы полностью контролируете интерфейс проекта.
    • JavaScript-компоненты.
    • Легкое создание анимаций.
    • Вертикальный контроль разметки.
    • Инструменты для разработчика.
    • Препроцессор SASS.

    Этот легковесный (3.8 Кб) CSS-фреймворк создан Yahoo в 2014 году. За легкость приходится платить универсальностью. Pure не предлагает богатую библиотеку компонентов – он сконцентрирован на лейаутах и меню. И конечно, ни капли JavaScript.

    Pure.css – легкое решение для отзывчивых макетов

    Pure.css – легкое решение для отзывчивых макетов

    Главные фичи Pure.css:

    • Крошечный размер.
    • Чистый CSS – для встраивания нужен лишь один файл.
    • Меню на любой вкус – вертикальные, горизонтальные, выпадающие.
    • Удобная работа с элементами форм.

    Bulma

    Серьезный игрок на CSS рынке – Bulma. Гармоничная смесь качеств: маленький, отзывчивый, удобный и интуитивно понятный фреймворк. Написан на SASS, сетка на флексах, mobile-first подход, чистый CSS – JavaScript не прилагается.

    Bulma – гармоничный CSS фреймворк

    Bulma – гармоничный CSS фреймворк

    Главные фичи Bulma:

    • Логичные и запоминающиеся имена классов.
    • Чистый CSS – весь фреймворк в одном файле.
    • Большое и дружелюбное сообщество, легко найти ответы на все вопросы.
    • Просто изучать. Идеальный выбор для начинающих верстальщиков.
    • Препроцессор SASS.

    Semantic UI

    Фреймворк, как следует из названия, трепетно относится к семантике интерфейсов. В Semantic UI 3000 настраиваемых переменных и 50 компонентов для создания сайтов.

    Semantic UI – фреймворк для создания интерфейсов, понятных каждому

    Semantic UI – фреймворк для создания интерфейсов, понятных каждому

    Главные фичи Semantic UI:

    • Интеграция с React, Angular, Meteor, Ember и другими фронтенд-инструментами. Semantic UI легко ввести в существующий проект, не переписывая его заново.
    • «Человекопонятный» HTML, упор на семантику веба, легко читаемые имена классов.
    • Красивые макеты «из коробки». Даже некастомизированный фреймворк выглядит превосходно.
    • Широкий простор для настройки.
    • Интуитивно понятный JavaScript.

    UI Kit

    Еще один добротный CSS фреймворк с классическим набором полезностей и удобств. Небольшой размер, встроенные интерфейсные компоненты, поддержка препроцессоров, отзывчивая сетка и возможность кастомизации – всё это UI Kit.

    UI Kit – чистый код и минимализм

    UI Kit – чистый код и минимализм

    Главные фичи UI Kit:

    • Минимализм. Фреймворк поощряет создание чистого кода и ясных интерфейсов.
    • Отличный набор компонентов из коробки с шаблонами использования, полезными методами и возможностями кастомизации.
    • Препроцессоры LESS и SASS.

    Materialize CSS

    Детище Google появилось на свет в 2014 и до сих пор занимает лидирующие места в гонке фреймворков. Materialize CSS предлагает набор готовых к использованию компонентов в стиле Material Design.

    Materialize CSS – современный фронтенд-фреймворк, основанный на Material Design

    Materialize CSS – современный фронтенд-фреймворк, основанный на Material Design

    Главные фичи Materialize CSS:

    • Material Design. Это по праву один из самых популярных языков дизайна в мире.
    • Фреймворк использует сетку Bootstrap. Можно не разбираться в новых концепциях.
    • Компоненты мобильных меню.
    • Препроцессор SASS.

    Milligram

    Один из самых миниатюрных CSS фреймворков. В сжатом виде Milligram весит всего 2Кб. Но мал, да удал – в вашем распоряжении полный набор инструментов верстальщика.

    Milligram – миниатюрный CSS фреймворк.

    Milligram – миниатюрный CSS фреймворк.

    Главные фичи Milligram:

    • Маленький размер файла.
    • Классные темы.

    Skeleton

    Всего 400 строк кода – а на выходе мы имеем полноценный CSS фреймворк. Skeleton – это не только лейауты, как можно было бы подумать. Здесь весь стандартный набор: типографика, таблицы, формы, кнопки и т. д. Можно брать и создавать полноценный веб-сайт.

    Skeleton – идеальный CSS фреймворк для небольших приложений

    Skeleton – идеальный CSS фреймворк для небольших приложений

    Главные фичи Skeleton:

    • Только самая необходимая функциональность.
    • Просто изучить.

    Tailwind CSS

    Низкоуровневый CSS фреймворк, открыты все возможности кастомизации. Tailwind CSS подходит для нестандартных дизайн-решений. Если вы имеете представление о концепции атомарного CSS, это именно то, что вам нужно. Фреймворк написан на PostCSS и конфигурируется на JS.

    Tailwind CSS – низкоуровневый фреймворк с множеством утилитарных классов

    Tailwind CSS – низкоуровневый фреймворк с множеством утилитарных классов

    Главные фичи Tailwind CSS:

    • Множество утилитарных классов. Простая кастомизация элементов.
    • Набор адаптивных опций.

    Spectre

    Spectre – классический компонентный CSS-фреймворк с элегантным дефолтным оформлением.

    Spectre – элегантный CSS-фреймворк

    Spectre – элегантный CSS-фреймворк

    • Чистый CSS, без JavaScript-кода.
    • Препроцессор SASS.

    Base – компактный и легкий, но довольно мощный фреймворк, который может стать надежным фундаментом для ваших проектов.

    Base – надежный CSS-фундамент для вашего сайта

    Base – надежный CSS-фундамент для вашего сайта

    Главные фичи Base:

    • Основан на последней версии Normalize.css.
    • Разбит на независимые друг от друга модули.

    Picnic CSS

    Небольшая библиотека статических и интерактивных компонентов. Picnic включает в себя сетку, формы, табы, всплывающие подсказки, модальные элементы и т. п.

    Picnic – легкий CSS фреймворк с симпатичным дизайном

    Picnic – легкий CSS фреймворк с симпатичным дизайном

    Главные фичи Picnic CSS:

    1. Симпатичный дефолтный дизайн.
    2. Настраиваемые переменные.
    3. Препроцессор Sass.

    Mustard UI

    Ищете CSS фреймворк для новичков? Вы его нашли. Опенсорсный легкий Mustard создан специально для начинающих разработчиков.

    Mustard UI – CSS фреймворк для начинающих верстальщиков

    Mustard UI – CSS фреймворк для начинающих верстальщиков

    Главные фичи Mustard UI:

    1. Отдельные модули. Можно работать только с компонентами, которые действительно нужны.
    2. Отличная документация.
    3. Маленький размер.

    Dead Simple Grid

    Однозначный чемпион в номинации Самый крохотный CSS фреймворк. Dead Simple Grid – это, по большому счету, и не фреймворк вовсе. Весит всего 250 байт(!) и состоит лишь из двух классов. Все, что умеет Dead Simple Grid, – строить сетки, но иногда только это вам и требуется.

    Dead Simple Grid – убийственно простой инструмент для построения сеток

    Dead Simple Grid – убийственно простой инструмент для построения сеток

    Главные фичи Dead Simple Grid:

    • Элементарная структура. Вряд ли вам вообще потребуется документация.
    • Адаптивные колонки и фиксированные отступы.
    • Поддержка бесконечной вложенности.

    Бонус

    В качестве награды за прочтение еще 3 интересных CSS библиотеки, которые могут вам пригодиться:

    Как сделать выбор?

    CSS фреймворки предлагают много готового кода, уже проверенного в различных браузерах и на разных разрешениях, чем здорово экономят время. При выборе нужно задаваться не вопросом «какой из этих инструментов лучше?», а «какой из них лучше подходит для моего проекта?».

    Основные значащие факторы:

    • Размер файлов фреймворка или библиотеки.
    • Необходимый набор компонентов.
    • Наличие или отсутствие JavaScript-сопровождения.
    • Поддержка препроцессоров.
    • Концептуальный подход.

    Разобравшись в своих потребностях, вы без труда подберёте CSS фреймворк. Возможно, даже из нашего списка.

    Читайте также: