0

Товар успешно добавлен в корзину

Оформить заказ

Поддержка формата Bootstrap 3 в конструкторе сайта ReadyScript

Bootstrap – cамый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Он использует самые современные технологии CSS и HTML, именно поэтому он был включен в список поддерживаемых сеточных фреймворков в конструкторе сайта ReadyScript. Прежде всего, давайте рассмотрим, какие преимущества имеют темы оформления ReadyScript, собранные по сетке, для этого детальнее окунемся в техническую часть таких тем.  

Тема оформления, собранная по сетке оперирует понятиями: контейнер, строка, секция, блок. Первые три элемента - это понятия, которые полностью дублируют сущности, используемые в bootstrap.

  • Контейнер – это элемент с классом «container», который имеет условную ширину в 12 колонок и может содержать Строки.
  • Строка – это элемент с классом «row», который может содержать Секции или вложенные Строки.
  • Секция – это элемент с классом «col-*-*», который может содержать вложенные Секции, Строки или Блоки. Ширина секции, задается в диапазоне от 1 до 12 и определяет количество колонок, которые она занимает.
  • Блок – это видимая часть модулей системы, например, блок категорий, блок меню, блок с баннерами, блок со списком товаров, и т.д.

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

bootstrap

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

Bootstrap 3 по-умолчанию поддерживает адаптации для 4х видов устройств:

  • очень малые устройства (XS), экран менее 768 px
  • малые устройства (SM), экран не менее 768 px
  • средние устройства (MD), экран не менее 992 px
  • большие устройства (LG), экран не менее 1200 px


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

xs sm md lg

Показать HTML для данной сетки

Рассмотрим на примерах различные случаи генерации сетки

1. Классический пример

В Конструкторе сайта это будет выглядеть так:

classic

2. Что делать, если до или после контейнера(.container) требуется вставка индивидуальной разметки?

В таком случае необходимо воспользоваться внешним и внутренним шаблонами, которые можно указать у контейнера. В данном случае внешний шаблон должен иметь следующее содержимое, назовем файл outside.tpl:

А внутренний, назовем его inside.tpl следующее:

Переменная $wrapped_content всегда содержит HTML-код вложенных элементов. Указываем шаблоны outside.tpl, inside.tpl в настройках контейнера.

edit_container

Внешние и внутренные шаблоны дают полную свободу программистам по обертыванию автоматически сгенерированного кода собственным. Для простых случаев, когда контейнер требуется просто обернуть одним элементом с неким классом, можно воспользоваться настройками контейнера "Внешний элемент", "CSS-класс оборачивающего блока".

3. Что делать, если после секции(.col-*-*) требуется вставка индивидуальной разметки?

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

Указываем шаблон inside.tpl в настройках секции.

edit_section

Если необходимо после Секции (col-*-*) вставить clearfix, то необходимо отметить соответствующий флажок в окне редактирования секции. Итоговый HTML будет в этом случае таким:

4. Как добавить произвольные классы к генерируемым системой элементам?

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

Файлы стилей в темах оформления

После того, как сетка в Конструкторе сайта будет настроена, ReadySript успешно сгенерирует соответствующий HTML, однако подключение необходимых CSS файлов в клиентской части полностью ложится на разработчика темы. То есть в файле layout.tpl нужно позаботиться о подключении файлов CSS фреймворка нужной конфигурации, чтобы HTML обрел необходимую форму.

Приятная мелочь

Во время настройки элементов в Конструкторе сайта, существует вероятность, что какая-либо секция съедет за область видимости браузера, в случае некорректного указания параметров у секции. Как найти потом такую секцию, чтобы открыть её повторно к редактированию и ввести корректные параметры? С помощью специально разработанной для таких случаев кнопки, расположенной в правой части контейнера. Нажатие на данную кнопку будет включать режим "плоского" отображения всех элементов. В таком режиме не действуют смещения и размеры элементов, поэтому абсолютно любую секцию можно будет легко найти.

grid_switch

Заключение

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


03 ноября 2015 18:22, Артем Полторанин
Рассказать друзьям: