Главная » Языки программирования

Какие бывают фреймворки css

На чтение 8 мин
Содержание
  1. 5 лучших CSS-фреймворков для верстальщиков и веб-мастеров
  2. Bootstrap
  3. Skeleton
  4. Kube
  5. Foundation
  6. Semantic UI
  7. Какие бывают фреймворки css
  8. Foundation
  9. Pure
  10. Bulma
  11. Semantic UI
  12. UI Kit
  13. Materialize CSS
  14. Milligram
  15. Skeleton
  16. Tailwind CSS
  17. Spectre
  18. Base
  19. Picnic CSS
  20. Mustard UI
  21. Dead Simple Grid
  22. Бонус
  23. Как сделать выбор?

5 лучших CSS-фреймворков для верстальщиков и веб-мастеров

источник изображения http://mdex-nn.ru/

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

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

Bootstrap

Один из самых известных CSS-фреймворков на сегодняшний день. Имеет в своем составе шаблоны для отрисовки кнопок, сайдбаров, навигационных панелей, форм и других элементов сайта. Включает себя JavaScript-расширения.
Основные инструменты bootstrap — шаблоны, @media, формы, навигация, алерты, типографика и конечно же, сетки. Bootstrap совместим со всеми основными современными браузерами, но в старых версиях браузеров могут быть проблемы. Поддерживает адаптивность. Использует языки Less и Sass.

Skeleton

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

Kube

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

Foundation

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

Semantic UI

Поддержка Firefox, Chrome, Safari, Internet Explorer, Android 4, Blackberry10. Содержит большое количество компонентов: иконки, изображения, надписи, меню и другие стандартные компоненты. Поддерживает последние версии HTML и CSS и имеет хорошую подборку скриптовых модулей и API. Использует Less. По применимости соревнуется с bootstrap. Есть вариант на русском языке, но неполный, а организаторы проекта предлагают помочь в переводе.

Читайте также:  Выравнивание текста с помощью CSS

Каждой задаче свой инструмент, не стоит забивать гвозди микроскопом. Другое дело, если у вас большое количество разных задач, тогда подумайте об универсальном инструменте. Хорошим шагом будет попробовать фреймворк и понять «ваш» он или нет. Можно использовать представленные в фремворках скелеты кода как шпаргалку и просто брать оттуда решения и код.

Какими фреймворками пользуетесь? Расскажите в комментариях.

Верстка, фреймворки и не только в профессиональном курсе для будущих веб-мастеров «Веб-разработчик».

Источник

Какие бывают фреймворки 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.

Pure

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

Читайте также:  Java переменная с датой

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

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

Bulma

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

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

  • Логичные и запоминающиеся имена классов.
  • Чистый 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 – чистый код и минимализм

  • Минимализм. Фреймворк поощряет создание чистого кода и ясных интерфейсов.
  • Отличный набор компонентов из коробки с шаблонами использования, полезными методами и возможностями кастомизации.
  • Препроцессоры 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 фреймворк.

Skeleton

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

Читайте также:  Install apache2 and php debian

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

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

Tailwind CSS

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

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

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

Spectre

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

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

Base

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

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

Picnic CSS

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

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

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

Mustard UI

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

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:

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

Бонус

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

  • Animate.css. Создание CSS анимаций с огромным набором эффектов.
  • NES.css. Библиотека компонентов, выполненных в 8-битном стиле.
  • Simple Grid. Классическая 12-колоночная сетка для быстрого построения макетов.

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

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

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

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

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

Источник

Оцените статью
© 2023 Программирование