ZURB Foundation: CSS-фреймворк для отзывчивых фронтендов

С 1998 года американское дизайнерское агентство ZURB помогает компаниям разрабатывать высококачественные веб-сайты и веб-сервисы. В 2008 году разработанные внутри компании элементы стиля для веб-проектов клиентов были объединены в ZURB Style Guide. Два года спустя ZURB решила создать на основе этого руководства фреймворк, призванный упростить создание прототипов и сократить время разработки. Лучшие из существующих фрагментов кода, паттернов и шаблонов были отобраны и объединены в фреймворк Foundation, который был опубликован в 2011 году как проект с открытым исходным кодом и с тех пор доступен для свободного использования.

Что такое ZURB Foundation?

Foundation — это отзывчивый front-end фреймворк, собранный из высокофункциональных компонентов HTML и CSS для дизайна пользовательского интерфейса, различных фрагментов кода и шаблонов, а также дополнительных расширений JavaScript. Модульный веб-фреймворк для разработки междисциплинарных проектов распространяется под свободной лицензией MIT и может быть загружен с официальной домашней страницы, а также с GitHub. Начиная с версии Foundation 4.0, учитывается подход «Mobile First», который предлагает различные новые модули для оптимизации производительности, а также уменьшение размера всех файлов фреймворка. В дополнение к стандартной версии Foundation, ZURB также имеет варианты для разработки кросс-девайсных e-mail рассылок (Foundation for E-mails) и одностраничников (Foundation for Apps).

Модули отзывчивого веб-фреймворка: Обзор

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

Например, для Foundation 6.0 у вас есть выбор из более чем 49 компонентов из следующих семи областей:

  • Сетка: Решающим компонентом для отзывчивого веб-дизайна является стандартный гибкий макет сетки шириной 1200 пикселей. Вы также можете отменить выбор этого модуля, но эта система является основой для дизайна вашего веб-проекта с учетом кросс-устройств и кросс-разрешений. Начиная с версии 6.0, у вас есть возможность выбрать модель «Flex Grid», которая позволяет еще более гибко позиционировать элементы на основе модели CSS Flexbox (например, выравнивание объектов по горизонтали и вертикали).
  • Общие: Общие модули (к которым официально относится и сетка) включают классы float и visibility, которые можно использовать для определения правил позиционирования и видимости отдельных элементов. В этой области вы также найдете компонент формы, а также модуль типографики с базовым форматированием шрифтов и текста.
  • Элементы управления: Эта область содержит все важные интерактивные элементы вашего веб-проекта. Например, сюда входят кнопки, нажатие на которые перенаправляет пользователя или закрывает выбранные элементы. Есть также модули, позволяющие интегрировать слайдеры и кнопки управления с переключателями вкл/выкл.
  • Навигация: Разумеется, элементы навигации также могут использоваться для фронт-энд дизайна, поэтому у вас есть широкий выбор модулей для вашего проекта ZURB Foundation, с помощью которых вы можете создавать панели меню и списки (аккордеон, выпадающие, раскрывающиеся), добавлять навигационные пути (хлебные крошки) или маркировать страницы — в том числе с помощью номеров страниц.
  • Контейнеры: Контейнеры представляют собой первоклассный способ размещения нескольких элементов, таких как текст, изображения или видео, в общей области. Здесь вы можете найти стили для типичных виджетов контента, таких как аккордеон, вкладки, выпадающие области или модальные диалоги.
  • Медиа: В рубрике «Медиа» вы можете найти модули фреймворка Foundation, необходимые для интеграции мультимедийных элементов. Компонент «Flex Video» поддерживает, например, встраивание видео и обеспечивает адаптацию содержимого к различным размерам и разрешениям дисплея. Также есть компоненты для изображений предварительного просмотра и всплывающих подсказок.
  • Плагины: Наконец, вы можете выбрать несколько полезных расширений для ZURB Foundation, которые помогут вам работать с веб-фреймворком. Например, с библиотекой «Motion UI» вы можете загрузить полезную библиотеку (только для варианта Sass), которая делает создание гибких переходов и анимаций пользовательского интерфейса простым как пирог.

