Использование в шаблонах Twitter Bootstrap - часть 1.

Не буду описывать особенности данного фреймворка, для этого есть документация:

Сразу перейдем к разработке шаблона: Начнем с того, что оптимально использовать html5+css3 при верстке сайта, т.к. сам фреймворк использует данную связку, т.е. структура файла index.php шаблона будет примерно следующей :

<?php defined('_JEXEC') or die; ?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/bootstrap-responsive.css" type="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <jdoc:include type="head" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>

...

  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/widgets.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-alert.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-button.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-carousel.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-collapse.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-dropdown.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-modal.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-tab.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-tooltip.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-popover.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-typeahead.js"></script>

</body>
</html>

Итого:

  • Указываем DOCTYPE — (для html5 и соответственно для адекватной обработки размера окна браузера используемого устройства)
  • Указываем mteta-tag для обработки динамических запросов -
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Затем грузим jQ и CSS фреймворка, затем подключаем заголовки выводимые самой Joomla и только после этого подключаем наш CSS, для переопределения стилей bootstrap.
  • Сам фреймворк и используемые для него библиотеки оптимально вынести в конец документа.

Дополнительно желательно отключить mootools, чтобы в последствии не пришлось использовать jQuery.noConflict(): 

unset($this->_scripts[$this->baseurl.'/media/system/js/mootools-core.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/mootools-more.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/core.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/caption.js']);
if (isset($this->_script['text/javascript']))
{
   $this->_script['text/javascript'] = preg_replace('%window\.addEvent\(\'load\',\s*function\(\)\s*{\s*new\s*JCaption\(\'img.caption\'\);\s*}\);\s*%', '', $this->_script['text/javascript']);
   if (empty($this->_script['text/javascript']))
      unset($this->_script['text/javascript']);

Кроме того, если требуется поддержка html5/css3 в браузерах ie младших версий, то стоит подключить еще и стили и скрипты для этих браузеров.

Модальное окно в дефолтном варианте не самый лучший выбор для показа изображений, по этому кроме него решено подключать jquery.colorbox, т.е., при весе 10Кб, поддерживает фреймы, слайдинг изображений, AJAX, видео, галаереи изображений, флэш, плюс достаточно прост в настройке и модификации, а т.к. мы используем еще и jQ, то вполне можно подключить еще доп. библиотеку слайдера на 5-20 строк кода.

На финальной стадии проекта оптимально все скрипты и CSS объеденить в два файла, провести компрессию и упаковать в gzip самостоятельно, это даст ощутимый выигрыш в скорости, но при этом потребуется перенести все скрипты из компонентов в данный единый файл. Объединять плагинами — не рекомендую, больше проблем в итоге будет.

  • 0
  • 0
  • 8
8 comments
Напиши с каким гемороем переделывался дефолтный шаблона LS на bootstrap. Честно ни когда особо не понимал смарти :-) еще раз убедился с каким скрипом он пилиться.
А смысл писать, блог не о LS ))
А чем вам смарти не понравился? очень понятный шаблонизатор, на php похож на 90%
Смарти на самом деле плох кол-вом файлов, слишком много их, да и привычка к шаблонизаторам на подобие джумловского и похожих на него.
Я очень часто программирую под HostCMS, там основной вывод идет через xslt шаблонизацию. Вот где непривычно было, но со временем я даже начал получать удовольствие от простоты работы, гораздо удобнее чем html-php и выборки мощнейчие через xpath можно делать. Так-что все дело в привычке.
Я последние сайты (штук 5) делал только на бутстрапе. Оч. удобно. Я, кстати, переработал com_menu — специально под бутстраповские dropdown-ы… если будет время — выложу макет и описание. 
То же переделал, можно будет сравнить и выложить как отдельный шаблон для модуля меню.
comment deleted
Only registered users can comment.
Desight by студия дизайна creatime.org