Foundation

Визуальные редакторы


Содержание сайта
Визуальные редакторы
Обзор программ л.10
Foundation

Foundation


Foundation  v 6 (2011 - 2019 гг., автор: Zurb) относится к так называемым фреймворкам, т.е. к сервисам, которые помогают  веб-дизайнерам в создании прототипов и макетов веб-страниц или интерфейсов программ.
Фреймворки CSS используются миллионами дизайнеров и разработчиков. Они используют хорошо организованный HTML, CSS и Javascript, который часто поддерживается и обновляется. Кроме создания основы (каркаса) макета, фреймворки  позволяют создавать компоненты, такие как выпадающие меню, навигационные меню, галереи и многое другое

Foundation содержит большой набор отрывков кода, которые можно использовать, не создавая весь код "с нуля".
Отрывки кода могут содержать разные макеты сетки, часто используемые элементы интерфейса, код элементов или блоков - большой набор различных панелей навигации, кнопок и блоков кнопок, фотогалерею, объекты  Youtube-видео, iframe, веб-формы, всплывающие окна (оповещения. подсказки), вкладки, слайды и др.

Все составные части Foundation упакованы в один пакет. Пакет включает в себя все исходные файлы Sass и JavaScript, а также скомпилированные CSS и JavaScript в несжатом и сжатом виде.

На сайте Foundation указаны элементы, которые можно загрузить, а также варианты загрузки:
Download Everything -  Скачать все
Download Essentials   Включите или удалите определенные элементы и определите размер столбцов, цвета, размер шрифта и многое другое.
Custom Download     Пользовательская загрузка.

Пользователю остается доработать предоставляемый Foundation код под свои потребности. Поэтому с Foundation  создание дизайна становится намного быстрее.
В Foundation упор делается на создании адаптивного дизайна, т.е. такого, который правильно отражается на экранах разных размеров.

Для размещения объектов применяется стандартная сетка, состоящая из 12 столбцов (по умолчанию).
Сетка настраивается (например, можно изменить количество столбцов). Если сетка по умолчанию вам не нравится или не подходит для вашего проекта - в таком случае сделайте новую сетку. Для этого используйте генератор сетки, введите значения и получите свой CSS-код.
В Foundation 6 изменен применяемый ранее способ создания сетки с новой сеткой XY (AMAZING XY Grid).

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

Быстрое создание прототипов с использованием компонентов Foundation UI
Путем корректироки исходного кода вы можете перемещать столбцы между точками останова, чтобы определить способ просмотра адаптивных макетов. Вы можете создать равномерное распределение блоков (выстроить элементы в ряд)

Разбиение проекта на страницы и создание надежной навигации
Применение разных элементов навигации или содержимого для разных устройств.

Для работы с кодом авторы Foundation рекомендуют редактор для программистов Sublime Text.

Примеры сайтов, созданных с помощью Foundation (все сайты созданы с применением адаптивного дизайна - измените ширину окна браузера).


Подробнее о Foundation

Авторское обучение (англ. язык)
Авторское видео-обучение
Примечание: Некоторые из обучающих материалов - это платные курсы.
На странице - запись на обучение

Обучающее видео (русский язык):


Скачать Foundation

См. также: Bootstrap.

Примечание:
Для использования  Foundation требуются знания HTML / CSS.
В последнее время создано ряд программ, основанных на фреймворках, которые не требуют от пользователя кодирования и основная работа в которых ведется в визуальном режиме. Таким образом эти программы рассчитаны на самый широкий круг пользователей.
Ниже - некоторые из таких программ:
Mobirise, Nicepage Website Builder, Responsive Foundation Framer, Responsive Bootstrap Builder.


Вернуться к обзору
Последнее обновление: июнь 2019 г.