Responsive Foundation Framer


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

Responsive Foundation Framer

На рисунке - Responsive Foundation Framer v 2.5 (2019 г). Интерфейс на англ. языке. Вес 296 Мб.  Цена 29 долл.
Работает в Windows, Mac OSX
Автор: CoffeeCup Software.

Responsive Foundation Framer в визуальном режиме создает сайты, предназначенные для экранов разных размеров.
Программа основана на Foundation 6 (в рабочий процесс включен Foundation Builder).
Пользователям не придется увязать в деталях кодирования. При использовании визуальных элементов управления CSS основное внимание уделяется дизайну контента, а не поиску и настройке фрагментов кода

Foundation Builder является хорошим инструментом для тех, кто интересуется изучением CSS и дизайном с помощью Foundation. Элементы управления визуальным дизайном в сочетании с предварительным просмотром в реальном времени обеспечивают превосходный механизм обратной связи, который помогает понять эффекты добавления или изменения кода CSS.

Ранее дизайн веб-страниц зачастую разрабатывался в графических редакторах (Photoshop, Illustrator и др.). При этом дополнительно часто требовался специалист по созданию кода CSS, чтобы воплотить такой дизайн в жизнь.

Используя Responsive Foundation Framer, можно в визуальном режиме разработать как дизайн, так и создать соответствующий код. Нет более необходимости в кропотливом статическом прототипировании для экранов различных размеров - вы просто разрабатываете дизайн, который можно просматривать и настраивать для любой ширины устройства.

Графические программы теперь можно использовать по назначению для создания вспомогательных элементов и задач (создание значков, кнопок, фоновых изображений и пр.).

В Responsive Foundation Framer, как и в других программах подобного рода, каркасом для размещения элементов служит сетка (по умолчанию состоящая из 12 столбцов).

Рабочий процесс и интерфейс Foundation Framer очень похожи на Responsive Site Designer.
Основной элемент интерфейса - Холст, который в основном используется для просмотра живого дизайна, выбора или изменения порядка элементов и редактирования текстов.

Остальная часть окна программы предназначена для управления тем, что происходит в рабочей области.
Справа находятся 5 панелей, каждая из которых имеет определенную роль для визуального управления контентом, HTML, CSS и Javascript.
Панель Layout. содержит элементы управления для работы с сеткой основы. Здесь вы можете добавить строки, столбцы (которые содержат фактические элементы содержимого) и указать, например, ширину столбца и настроить его для различной ширины экрана.
Components - Панель контента. Такие элементы, как заголовки, абзацы, кнопки, изображения и видео (и многое другое) можно вставить в любой столбец на холсте. Также на панели контента находятся компоненты проекта. Эта подпанель предоставляет доступ ко всем готовым компонентам, таким как навигация, карты и пр., которые включены в проект. Символы (объекты многоразового использования) доступны через панель контента.
Design - Панель «Дизайн» используется наиболее часто. Верхняя часть используется для настройки HTML / контентной части элемента.
Settings - Панель настроек страницы.
Инспектор - Содержит полный список объектов, обеспечивает быстрый переход к нужному элементу.

Программа содержит протестированную библиотеку предопределенных стилей. Модули JavaScript позволяют создавать интерактивные компоненты веб-сайта, такие как выпадающие списки и адаптивные шаблоны навигации. Наборы кодов  Bootstrap и Foundation в этом деле одинаково хороши. Объединяйте элементы, создавайте стили и добавляйте скрипты.

Программа содержит Включает в себя Motion UI. Эта библиотека помогает создавать гибкие переходы и анимации пользовательского интерфейса с помощью простых атрибутов данных.

Приоритет при работе - «сначала мобильное». Это означает, что процесс проектирования изначально ориентирован на небольшие (мобильные) устройства. Затем можно выполнить настройки для больших экранов.
Каждый макет дизайна может быть предварительно просмотрен для разных размеров экрана при проектировании.
Если вам интересно посмотреть, как конкретная часть дизайна ведет себя при разной ширине экрана, выберите любой элемент в этом разделе и переместите ползунок.


Компоненты
Постоянно растущую библиотеку компонентов CoffeeCup можно найти в Foundation Framer, Bootstrap Builder и Responsive Site Designer (который имеет обе платформы).
Библиотека включает в себя несколько из этих предварительно созданных компонентов сайта (см.  рисунок слева).

Из элементов:
Параграф
Изображение
Базовый Аккордеон
Оповещения с ссылкой
Информация с предупреждением
Оповещение об успехе со ссылкой
Предупреждение со ссылкой
Анимации и переходы (только Responsive Site Designer)
Появляющиеся значки
Кнопки, панели навигации
Кнопки с определенным действием (основным действием, вторичным действием)
Перемещение фона
Заголовок раздела
Фоновое изображение, цвет, градиент
Фоновое видео (только Responsive Site Designer)
Значки навигации
Смеси и фильтры (только Responsive Site Designer)
Dropbox
Google Диск
Карты
HTML-код
И другое.

Все объекты (компоненты) настраиваемые, так что вы можете легко вставить их в свой проект и настроить их.

Символы представляют связанные элементы или группы элементов. Изменение элемента символа глобально обновит все экземпляры этого символа.

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

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

Почему так много адаптивных сайтов выглядят так похоже? Перестройка макета и предопределенных точек останова в рабочем процессе (для создания сайтов для мобильных устройств) может быть проблемой при ручном кодировании. Foundation Framer содержит все элементы управления для визуального создания уникальных дизайнов, от экранов XS до XXXL!  Вы можете добавить точки останова одним кликом. Нет проблем перейти от 2-х столбцов сетки к одному столбцу или, наоборот, перейти от двух столцов к 6-ти (при создании сайтов для больших экранов).

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

Foundation Framer идет с несколькими шаблонами адаптивных сайтов.

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


Авторская справка (англ. язык)

Скачать

См. также  CoffeeCup - программы.


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