Фонд (каркас)

редактировать
ZURB Foundation
Разработчик (и) ZURB
Первый выпусксентябрь 2011 г.; 9 лет назад (2011-09)
Стабильный выпуск 6.6.3 / 8 апреля 2020 г.; 6 месяцев назад (2020-04-08)
Repository Foundation Repository
Написано наHTML, CSS, Sass и JavaScript
Тип Веб-разработка
Лицензия Лицензия MIT
Веб-сайтget.foundation

Foundation - это отзывчивый интерфейс фреймворк. Foundation предоставляет адаптивную сетку и компоненты пользовательского интерфейса HTML и CSS, шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительные функции, предоставляемые Расширения JavaScript. Foundation - это проект с открытым исходным кодом, который ранее поддерживался ZURB. С 2019 года Foundation поддерживается волонтерами.

Содержание
  • 1 Origin
  • 2 Особенности
  • 3 Структура и функции
    • 3.1 Сеточная система и адаптивный дизайн
    • 3.2 Общие сведения о таблице стилей CSS
    • 3.3 Повторно используемые компоненты
    • 3.4 Компоненты и надстройки JavaScript
  • 4 Используйте
    • 4.1 CSS
    • 4.2 SASS
    • 4.3 Foundation Rails Gem
  • 5 Ссылки
  • 6 Внешние ссылки
Origin

Foundation возник как проект ZURB для более быстрой и качественной разработки внешнего интерфейса. В октябре 2011 года ZURB выпустила Foundation 2.0 с открытым исходным кодом под лицензией MIT. ZURB выпустила Foundation 3.0 в июне 2012 года, 4.0 в феврале 2013 года, 5.0 в ноябре 2013 года и 6.0 в ноябре 2015 года. Команда начала работу над следующей версией Foundation для сайтов 7, которая, скорее всего, откажется от поддержки старых браузеров и будет реализовывать новые технологии. например, flexbox или, возможно, расчетная сетка.

Foundation for Emails, ранее известная как ZURB Ink, была выпущена в сентябре 2013 года.

Foundation for Apps была выпущена в декабре 2014 года.

Функции

Foundation был разработан и протестирован на многих браузерах и устройствах. Это мобильная адаптивная среда, построенная на Sass / SCSS, которая дает дизайнерам передовой опыт для быстрой разработки. Фреймворк включает наиболее распространенные шаблоны, необходимые для быстрого создания прототипа адаптивного сайта. Благодаря использованию миксинов Sass компоненты Foundation легко стилизованы и легко расширяются.

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

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

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

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

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

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

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

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

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

Общие сведения о таблице стилей CSS

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

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

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

Компоненты и надстройки JavaScript

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

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

Используйте

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

CSS

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

SASS

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

Gem Foundation Rails

Gem Foundation Rails можно установить, добавив «gem 'foundation- rails '"в Gemfile приложения Rails.

Ссылки
Внешние ссылки
Последняя правка сделана 2021-05-20 12:37:05
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте