Foundation — это бесплатная адаптивная интерфейсная платформа, предоставляющая адаптивную сетку и компоненты пользовательского интерфейса HTML и CSS , шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительные функции, предоставляемые расширениями JavaScript . Foundation — это проект с открытым исходным кодом , который ранее поддерживался ZURB. С 2019 года фонд поддерживают волонтеры. [2]
Foundation возник как проект ZURB для более эффективной разработки внешнего кода. В октябре 2011 года ZURB выпустил Foundation 2.0 с открытым исходным кодом под лицензией MIT . [3] ZURB выпустил Foundation 3.0 в июне 2012 г., [4] 4.0 в феврале 2013 г., [5] 5.0 в ноябре 2013 г. и 6.0 в ноябре 2015 г. Команда начала работу над следующей версией Foundation for Sites 7, которая, скорее всего, будет отказаться от поддержки старых браузеров и внедрить новые технологии, такие как flexbox или, возможно, систему расчетных сеток.
Foundation for Emails, ранее известная как ZURB Ink, была выпущена в сентябре 2013 года.
Foundation for Apps был выпущен в декабре 2014 года.
Foundation был разработан и протестирован на многочисленных браузерах и устройствах. Это адаптивная среда, созданная с использованием Sass/SCSS . Фреймворк включает в себя наиболее распространенные шаблоны, необходимые для создания прототипа адаптивного сайта.
Начиная с версии 2.0, он также поддерживает адаптивный дизайн . [6] Это означает, что графический дизайн веб-страниц динамически настраивается с учетом характеристик используемого устройства (ПК, планшета, мобильного телефона). Версия 4.0 использует подход «сначала мобильные устройства», проектируя и разрабатывая в первую очередь для мобильных устройств, а также улучшая веб-страницы и приложения для больших экранов. [7]
Foundation имеет открытый исходный код и доступен на GitHub . Разработчикам предлагается принять участие в проекте и внести свой вклад в платформу.
Foundation является модульным и состоит по существу из серии таблиц стилей Sass , которые реализуют различные компоненты набора инструментов. Таблицы стилей компонентов можно включить через Sass или путем настройки первоначальной загрузки Foundation. Разработчики могут адаптировать сам файл Foundation, выбрав компоненты, которые они хотят использовать в своем проекте.
В стандартную комплектацию Foundation входит гибкая сетка (графический дизайн) шириной 940 пикселей . Набор инструментов полностью адаптирован для использования с различными разрешениями и типами устройств: мобильные телефоны, книжный и альбомный форматы, планшеты и ПК с низким и высоким разрешением (широкоэкранный). Это автоматически регулирует ширину столбцов.
Foundation предоставляет набор таблиц стилей, которые содержат базовые определения стилей для всех ключевых компонентов HTML. Они обеспечивают единообразный современный внешний вид браузера и всей системы для форматирования текста, таблиц и элементов форм. [8]
Помимо обычных элементов HTML, Foundation содержит и другие часто используемые элементы интерфейса. К ним относятся кнопки с расширенными функциями (например, группировка кнопок или кнопки с раскрывающимся списком, списки создания и навигации, горизонтальные и вертикальные вкладки, навигация, навигационная цепочка, нумерация страниц и т. д.), метки, расширенные типографские возможности и форматирование. для таких сообщений, как предупреждения.
Компоненты JavaScript Foundation 4 были перенесены из библиотеки JavaScript jQuery в Zepto, исходя из предположения, что физически меньшая, но совместимая с API альтернатива JQuery окажется быстрее для пользователя. Однако Foundation 5 вернулся к более новой версии JQuery-2. «jQuery 2.x имеет тот же API, что и jQuery 1.x, но не поддерживает Internet Explorer 6, 7 или 8». официальный блог ZURB поясняет [9] , а автор без подписи утверждает, что обратный переход произошел из-за проблем совместимости с индивидуальными усилиями; и эта производительность оказалась не такой хорошей при тестировании использования новой версии jQuery-2.
Существует три уровня интеграции Foundation: CSS, SASS и Ruby on Rails с Foundation Rails Gem. [10]
Чтобы использовать Foundation CSS, стандартные или пользовательские пакеты CSS можно загрузить со страницы загрузки и установить в соответствующие папки веб-сервера. Затем Foundation интегрируется в разметку HTML-страницы. [11]
При установке Foundation Sass для установки исходных кодов Foundation используются Ruby, Node.js и Git . Затем Foundation предоставляет интерфейс командной строки для изменения и компиляции исходного кода в CSS для использования в разметке HTML-страниц. [12]
Гем Foundation Rails можно установить, добавив «gem 'foundation-rails'» в Gemfile приложения Rails. [13]