В современном WEB пространстве для разработки проектов все чаще и чаще используются готовые Фреймворки для создания готовых сеток сайтов. Это объясняется тем, что Фреймворки уже поддерживают такие возможности как адаптивность, готовые плагины расширяющие возможности функционирования проекта, а так же множество компонентов в виде кнопок, готовых иконок (анаглифов), не нагружающих сайт, всплывающих меню, таблиц которые можно разместить в проекте без особых трудностей, вставив соответствующий компонент в нужный блок.
Выбор Canmos пал на Фреймворк от разработчиков twiter bootstrap, т.к по сравнению с такими Фреймворками как Foundation и Skeleton обладает рядом преимуществ:
1 Поддерживает большое число пользователей
2 Интеграция в CMS такие как Joomla Wordpress
3 Огромный выбор виджетов и плагинов для расширения функционала проекта.
4 Адаптивность сеток.
Для знакомства с процессом интеграции Bootstrap 3 в CMS joomla сотрудниками canmos были разработаны несколько шаблонов которые зарекомендовали себя и используются в готовых web решениях, а так же могут быть адаптированы практически к любому web сайту будь то проект салона красоты, кафе, интернет провайдер, форум и тд.
В современном WEB пространстве для разработки проектов все чаще и чаще используются готовый Фреймворки для создания готовых сеток сайтов. Это объясняется тем, что Фреймворки уже поддерживают такие возможности как адаптивность, готовые плагины расширяющие возможности функционирования проекта, а так же множество компонентов в виде кнопок, готовых иконок (анаглифов), не нагружающих сайт, всплывающих меню, таблиц которые можно разместить в проекте без особых трудностей, вставив соответствующий компонент в нужный блок.
Выбор Canmos пал на Фреймворк от разработчиков twiter bootstrap, т.к по сравнению с такими Фреймворками как Foundation и Skeleton обладает рядом преимуществ:
1 Поддерживает большое число пользователей
2 Интеграция в CMS такие как Joomla Wordpress
3 Огромный выбор виджетов и плагинов для расширения функционала проекта.
4 Адаптивность сеток.
Для знакомства с процессом интеграции Bootstrap 3 в CMS joomla сотрудниками canmos были разработаны несколько шаблонов которые зарекомендовали себя и используются в готовых web решениях, а так же могут быть адаптированы практически к любому web сайту будь то проект салона красоты, кафе, интернет провайдер, форум и тд.
Рассмотрим структуру и описание шаблонов которые вы можете использовать для своих решений, а так же адаптировать готовые проекты под данные шаблоны.
1 CMS Joomla + forum(KENUMA) + BOOTSTRAP 3
Шаблон содержит в себе 6 каталогов с именами:
CSS (cюда помещаем пользовательские файлы стилей .css, а так же файлы стилей bootstrap.css )
HTML (каталог переопределений. Сюда помещаем стандартные компоненты joomla которые по каким то причинам хотим изменить)
IMAGES (Каталог изображений соответственно)
LANGUAGE (Каталог языковых файлов шаблона, если шаблон пишем мультиязычный)
JS (Каталог Java скриптов используемых шаблоном)
FONT (содержит в себе пользовательские шрифты, а так же анаглифы bootstrap)
Каждый каталог содержит файл index.html c пустым содержание для безопасности. Кладется для исключения отображения содержимого каталога
Так же каталог шаблона содержит еще 2 файла. Это templateDetails.xml и index.php
templateDetails.xml - Файл с описание параметров шаблона. Содержит в себе описание позиций модулей, общую информацию о шаблоне (автор, дата создания). Так же можно добавить описание доболнительных параметров шаблона (К примеру выбор фона сайта, выбор цвета шрифта)
Index.php - Основной файл описания шаблона (В данном случае содержит размеченную сетку, и процедуры подключения стилей JS, которые используются для описания шаблона)
<body>
<div><jdoc:include type="component" /></div><div class="tbForm_CallMe jump" onclick="window.open('http://www.canmos.ru')"><div class="tbForm_shadow"> </div><div class="tbForm_fone"><span>Подключить Интернет</span></div></div></body>
Как видно из приведенного кода в теге выводиться компонет CMS Joomla через якорь jdoc:, каторый занимает всю ширену экрана. Именно в это простанство пространство выводитьс форум kenuma каторый и являеться компонентом Joomla.
После вызова компонента следует вывод прыгающей кнопки div class="tbForm_CallMe jump, для которой описана процедура вызова нового окна в браузере и открытия в нем соответствующей ссылки.
Пример интеграции
Warning: No valid images found in the specified directory. Please check the image directory or the image filter!
Debug: specified directory - https://canmos.ru/images/lexa_pub
2 CMS Joomla + BOOTSTRAP 3
Основная задача данного шаблона сверстать сетку которая может быть алаптирована к любому web проекту. Шаблон так же содержит index.php вначале которого следует стандартные описания подлючение файлов стилей .css, скриптов .js. Далее после открытия тега следует верстка макета.
В соответствии с документацией bootstrap каждый горизонтальный блок состоит из 12 частей, которые можно делить в любом целом соотношении. Если сумма всех частей одного блока будет больше 12 то соответсвующий блок переместиться на следующую строку.
<div class="container" id="pos1" ><div class="row"><a class="col-sm-3" id="pos11" href="/" ><jdoc:include type="modules" name="pos1.1" style="nome" /> </a><div class="col-sm-3" id="pos12" ><jdoc:include type="modules" name="pos1.2" style="nome" /> </div><div id="pos13" class="col-sm-3"><jdoc:include type="modules" name="pos1.3" style="nome" /></div><div id="pos14" class="col-sm-3"><jdoc:include type="modules" name="pos1.4" style="nome" /></div></div></div>
Как видно из приведенного выше кода, первый контейнер имеет имя pos1, и содержит в себе 4 блока col-sm-3 в сумме равных 12. В эти 4 блока выводятся соответствующие модули CMS Joomla c именами позиций pos1.1 - pos1.4
Далее следует следующий контейнер:
<div class="container-fluid" id="pos2"><div id="pos2" class="col-sm-12"><div><jdoc:include type="modules" name="pos2" style="nome" /></div></div> </div>
Выводится контейнер с одним блоком. И далее по аналогии. Данный шаблон предоставляет возможность адаптировать любой проект под данную структуру.
Пример реализации
Warning: No valid images found in the specified directory. Please check the image directory or the image filter!
Debug: specified directory - https://canmos.ru/images/lexa_pub1
3 CMS Joomla + BOOTSTRAP 3 + разделение главной и внутренних страниц сайта + подключение доп. стилей для меню
Целью данного шаблона, является определение главной страницы сайта с определенным набором модулей, которые будут отсутствовать на внутренних страницах проекта, а так же подключение доп. стилей .css для конкретного материала.
Первая задача реализуется путем php скрипта проверки является ли страница главной. Если условие выполняется то выводятся данные, которые обозначены в условие «true»
<?php if(JURI::current()== JURI::base()){ echo 'Hello world!';}
else { echo 'FREE WIFI ';}
Вторая задача реализуеться путем сверки ItemID меню если условие удовлетворяется, то подключаться дополнительный файл стилей. Выполняется в теге head.
$tplurl = $this->baseurl.'/templates/'.$this->template;$Itemid = JRequest::getInt( 'Itemid', 142, 'get' );switch ($Itemid) {case '142';echo '<link rel="stylesheet" href="'.$tplurl.'/css/teampleate.css" type="text/css" />';break;}?>
Наглядным примером интеграции данного шаблона являеться проект canmos.ru