Foundation — это бесплатный адаптивный фреймворк front-end , предоставляющий адаптивную сетку и компоненты пользовательского интерфейса HTML и CSS , шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительную функциональность, предоставляемую расширениями JavaScript . Foundation — проект с открытым исходным кодом , ранее поддерживаемый ZURB. С 2019 года Foundation поддерживается волонтерами. [2]
Foundation появился как проект ZURB по более эффективной разработке кода front-end. В октябре 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 приняла подход mobile-first, проектируя и разрабатывая в первую очередь для мобильных устройств, и улучшая веб-страницы и приложения для больших экранов. [7]
Foundation имеет открытый исходный код и доступен на GitHub . Разработчикам предлагается принять участие в проекте и внести свой вклад в платформу.
Foundation является модульным и по сути состоит из серии таблиц стилей Sass , которые реализуют различные компоненты набора инструментов. Таблицы стилей компонентов могут быть включены через Sass или путем настройки начальной загрузки Foundation. Разработчики могут адаптировать сам файл Foundation, выбирая компоненты, которые они хотят использовать в своем проекте.
Foundation поставляется с гибким макетом Grid (графический дизайн) шириной 940 пикселей . Инструментарий полностью адаптивен для использования различных разрешений и типов устройств: мобильные телефоны, портретный и альбомный формат, планшеты и ПК с низким и высоким разрешением (широкоэкранный). Это автоматически регулирует ширину столбцов.
Foundation предоставляет набор таблиц стилей, которые предоставляют базовые определения стилей для всех ключевых компонентов HTML. Они обеспечивают браузер и общесистемный единый современный вид для форматирования текста, таблиц и элементов форм. [8]
В дополнение к обычным элементам HTML, Foundation содержит другие часто используемые элементы интерфейса. К ним относятся кнопки с расширенными функциями (например, группировка кнопок или кнопки с раскрывающимся списком, создание и навигация списков, горизонтальные и вертикальные вкладки, навигация, навигация по цепочке, разбиение на страницы и т. д.), метки, расширенные типографские возможности и форматирование сообщений, таких как предупреждения.
Компоненты JavaScript Foundation 4 были перемещены из библиотеки jQuery JavaScript в 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 использует Ruby, Node.js и Git для установки исходников Foundation. Затем Foundation предоставляет интерфейс командной строки для изменения и компиляции исходного кода в CSS для использования в разметке HTML-страницы. [12]
Gem Foundation Rails можно установить, добавив «gem 'foundation-rails'» в файл Gemfile приложения Rails. [13]