Перед загрузкой вы также можете задать некоторые стандартные настройки для фреймворка. Сюда входят опции изменения количества колонок или расстояния между ними, а также максимальной ширины системы сетки, различные цветовые настройки или направление текста (слева направо или справа налево). Если вы хотите сначала протестировать фреймворк, не изучая отдельные модули, вы также можете загрузить его полную версию («Complete») или урезанную базовую версию («Essential»).

Язык таблиц стилей Sass: Гибкая и настраиваемая кодовая база

Если вас устраивают возможности CSS и вы просто перезаписываете стили в загруженном CSS-файле, то вы сделали хороший выбор. Но у фреймворка Foundation есть еще одна особенность: Основы CSS-кода написаны на языке стилей Sass (Syntactically Awesome Stylesheets), который представляет собой препроцессор для CSS. Sass позволяет работать в таблицах стилей .scss, которые затем могут быть скомпилированы в известные документы .css, которые читаются и интерпретируются браузером.

Если вы используете Sass-вариант фреймворка ZURB, вы сможете воспользоваться следующими преимуществами:

  • Упрощенный синтаксис (Sass или SCSS), который облегчает написание таблиц стилей.
  • Возможность определения шаблонов (миксинов) для централизации повторяющихся шаблонов и их интеграции в любой момент
  • Простая комбинация нескольких таблиц стилей для минимизации HTTP-запросов
  • Использование переменных и функций для централизованного обмена цветами, интервалами, шрифтами и т.д.
  • Код может быть иерархически структурирован с помощью вложенности, что позволяет выполнять чистую работу с гораздо меньшим количеством строк кода

Компилятор Sass изначально написан на языке Ruby. Если вы не используете этот язык программирования, вам не обязательно устанавливать его для Sass, потому что в LibSass есть альтернатива, написанная на C. LibSass работает на всех распространенных операционных системах и может быть легко интегрирован в рабочий процесс node.js — например, для автоматического перевода изменений в коде Sass в CSS.

Фреймворк Foundation: Преимущества и недостатки

При переходе с версии 5 на Foundation 6.0 компания ZURB значительно уменьшила размер файла всего фреймворка: С 60 КБ CSS и 84 КБ JavaScript, Foundation пользуется репутацией изящной платформы для разработки. Благодаря ранее упомянутой модульности и свободе выбора можно даже минимизировать размер. В сочетании с гибкой сеткой и атрибутами ARIA (например, реализация мощной клавиатурной навигации), которые включает ZURB, базовые возможности для кроссплатформенных и кросс-девайсных веб-проектов являются абсолютной данностью. Последние атрибуты хорошо документированы и доступны во всех областях, где они могут оптимизировать доступность вашего сайта.

Если вы работаете с Sass-версией фреймворка, вы также расширяете свои возможности по композиции используемых элементов дизайна и верстки. Использование этих специальных таблиц стилей отнюдь не является простым для новичков и требует определенной подготовки, что также относится к платформе в целом. Интеграция внешних компонентов, например, интеграция модулей или проектов Foundation в другой фреймворк или систему управления контентом, обычно довольно утомительна. Небольшие недостатки, которые есть у ZURB Foundation по сравнению с другими CSS-фреймворками, такими как Twitter Bootstrap, — это скудный выбор шаблонов, а также отсутствие поддержки старых версий Internet Explorer.

Для каких проектов подходит Foundation?

ZURB Foundation сопровождает вас как разработчика от первого прототипа до функционального веб-сайта и отличается прежде всего эффективностью. Если вам не нужны определенные компоненты, вы можете просто отменить их выбор, не влияя на функциональность других элементов. В результате CSS-фреймворк сияет своим особым гладким кодом, который подчеркивает выбранную ZURB ключевую тему «mobile first». Вместе с очень гибкой системой сеток, которую вы можете дополнительно настроить с помощью Sass, фреймворк отлично подходит для разработки отзывчивых фронтендов, которые характеризуются быстрой загрузкой и доступностью, а также подходят для различных размеров экрана.

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

Оцените статью
cdelat.ru
Добавить комментарий