Фундамент (каркас) - Foundation (framework)

Эта статья о фреймворке CSS. Информацию о структуре Objective-C см. Фондовый комплект.
Фонд ZURB
Разработчики)ZURB
изначальный выпускСентябрь 2011 г.; 9 лет назад (2011-09)
Стабильный выпуск
6.6.3 / 8 апреля 2020 г.; 8 месяцев назад (2020-04-08)[1]
РепозиторийРепозиторий Фонда
Написано вHTML, CSS, Sass и JavaScript
ТипВеб-разработка
ЛицензияЛицензия MIT
Интернет сайтполучать.Фонд

Фонд это отзывчивый внешний интерфейс рамки. Foundation предоставляет адаптивную сетку и HTML и CSS Компоненты пользовательского интерфейса, шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительные функции, предоставляемые JavaScript расширения. Фонд - это Открытый исходный код проект и ранее поддерживался 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, которая дает дизайнерам передовой опыт для быстрой разработки. Фреймворк включает наиболее распространенные шаблоны, необходимые для быстрого создания прототипа адаптивного сайта. Благодаря использованию миксинов Sass компоненты Foundation легко стилизованы и легко расширяются.

Начиная с версии 2.0 он также поддерживает адаптивный дизайн.[6] Это означает, что графический дизайн веб-страниц динамически изменяется с учетом характеристик используемого устройства (ПК, планшет, мобильный телефон). Кроме того, начиная с версии 4.0, компания использует подход, ориентированный на мобильные устройства, сначала проектируя и разрабатывая мобильные устройства, а также улучшая веб-страницы и приложения для больших экранов.[7]

Foundation имеет открытый исходный код и доступен на GitHub. Разработчикам предлагается участвовать в проекте и вносить свой вклад в платформу.

Структура и функции

Фундамент является модульным и состоит, по сути, из ряда Таблицы стилей Sass которые реализуют различные компоненты инструментария. Таблицы стилей компонентов могут быть включены через Sass или путем настройки начальной загрузки Foundation. Разработчики могут адаптировать сам файл Foundation, выбрав компоненты, которые они хотят использовать в своем проекте.

Настройки возможны с помощью центральной таблицы стилей конфигурации. Более глубокие изменения возможны путем изменения переменных Sass.

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

Начиная с версии 3.0, в конфигурации Foundation также есть специальная опция «Настроить» в документации. Более того, разработчики используют форму для выбора желаемых компонентов и при необходимости корректируют значения различных параметров в соответствии со своими потребностями. Созданный впоследствии пакет уже включает предварительно созданную таблицу стилей CSS.

Сетка и адаптивный дизайн

Стандартно Foundation поставляется с гибкой сеткой шириной 940 пикселей. Набор инструментов полностью реагирует на использование различных разрешений и типов устройств: мобильные телефоны, портретный и альбомный формат, планшеты и ПК с низким и высоким разрешением (широкоформатные). Это автоматически регулирует ширину столбцов.

Понимание таблицы стилей CSS

Foundation предоставляет набор таблиц стилей, которые предоставляют базовые определения стилей для всех ключевых компонентов HTML. Они обеспечивают унифицированный современный внешний вид для браузера и всей системы для форматирования текста, таблиц и элементов форм.

Компоненты многократного использования

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

Компоненты и плагины JavaScript

Официальный Зурб Фонд Основная страница документации по JavaScript

Компоненты 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 объясняет,[8] и неподписанный писатель утверждает, что переключение обратно было связано с проблемами совместимости с индивидуальными усилиями; и эта производительность оказалась не такой хорошей при тестировании с новым jQuery-2.

Компоненты Foundation jQuery предоставляют общие элементы пользовательского интерфейса и фирменные расширения. Список включает в себя: диалог, всплывающие подсказки, карусели, предупреждения, очистку, файлы cookie, раскрывающийся список, формы, joyride, magellan, орбиту, заполнитель, раскрытие, раздел, верхнюю панель, гибкое видео и многие другие. Дополнительные подключаемые модули jQuery могут быть установлены в платформу Foundation для обеспечения расширенной функциональности в любой области пользовательского интерфейса, включая анимацию и элементы «вне холста», такие как выдвижные меню.

Использовать

Для Foundation существует три уровня интеграции: CSS, SASS и Ruby on Rails с Foundation Rails Gem.[9]

CSS

Чтобы использовать Foundation CSS, стандартные или пользовательские пакеты CSS можно загрузить со страницы загрузки и установить в соответствующие папки веб-сервера. Затем Foundation интегрируется в разметку HTML-страницы.[10]

SASS

Основание SASS install использует Ruby, Node.js, и Git для установки исходников Foundation. Затем Foundation предоставляет интерфейс командной строки для изменения и компиляции исходного кода в CSS для использования в разметке HTML-страницы.[11]

Самоцвет Foundation Rails

Гем Foundation Rails можно установить, добавив «гем 'foundation-rails'» в Gemfile приложения Rails.[12]

Рекомендации

  1. ^ "Релизы · Foundation / Foundation-сайты · GitHub". GitHub. Получено 24 апреля 2020.
  2. ^ "Zurb Foundation активно развивается?". Получено 21 ноя 2019.
  3. ^ "Объявление Фонд от ZURB ". Получено 22 августа 2012.
  4. ^ "ZURB запускает Фонд 3 Использование платформы Twitter Bootstrap ». Получено 22 августа 2012.
  5. ^ "Фреймворк адаптивного дизайна Фонд 4. Сначала мобильные устройства, переход с jQuery на Zepto ». Получено 28 февраля 2013.
  6. ^ «Отдельный список: погрузитесь в адаптивное прототипирование с помощью Foundation». Получено 22 августа 2012.
  7. ^ "Zurb выпускает Фонд 4. Мечта дальновидных разработчиков и дизайнеров, ориентированных на мобильные устройства'". Получено 28 февраля 2013.
  8. ^ «Почему мы отказались от Zepto».
  9. ^ Фонд Документация on четверг, 30 апреля 2015 г.
  10. ^ Фонд Начиная on четверг, 30 апреля 2015 г.
  11. ^ Фонд Начиная on четверг, 30 апреля 2015 г.
  12. ^ Фонд Начиная on четверг, 30 апреля 2015 г.

внешняя ссылка