web-разработка

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

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

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

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

2. Foundation

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

3. Semantic UI

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

4. Uikit

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

5. Skeleton

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

6. Pure

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

7. Kube

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

8. Materialize CSS

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

9. Milligram

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

10. Tailwind CSS

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

Если вы имеете представление о концепции атомарного CSS, это именно то, что вам нужно. Фреймворк написан на PostCSS и конфигурируется на JS.
2023-11-19 22:21 Самоучитель по CSS