что такое фреймворк css
Сегодня слово «framework» стало обыденным в web dev’е. Как только jQuery и Prototype, Rails и Django получили широкое распространение, кажется, что теперь каждый использует какой-нибудь framework для создания своего сайта.
Но что же такое framework? Они полезны программистам, или даже веб дизайнеры могут воспользоваться их преимуществами.
Что такое “framework”?
Итак, давайте договоримся — хотя бы на протяжении этой статьи — считать, что “framework” — это набор инструментов, библиотек, хорошего кода, который поможет превратить рутинные задачи в модули, которые можно использовать неоднократно. Задача framework’а — позволить дизайнеру или разработчику сфокусироваться на задачах, являющимися уникальными в рамках данного проекта. Иначе говоря, не изобретать колесо раз за разом. Вобщем, это подход, выбранный вышеуказанными web и JavaScript framework’ами.
Framework для дизайнеров
Возможно, и вы сможете извлечь выгоду от аналогичной абстракции CSS кода в течение дизайна вашего сайта. Те, кто по достоинству смогут оценить данных подход — это дизайнеры, работающие над несколькими подобными друг другу сайтами. К тому же, дизайнеры, работающие в команде, могут работать, используя один и тот же framework. Например, я работаю в газете, и все наши 20 с небольшим сайта имеют много общего. Из-за того, что это, в основном, новостные сайты, они по определению больше схоже, чем различны. Но даже дизайнер-одиночка, который работает над совершенно разными проектами, может найти элементы, которые можно внести в его основной framework.
В Lawrence Journal-World, где я работаю, мы недавно создали CSS framework и обнаружили, что он значительно увеличил нашу производительность. Конечно, для его создания потребовалось потратить несколько дней, но как только он был готов, скорость, с которой мы могли создавать качественные страницы, резко возросла. Более того, с тех пор, как мы начали использовать наш framework, каждый дизайнер мог что-то исправить в чужой работе, и им уже не требовалось 20 минут, что понять, почему что-то написано именно так. Они просто погружались в работу.
Что именно можно абстрагировать?
К тому же, многие сайты используют одни и те же виджеты, такие как drop-down меню, закладки в навигации, кнопки, и т.д. Эти вещи хорошо подходят для абстракции. Помимо этого, вы можете выработать некоторые свои идиомы, как скажем, список фотографий, показывающийся в виде thumbnail’ов. Вы можете стандартизировать CSS класс “thumbnail-list”, и в следующий раз вам всего лишь потребуется вставить этот класс, чтобы получить работающий вариант.
Это действительно принесет мне пользу?
Имея такой framework, вы сможете быстро окунуться в создание новой страницы. Вы создаете новый (X)HMTL документ, подключаете framework, и вам уже не потребуется времени, чтобы избавиться от ненужных отступов, у вас уже будет нужная вам типографика, чистые формы, работающие виджеты и много другое!
Вероятно, что вам захочется как-то изменить внешний вид конретного сайта. Чтобы это осуществить, все что вам нужно, это добавить или изменить уже существующий стиль. К примеру, если ваш framework устанвливает стандартную панель с навигацией для каждого «ul» с классом “tabs”, который имеет серый фон и черные границы. Чтобы это изменить, вам всего лишь потребуется добавить (или изменить существующий) стиль. Например:
Как должен быть спроектирован CSS framework?
Заключение
На практике, мы, веб дизайнеры, так же как и наши коллеги из мира программирования, имеем привычку часто повторятся. Мы каждый раз отключаем стандартные стили, пишем занового стили для tab’ов, и это повторяется от проекта к проекту. Потратьте немного времени на написание своего framework’а, абстрагируйте там то, что вы можете использовать несколько раз. Это поможет вам быстро начать создавать новую страницу, или поддерживать уже существующую. Позаботьтесь об этом, ведь это не требует особых знаний и не повредит вашим проектам, а главное, сэкономит время на создания дизайна следующего.
Опубликовано с разрешения A List Apart и Jeff Croft’a
Список лучших CSS фреймворков для фронтенд-разработки
Мечтаете быстро создавать прототипы приложений? Упростите себе задачу с помощью этих CSS фреймворков. И не придётся беспокоится о стилях.
Зачем использовать CSS фреймворки при написании пользовательского CSS-кода? Время – ограниченный ресурс, поэтому тратьте его на создание функциональности. Улучшите ли производительность и эстетику, когда создадите CSS с нуля? Абсолютно! Но когда нет творческих способностей в области визуализации и огромного опыта работы с CSS, возможно, эффективнее передать эту работу профессионалу.
Или использовать крутой фреймворк для создания клиентского интерфейса. Вот полный список самых знаменитых и используемых CSS фреймворков.
Ant Design
Назначение: «Ant Design упрощает проектирование и облегчает создание прототипов для всех участников проекта. Тем самым повышает эффективность разработки фоновых приложений и продуктов». – веб-страница Ant Design.
Иллюстрация, сделанная с помощью Ant Design
Ant Design, язык дизайна для фоновых приложений, совершенствует команда Ant UED. Создатели стремятся к унификации спецификаций UI для внутренних фоновых проектов, снижению затрат на различия в дизайне и высвобождению ресурсов, обычно затрачиваемых на проектирование и внешнюю разработку.
Особенности
Поддержка среды
Foundation
Назначение: «Foundation – семейство передовых адаптивных фронтенд фреймворков. Ускоряет переход от прототипирования к производству. Создавайте сайты или приложения, которые будут работать на любом устройстве, с помощью Foundation. Фреймворк включает полностью настраиваемую отзывчивую сетку, большую библиотеку Sass примесей, часто используемые плагины JavaScript и полную доступность поддержки». – с веб-страницы Foundation.
Иллюстрация, сделанная с помощью Foundation 
Выпуски Foundation
Особенности
Bulma
Назначение: Bulma – CSS фреймворк. По этой причине на выходе единственный файл CSS: bulma.css.
Логотип Bulma
Используйте представленный выше файл из коробки или загрузите исходные файлы Sass для настройки переменных.
JavaScript здесь не прилагается. Люди, как правило, стремятся использовать собственную реализацию JS (и уже написали такую). Bulma не зависит от среды: это слой стиля поверх логики.
Особенности
Spectre.css
Согласно веб-сайту, Spectre.css – «лёгкий, отзывчивый и современный CSS фреймворк для ускоренной и расширяемой разработки. Spectre предоставляет базовые стили для шрифтового оформления и элементов, адаптивную систему макетов на основе Flexbox, а также чистые компоненты и утилиты CSS».
spectre.css
Особенности
Tailwind CSS
Назначение: «Tailwind CSS – тонко настраиваемый низкоуровневый CSS фреймворк, который предоставляет все необходимые строительные блоки для создания персонализированного дизайна без лишней борьбы с переопределением раздражающих встроенных стилей». – с веб-страницы Tailwind CSS.
Снимок экрана домашней страницы Tailwind CSS
Особенности
Shoelace
Назначение: «Shoelace.css – лёгкая, прогрессивная библиотека CSS, созданная с использованием синтаксиса будущего CSS. Простая в использовании и настраиваемая. Пользователям Bootstrap эта библиотека покажется знакомой, но освежающей. Вы можете использовать Shoelace практически с любым браузером. Версия CDN отлично подходит для создания прототипов, но чтобы воспользоваться всеми преимуществами, придётся собрать Shoelace из исходного кода». – с веб-страницы Shoelace.
Логотип Shoelace
Особенности
Semantic UI
Назначение: «Semantic UI рассматривает слова и классы как взаимозаменяемые понятия. Классы используют синтаксис из естественных языков: отношение существительное-определение, порядок слов и множественность, чтобы интуитивно связать понятия. Получите те же преимущества, что и BEM или SMACSS, но без утомительности». – с веб-страницы Semantic UI.
Особенности
Skeleton
Назначение: «Skeleton стилизует только часть стандартных элементов HTML и включает в себя сетку, но этого часто предостаточно для начала работы. Используйте Skeleton, если приступаете к меньшему проекту или просто чувствуете, что вам не нужны все полезности более крупных CSS фреймворков». – с веб-страницы Skeleton.
Скриншот с сайта Skeleton
Особенности
Вы полюбите Skeleton за ускорение разработки и лёгкость настройки.
Tachyons
Назначение: «Tachyons – система дизайна для функционального CSS и людей. Быстро создавайте и проектируйте новый пользовательский интерфейс без написания CSS». – со страницы GitHub Tachyons.
Tachyons
«Системы проектирования ломаются при масштабировании (либо организации, либо продукта), потому что вводятся новые компоненты или варианты компонента. Такие модификации иногда – читайте: часто – остаются недокументированными, что приводит к дублированию, когда этот компонент или вариант необходим (и создаётся) снова. Даже когда компонент задокументированный, результативность этой процедуры часто означает десятки или сотни экземпляров для описания всех состояний либо вариантов. Такие системы, как Tachyons и подобные, иначе подходят к проблеме: вместо этого документируют и ограничивают *свойства* компонентов. (Приятно думать об этом как о «субатомном» дизайне.)
Затем вы создаёте компоненты путём составления субатомных компонентов (свойств). Вместо того, чтобы реализовать компонент и его варианты, вы получаете полный список субатомных компонентов «ингредиента». Эти субатомные компоненты объединяются тысячами способов для создания сотен компонентов. Свойства этих компонентов многочисленны, но ограничиваются набором допустимых значений (наши субатомные компоненты)». – Даниэль Иден, дизайнер Facebook.
Особенности
Material Design
Назначение: «Созданный и спроектированный Google, Material Design – дизайн-система, которая сочетает классические принципы эффективного дизайна вместе с инновациями и технологиями. Цель Google состоит в том, чтобы разработать систему дизайна, которая предоставляет единообразный опыт взаимодействия пользователя со всеми продуктами на любой платформе». – с веб-страницы Material Design.
Снимок экрана домашней страницы Material Design
CSS-фреймворки
CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода.
Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность.
Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы:
Плюсы CSS-фреймворков:
Минусы CSS-фреймворков:
Зачем нужен фреймворк?
Чем сложнее приложение, тем больше оснований воспользоваться готовым инструментом. Фреймворк необходим в следующих случаях:
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.
7 Популярных CSS Фреймворков в 2021
Содержание
Если ставить себе целью быстрое создание прототипов приложений, то нет более логичного шага, чем упростить себе задачу при помощи удобного CSS фреймворка. Это поможет решить проблему выбора стилей.
Использование CSS фреймворка для написания пользовательского CSS кода более чем оправдано ограниченностью самого ценного ресурса современности – времени. Именно этот фактор и обуславливает уместность траты данного ресурса на создание функциональности. Безусловно, можно создать CSS с нуля. Это безусловно поможет улучшить производительность и эстетику. Единственное, что следует понимать и принимать – это тот факт, что талант и способности к творчеству в области визуализации, а также колоссальный опыт работы с CSS есть не у каждого. Возможно, имеет смысл поручить эту работу настоящему профессионалу либо же воспользоваться проработанным фреймворком, чтобы создать клиентский интерфейс. Подобных программ существует достаточно много, они в чём-то превосходят одна другую, в чём-то одна другой проигрывают.
Признанные лидеры
Bootstrap
Данный CSS-фреймворк стал популярным достаточно неожиданно, поскольку изначально разрабатывался для Twitter, но на данный момент он успешно покинул пределы этой социальной сети и поступил на вооружение массы проектов, среди которых вёрстка Landing Page, темы WordPress, шаблоны для разнообразных CMS и так далее. Сейчас наиболее популярна 4-я версия системы, но пока она не превзошла по срокам признания предыдущую. Разница между ними заключается в том, что разметка старой версии базировалась на свойстве float, а новая версия использует Flexbox-модель. По слухам, скоро появится версия на основе Grid, но пока это только слухи.
Среди достоинств Bootstrap следует выделить хорошую задокументированность, причём присутствует не только на английском, но и на русском языке. В составе рассматриваемого фреймворка присутствует очень много классов для построения элементов на базе grid-system (12-колоночная сетка). Нельзя забывать и о том, что в состав фреймворка входит и множество компонентов, которые позволят пользователю создавать и форматировать карточки, меню, фоны, кнопки, аккордионы, модальные окна, таблицы и прочее.
Также важно упомянуть о наличии дополнительных сайтов, темы которых базируются именно на данном фреймворке (например, bootswatch.com). Они доступны и на CDN, не говоря уже о массе дополнений и крупном сайте, целиком посвящённом сниппетам и шаблонам. Для корректной работы требуется только проверить версию Bootstrap и внести коррективы, если требуется. Всё вышеизложенное объясняет любовь программистов к данной системе: ведь не нужно задумываться о вёрстке, стилях – достаточно просто воспользоваться классами фреймворка при написании кода на Vue, React или Angular. Если же у программиста возникает желание воспользоваться Material Design для Bootstrap, то следует воспользоваться сайтом mdbootstrap.com и просто скачать соответствующий набор стилей. Для вышеуказанных фреймворков там уже присутствуют готовые сборки.
Говоря о достоинствах, нельзя молчать о недостатках. Первый и самый, пожалуй, значительный минус – это тяжёлый CSS-файл, содержащий стили. Весит он целых 153кб в версии 4.3.1 и 57кб js-файла в минфицированной версии (без него не будут работать табы(вкладки), модальные окна, карусель и выпадающие меню).
Также есть и спорный момент. В то время, как одни пользователи смешивают Bootstrap с грязью за избыточность стилей и классов, другие парируют тем, что можно скомпилировать сетку и требующиеся классы, а не сразу весь набор (единственная помеха – для этого нужно знание препроцессора SAAS). Другой вариант – вместо локального файла для подключения использовать CDN. В этом случае остаётся возможность того, что данный файл остался в кэше браузера после того, как пользователь загружал этот файл к себе раньше.
Foundation
Как утверждает официальный сайт данного проекта, Foundation – это не один, а целое семейство инновационных адаптивных фронтенд-фреймворков. Цель его использования, как правило, сводится к тому, чтобы ускорить переход от прототипирования к производству любых масштабов. С помощью данного фреймворка, уверяют создатели, можно создать сайт или приложение, которое может работать на любом устройстве а e-mail рассылка будет одинаково хорошо отображаться во всех почтовых клиентах без исключения, в том числе и в Outlook.
Пользователи нередко сравнивают Foundation с Bootstrap, поскольку на данный момент эти фреймворки официально напрямую конкурируют.
Несмотря на то, что Foundation уже 9 лет, система всё ещё имеет весьма внушительное количество тех, кто в любом случае предпочтёт её другим. Причина в том, что фреймворк предоставляет своему пользователю готовые стартовые шаблоны, которые позволяют создавать веб-проекты в рекордно-быстрые сроки. На данный момент этим фреймворком пользуются сайтами, как eBay, Mozilla, Amazon, EA и многие другие, что вполне можно назвать признанием.
Приятным решением является возможность скачки не полного набора компонентов, а «cut-version», набор которой можно определить в блоке «Customize Foundation», страница загрузки которого предоставляет выбор среди всех компонентов. Помимо этого такую версию можно установить и через npm, и через yarn, и загрузить с CDN.
Шестая версия Foundation основана на Flexbox-модели, чем схожа с Bootstrap-4, да и подход к классам очень схож, отличие только в названиях. В частности, данный фреймворк использует классы grid-container вместо container, grid-x grid-padding-x вместо row, а внутри содержит элементы
Также принципиальные отличия есть в таком вопросе как оформление. В случае Foundation можно наблюдать предоставление цветовых классов, классов по управлению отступами, классов для отображения элементов исключительно на определённых устройствах, стили для форм и кнопок, не говоря уже о других полезнейших утилитах. Это безусловное достоинство, которое в то же время становится причиной небольшого недостатка – большего количества прямых углов, нежели у конкурентов, которые эту проблему смягчили с помощью border-radius.
Солидный размер файлов и в этом случае стал проблемой, при том более значительной, поскольку вес минифицированного CSS-файла 142кб, а js-файл тянет на целых 479кб, что при сравнении с цифрами у Bootstrap, указанными выше, чаша весов, казалось бы, неумолимо тянется к полу. Тем не менее задокументированность у Foundation находится на более чем достойном уровне, а при подключении jQuery и файла foundation.js появится возможность пользоваться разнообразными компонентами и плагинами (ползунки-слайдеры, выпадающие и раскрывающие меню, всплывающие подсказкт, Orbit для создания слайд-шоу и так далее).
Ant Design
Известнейший и весьма эффективный фреймворк из тех, которые известны многим пользователям – это Ant Design. Его назначением изначально было упрощение проектирования, а также облегчение создания прототипа для всех участников проекта в целях повышения эффективности разработки фоновых предложений и продуктов, об этом сообщает официальная страница компании. Создатели данного языка дизайна для фоновых приложений постоянно его совершенствуют, стремясь к максимальной унификации специфики, уменьшению затрат на различия дизайна, а также высвобождению ресурсов, которые, как правило, затрачиваются на проектирование и внешнюю разработку.
Для квалифицированных пользователей важно выделить особенности этого фреймворка на фоне ему подобных. Прежде всего Ant Design – это полноценная дизайн-система, визуальный язык разработки пользовательского интерфейса корпоративных классов для веб-приложений. Не стоит забывать и о том, что достаточно большое количество высококачественных компонентов доступно, как говорится, «из коробки», то есть изначально. Также довольно приятно, что этот фреймворк написан на TypeScript с готовыми определёнными типами. Ну и напоследок – максимально полный пакет инструментов для дизайна и разработки, про два из которых – таблицы и формы – следует сказать отдельно пару слов.
Следующий проблемный момент – это стили таблиц, заложенные во фреймворке. Например, к языкам, которые базируются на иероглифике, свойство word-break: break-word (разбивание слов при превышении рамок блока в произвольных местах при отсутствии подходящего места для переноса строки) вполне применимо, но при работе с буквенным алфавитом начинаются проблемы, поскольку структура у языков разработчиков и языков пользователей чаще всего различны по сути своей. В китайском языке не существует знака переноса, по этой причине фреймворк начинает конфликтовать с пользователем в выполнении своих функций.
Тем не менее, решается эта проблема на программном уровне достаточно просто.
Последней проблемой можно назвать также вертикальное выравнивание текста в ячейках по середине, что портит внешний вид проекта при большом количестве контента в ячейке. Далеко не для всех данный вопрос принципиален, но перфекционизм в работе – это скорее положительное явление, а значит, стремиться к совершенству никогда не поздно. Тем не менее таблицы Ant Design были и остаются превосходным инструментом, аналогов которому в экосистеме React практически нет.
Менее популярные фреймворки
Первым из таких будет уместно упомянуть Materialize.
Он представляет собой относительно классический фреймворк, основанный на принципах материального дизайна, который разработала и с успехом применяет в собственных сервисах и на операционной системе Android компания Google. У программистов есть возможность просто установить путём скачивания файлы фреймворка, использовать SASS-версию в целях компиляции с собственными значениями переменных, подключать файлы через CDN или использовать для установки npm и bower; в их распоряжении css- и js-файл и шрифт Roboto.
Materialize демонстрирует трендовые в 2021 цветовие схемы, которая является полноправным преимуществом перед другими фреймворками, к тому же цвета идут в виде полноценной палитры с мягкими переходами. Сетка максимально несложная: внутри блока container размещаются в первую очередь строки формата
Разработчики бывают разные, толерантность в этом направлении диктует следующее: каждому виду программистов – свои максимально удобные фреймворки. К примеру, для React-разработчиков был создан специфический Material-UI, в котором содержится достаточное количество оформленных на основе принципов материального дизайна компонентов. Доступен он на данный момент для установки на npm.
Их подробное описание с примерами содержится в документации. В целом, многие считают эту программу просто приятнее оформленной копией Bootstrap. Тем не менее, у него есть собственные достоинства, среди которых, прежде всего, размер css-файла всего в 6кб, который стал причиной быстрой загрузки как основных классов, так и UI- элементов без JavaScript или jQuery. Также в документации содержится масса примеров с разметкой огромного спектра страниц: блог, магазин, туристический или корпоративный сайт, где можно не задумываться о создании вёрстки, просто взяв готовый пример.
Недостатками же, пусть и терпимыми, остаются доступность исключительно по протоколу http, из-за чего, например, codepen.io, не подгружает CSS-файл удалённо, а также достаточно жёсткая и немного недоработанная стилизация элементов по сравнению со «старшим братом» Bootstrap.
Фреймворк от Yahoo с минимальным весом файлов(3.8кб css-кода) адаптирован прежде всего для облегчения кода прежде всего для мобильных.
Сетка Pure CSS адаптирована и для 12-, и для 24-колоночной раскладки. Сетка функционирует на модели Flexbox. Размеры контейнера настраиваемы, внутри него используются классы pure-u. Построение более сложных сеток для разных экранов требует использования таких классов, как pure-u-md-1-2 или pure-u-lg-1-3.