ZURB Foundation: CSS-фреймворк пользовательского интерфейса для адаптивного внешнего интерфейса

В 2010 году дизайнерское агентство ZURB создало CSS-фреймворк с целью запустить сервис для облегчение создания прототипов e сократить сроки разработки. Для этого были выбраны лучшие фрагменты, паттерны и шаблоны, чтобы объединить их в Foundation, фреймворк, который был опубликован как проект с открытым исходным кодом в 2011 году и с тех пор остается бесплатным для публики.

Foundation — это адаптивная интерфейсная структура, состоящая из эффективных компонентов HTML и CSS для настройки пользовательского интерфейса (Пользовательский интерфейс), различные фрагменты и шаблоны, а также многочисленные необязательные расширения JavaScript. Веб-фреймворк имеет модульная структура и был разработан для настройки проектов, доступных с разных устройств; распространяется с лицензия Массачусетского технологического института и можно скачать с обоих официальная домашняя страница оба GitHub. Начиная с версии Foundation 4.0 применяется рабочая предпосылка «Мобильный прежде всего», поэтому с тех пор мы работаем с помощью нескольких новых модулей, чтобы оптимизировать производительность и уменьшить размер файлов внутри фреймворка. Помимо стандартной версии Foundation, ZURB опубликовал и другие варианты для разработки email-рассылок (Фонд для электронных писем) и одностраничные сайты (Фонд для приложений).

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

Для Foundation 6.0 у вас есть выбор из более Компоненты 40 принадлежащих к следующим семи секторам:

• сетка: Решающим компонентом адаптивного веб-дизайна является гибкая компоновка сетки со стандартной шириной 1200 пикселей. Вы также можете отменить выбор этого модуля, однако система формирует основу для разработки веб-проекта, доступного с разных устройств и совместимого с разными масштабами разрешения. В дополнение к этому, начиная с версии 6.0, также есть возможность выбрать модуль «Flex Grid», который позволяет еще более гибко позиционировать элементы, работая на основе модели flexbox CSS (например, горизонтальной или вертикальной). организация объектов).

• Общие: Среди общих модулей (в состав которых официально также входит Grid) в первую очередь входят классы плавать e видимость, благодаря которому вы можете defiопределить правила поведения в отношении позиционирования и видимости отдельных элементов; Кроме того, в этой области вы также найдете компонент для создания форм, а также модуль типографии, содержащий основные форматы для письма и текста.

• Control : Здесь собраны все самые важные интерактивные элементы вашего веб-проекта. Например, это кнопки, которые направляют пользователя в другое место одним щелчком мыши или которые закрывают выбранные элементы. Также есть модули, с которыми можно интегрировать слайдеры и кнопки с режимом включения/выключения.

• Навигация: В конфигурации внешнего интерфейса элементы навигации, безусловно, не могут отсутствовать, поэтому даже для вашего проекта, который будет выполняться с помощью ZURB Foundation, у вас есть множество модулей для настройки. строки меню и меню (раскрывающийся список, раскрывающийся список, детализация), добавить пути навигации (хлебные крошки) или добавить номер на страницы.

• Container: Контейнеры — это фантастическая возможность включать различные элементы, такие как текст, изображения или видео, в общее пространство. Здесь вы найдете стили для классических виджетов контента, таких как выпадающие меню, вкладки, каскадные сектора или модальные диалоги.

• Медиа: Внутри раздела «Медиа» вы найдете модули фреймворка, которые будут полезны для включения мультимедийных элементов. Компонент «Flex Video», например, поддерживает вас ввставка видео и следит за тем, чтобы контент адаптировался к разным размерам дисплея и типам разрешения. Кроме того, есть также компоненты для предварительного просмотра изображений, а также полезные советы по использованию инструментов.

• Вставной: Наконец, вы можете выбрать несколько очень полезных расширений для ZURB Foundation, которые облегчат вам работу с веб-фреймворком. Например, с библиотекой «Motion UI» у вас есть возможность загрузить очень полезную библиотеку, даже если она доступна только для варианта Sass, что упрощает создание переходов и анимации пользовательского интерфейса.

Кроме того, перед загрузкой вы можете выбрать defiзакончить некоторые стандартные настройки фреймворка. К ним относятся параметры для изменения количества или толщины столбцов и максимальной ширины системы сетки, а также различные настройки цвета и определения направления текста (слева направо или справа налево). Если вы сначала хотите протестировать фреймворк, не изучая работу отдельных модулей, вы также можете скачать полную версию Foundation (Завершенный) или как более легкий базовый вариант (существенный).

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

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

• Упрощенный синтаксис (Sass или CSS), что упрощает написание таблиц стилей.

• Возможность defiнир из модели (Mixins) для централизованного сохранения повторяющихся форматов и их интеграции по желанию

• Простая комбинация различных таблиц стилей минимизировать HTTP-запросы

• Использование переменные и функции для обмена цветами, расстояниями, шрифтами и т. д. централизованно

• Код может быть легко структурирован благодаря Гнездование в иерархическом порядке, что позволяет работать чище без слишком большого количества строк кода

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

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

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

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

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