CSS-фреймворки

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

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

Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы:

  1. сетка;
  2. иконки;
  3. таблицы;
  4. элементы форм и кнопок;
  5. типографика;
  6. интерфейсные паттерны, например, карточки и модальные окна;
  7. вспомогательные классы оформления элементов: отступы, цвета и т. д.

Плюсы CSS-фреймворков:

  1. Кроссбраузерность;
  2. Возможность создать корректный HTML макет даже не очень опытному специалисту;
  3. Единообразие кода;
  4. Увеличение скорости разработки.

Минусы CSS-фреймворков:

  1. Привязанность к стилю CSS библиотеки;
  2. Избыточный код.

Зачем нужен фреймворк?

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

1. Нужно быстро создать сайт. Кастомизировать компоненты проще, чем создавать с нуля.

2. Если плохо знаете CSS. Можно взять готовые классы и наслаждаться стандартным, но элегантным и продуманным интерфейсом.

3. Нужно протестировать дизайн-гипотезу. Создать прототип и проверить идею в деле.

В этой статье мы рассмотрим самые актуальные варианты CSS-фреймворков.

1. Bootstrap


CSS-фреймворки

Bootstrap (или Twitter Bootstrap) – один из самых известных и современных фреймворков, впервые анонсированный в 2011 году. Одно из главных свойств этого фреймворка – адаптивность.

Основные инструменты bootstrap — шаблоны, @media, формы, навигация, алерты, типографика и конечно же, сетки.

Bootstrap совместим со всеми основными современными браузерами, но в старых версиях браузеров могут быть проблемы. Поддерживает адаптивность. Использует языки Less и Sass.

2. Foundation


CSS-фреймворки

Наряду с другими основными элементами включает в себя несколько HTML шаблонов с различным расположением блоков на странице. Имеет большой набор компонентов на JavaScript. Очень серьезный по своим возможностям и составу фреймворк.

Использует Sass. Совместимость кода со всеми основными браузерами. Этот фреймворк хорошо подходит для быстрого прототипирования.

3. Semantic UI


CSS-фреймворки

Semantic UI – этот фреймворк, как и Bootstrap, поможет создать переносимые интерфейсы. Это достаточно молодой фреймворк, который постоянно развивается; он имеет множество различных кнопок, иконок, изображений, надписей и других элементов.

Поддерживает последние версии HTML и CSS и имеет хорошую подборку скриптовых модулей и API. Использует Less. Есть вариант на русском языке, но неполный, а организаторы проекта предлагают помочь в переводе.

4. Uikit

Uikit – фреймворк, обладающий легкой и модульной структурой.


CSS-фреймворки

Выделяется на фоне остальных фреймворков двумя особенностями: во-первых, markdown (предварительный просмотр в реальном времени), во-вторых, синтаксическая подсветка для HTML.

5. Skeleton


CSS-фреймворки

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

Большой плюс Skeleton — его можно приспособить под любой дизайн. Сетка разметки содержит 12 колонок и имеет базовую ширину 960 пикселей. Совместим со всеми основными браузерами.

6. Pure


CSS-фреймворки

Pure by Yahoo! – фреймворк, который содержит небольшие адаптивные CSS-модули, пригодные для использования в любом проекте.

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

7. Kube


CSS-фреймворки

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

8. Materialize CSS


CSS-фреймворки

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

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

9. Milligram


CSS-фреймворки

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

10. Tailwind CSS


CSS-фреймворки

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

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

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Один ответ к “CSS-фреймворки”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
Фреймворк Bootstrap

Фреймворк Bootstrap

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм,

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: