Чтотакое FoundationX?
FoundationX – это адаптивный Zurb CSS каркас. Разработка MODX.
Эта разработка позволяет пользователю с минимальными знаниями HTML или CSS быстро и эффективно настроить современный, адаптивный веб-сайт всего за несколько минут, всего лишь подписавшись на MODX Cloud и установив снэпшот FoundationX.
Требования
FoundationX доступен как снэпшот только в MODX Cloud. Если у Вас еще нет аккаунта в MODX Cloud, Вы можете зарегистрироваться здесь: .
История
FoundationX был создан в 2012 году YJ Tso (@sepiariver) как настраиваемая «Супер-Тема» для использования в MODX Cloud.
Текущая версия
На данный момент FoundationX существует в версии 1.0.4-beta. FoundationX доступна в бета-версии, но все еще находится в разработке. Приветствуется обратная связь. Доступна систематичная документация.
Установка
Перед тем как запустить MODX Cloud Market, Вам нужно принять запрос от FoundationX, используя форму: .
Убедитесь, что в поле «Тема» Вы указали «Прислать мне FoundationX» для того, чтобы Ваш запрос попал к нужному агенту службы поддержки.
Когда снэпшот пришлют на Ваш аккаунт MODX Cloud, Вы получите уведомление. Перейдите в хранилище файлов и найдите снэпшот FoundationX 1.x.x. Нажмите на ссылку «Добавить в облако». Если Вы еще не создали облако, в которое нужно установить FoundationX, прочтите эту документацию и создайте его. Во всплывающем окне «Добавить в облако» выберите облако, которое нужно переписать, и нажмите «Добавить в облако».
Внимание!
FoundationX Snapshot перепишет Ваше облако.
Убедитесь, что в облаке, в которое Вы хотите добавить FoundationX Snapshot, не содержит данные, которые Вы бы хотели сохранить. Если Вы в этом не уверены, сначала сохраните облако. Для этого понадобится лишь кликнуть мышкой в MODX Cloud!
Когда снэпшот будет успешно добавлен, Вам придет уведомление. Перейдите на страницу редактирования облака и в списке опций в правой боковой панели выберите «Create Admin User» (создать пользователя Администратор). Введите имя пользователя, пароль и Ваш e-mail адрес и нажмите «Create Admin User». После завершения процесса, Вам придет еще одно уведомление. Теперь Вы можете войти в MODX Manager.
Как пользоваться FoundationX?
Когда Вы вошли в систему
Первое, что Вы увидите, войдя в MODX Revolution, это приборная панель. В FoundationX она довольно обычная, есть клавиши быстрого вызова для наиболее используемых свойств, вложенные видео уроки и ссылки на всю документацию.
Управление настройками сайта
На приборной панели нажмите клавишу быстрого вызова "Manage Site Settings" (Управление настройками сайта). Таким образом, Вы перейдете на страницу редактирования настроек контекста для веб Context. Если это выглядит сложным, не переживайте – Вам нужно знать лишь то, что здесь Вы сможете редактировать информацию о себе и Вашем бизнесе в пределах сайта.
Нажмите на "Context Settings" (Настройки контекста), Вы увидите таблицу настроек. Что бы изменить значение настройки – двойной клик по существующему значению – появится редактируемое текстовое поле, в которое и можно ввести нужное Вам значение.
Внимание!
Список настроек отсортирован в алфавитном порядке, так он выглядит по умолчанию для страницы редактирования настроек в MODX Revolution. Настройки не сгруппированы логически. Просмотрите, пожалуйста, весь список для полного понимания настроек сайта в FoundationX.
|
Имя |
Ключ |
Описание |
|
Физический адрес |
fx.address |
Введите физический адрес Вашего предприятия. Если Вы не хотите, чтобы этот адрес отображался, оставьте поле пустым. |
|
Месторасположение |
fx.city |
Если Вы заполнили поле «Физический адрес», введите название города. Если физический адрес не указан, оставьте поле пустым. |
|
Создать панель для участка «контент»? |
fx.contentPanel |
Если «Да», то основной участок контента будет отображен в панели FoundationX. Больше об этом в Стилях сайта в секции ниже. |
|
Страна |
fx.country |
Если Вы заполнили поле «Физический адрес», введите название страны. Если физический адрес не указан, оставьте поле пустым. |
|
e-mail адрес |
fx.email |
Требуется, если Вы используете контакт-форму на странице обратной связи FoundationX. Так же будет отображаться в нижнем колонтитуле, если активирован Подробный нижний колонтитул |
|
Facebook URL (унифицированный указатель ресурса) |
fx.facebook |
Укажите полный URL-адрес своей страницы в Facebook. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на Facebook, оставьте поле пустым. |
|
Google+ URL |
fx.google |
Укажите полный URL-адрес своей страницы в Google+. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на Google+, оставьте поле пустым. |
|
LinkedIn URL |
fx.linkedin |
Укажите полный URL-адрес своей страницы в LinkedIn. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на LinkedIn оставьте поле пустым. |
|
Активировать титульные данные? |
fx.masthead |
Если «Да», заголовок будет отображаться выше основного навигатора, который по умолчанию содержит Ваш логотип, подзаголовок сайта и иконки социальных сетей. |
|
Телефон |
fx.phone |
Укажите номер телефона. Если Вы не хотите, чтобы номер отображался, оставьте поле пустым. |
|
Pinterest URL |
fx.pinterest |
Укажите полный URL-адрес своей страницы в Pinterest. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на Pinterest оставьте поле пустым. |
|
Почтовый индекс |
fx.postal |
Укажите почтовый код/индекс. Если Вы не хотите, чтобы код отображался, оставьте поле пустым. |
|
Показывать боковую панель блога слева? |
fx.sidebarLeft |
Если «Да», то панель блога будет отображаться слева. Если «Нет», то справа. Если Вы не используете Блог, деактивируйте страницу блога, и данная настройка не будет иметь никакого эффекта. |
|
Создать панель для виджетов? |
fx.sidebarPanels |
Если «Да», панель виджетов будет отображаться на панели FoundationX. Больше об этом в Стилях сайта в секции ниже. |
|
Штат/область |
fx.state |
Если Вы заполнили поле «Физический адрес», введите название штата/области. Если физический адрес не указан, оставьте поле пустым. |
|
Подзаголовок сайта |
fx.tagline |
Если «Да», то подзаголовок будет отображен под логотипом в заголовке сайта. |
|
Twitter URL |
fx.twitter |
Укажите полный URL-адрес своей страницы в Twitter. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на Twitter оставьте поле пустым. |
|
Подробный нижний колонтитул |
fx.verboseFooter |
Если «Да», то будет отображаться большой колонтитул вместе с названием сайта, физическим адресом, номером телефона, иконками социальных сетей и список основных пунктов меню. |
|
YouTube URL |
fx.youtube |
Укажите полный URL-адрес своей страницы в YouTube. Если ее у Вас нет или Вы не хотите, чтобы отображалась иконка и ссылка на YouTube оставьте поле пустым. |
|
|
|
|
Внимание!
Есть еще одна настройка «Системная настройка», которую нужно изменить для полной подстройки FoundationX. В главном меню Менеджера выберите System (Система)» System Settings (Настройки системы). Вверху таблицы появится выпадающее окно под названием "Filter by area..." (Фильтрация по участку…). Выберите "Site" (Сайт) внизу списка. Найдите настройки под названием "Site name" (Имя сайта) и ключ "site_name". Двойной клик по значению, которое изначально установлено как "FoundationX", и введите номер версии. Введите желаемое имя сайта. Когда Вы это сделали, кликните на ключ "site_name". Системные настройки сохранятся, как только Вы уберете фокус с поля ввода текста.
Управление стилями сайта
На приборной панели выберите клавишу быстрого вызова под названием "Site Style Settings" (Настройки стиля сайта). Таким образом, Вы перейдете на страницу редактирования FoundationX Resource, который существует для того, чтобы Вы легко могли подстроить вид сайта. В ресурсах FoundationX CSS есть четыре таблицы:
Перейдите к третьей таблице "Template Variables" (Переменные шаблона) – там начинается самое интересное!
Внимание!
Первые два пункта "Static Resource" (Статический ресурс ) и "Settings” (Настройки) и последний пункт "Resource Groups" (Группы ресурсов) не нужно редактировать! Мы советуем редактировать их только опытным пользователям MODX.
В MODX термин "Template Variables" (Переменные шаблона) или просто "TV", относятся только к пользовательским полям, приложенным к странице шаблона. В этом случае страница является CSS файлом сайта. В FoundationX Вам не нужно уметь писать CSS – Вы можете редактировать CSS при помощи "Template Variables" (Переменные шаблона).
Как видите, в FoundationX есть три категории "TV":
- цвета
- основа
- вид
Цвета
Первая категория – это категория Цвета. Вы можете редактировать цветовую схему сайта, введя шестнадцатеричные значения. Тем не менее, есть более удобный способ.
FoundationX выходит с “TV” ColorPicker (определитель цвета). Вы сможете определять цвета с помощью графического определителя цвета. Из-за ошибки в приложении определитель цвета не визуализируется при установке FoundationX из снэпшота. Вам нужно еще раз активировать встроенную программу на странице Менеджера установки/
- Вверху меню Менеджера найдите System (Система) » Package Management (Пакет установки).
- Найдите пакет "ColorPicker" (Определитель цвета) и нажмите кнопку «Переустановка».
- На следующем экране нажмите «Продолжить», затем «ОК» в окне подтверждения. Теперь Определитель цвета будет работать корректно.
Теперь, когда Вы перейдете на вкладку редактирования в FoundationX CSS Resource, “TV” будут выглядеть так:
Кликните по выпадающим стрелкам, чтобы открыть определитель цвета. Выберите нужный цвет, и шестнадцатеричное значение будет автоматически введено в “TV”. Не забудьте сохранить настройки.
Основание
В этой категории только один “TV” в версии 1.0.4-beta и это загрузчик логотипа сайта.
Кликните по выпадающим стрелкам в элементе "Site Logo" (Логотип сайта). Появится MODX Browser. По умолчанию он установлен как /assets/foundation/images/ folder (массивы/основание/картинки/папка). Если это не так, выберите нужное дерево каталогов. Для загрузки, нажмите клавишу загрузки (обведена на скриншоте). В окне «Загруженные файлы» нажмите «Добавить», выберите файл с Вашего компьютера, нажмите «Загрузить»; когда закончится загрузка, закройте окно.
Вернитесь в MODX Browser, нажмите на миниатюру логотипа, а потом «ОК». URL-адрес будет интегрирован в значение “TV” и логотип появится в заголовке сайта, если он активирован.
Вид
Третья и наиболее сильная категория FoundationX TVs.
Включать CSS. Чтобы включить отдельные CSS файлы добавьте @font-face declarations (объявление начертания шрифта) и любой CSS файл, который нужно вставить окончательный соединенный стилевой файл. Если Вы не знаете, что это значит, Вам не нужно использовать этот пункт.
Ширина контента. Этот пункт устанавливает пиксельное значение для основного контейнера контента. Размер визуализации будет зависеть от устройства и ширины браузера, но значение останется заданное Вами.
Фоновый рисунок. Загрузите картинку, которая будет использоваться как текстура фона. В FoundationX уже есть несколько картинок, но возможно Вы захотите отличиться и загрузить собственный. Загрузчик картинок работает так же, как и загрузчик логотипов.
Пользовательский CSS. Если Вы хотите авторизировать свой собственный CSS, добавьте свои описания. Они появятся в конце стилевого файла, поэтому превзойдут стили по умолчанию. Возможно, это наиболее сильный TV в FoundationX.
Внимание!
Если возникнут какие-либо проблемы, нажмите на маленькую зеленую стрелку – это сбросит все настройки TV, то есть к нулевому значению. Если Вы сохраните ресурсы таким образом, все стили сбросятся и любой пользовательский CSS, введенный в это поле, будет переписан. Это Ваш «спасательный круг», если Ваш CSS испорчен, но все же, пользуйтесь этой функцией с осторожностью.
Просто добавьте контент
Теперь переходите к добавлению контента. На каждой странице исходного сайта есть инструкция по использованию. Мы продолжим добавлять постраничную документацию. А теперь, наслаждайтесь FoundationX!
