1. Главная
2. Верстка
3. CSS
4. Twitter Bootstrap
5. Подключаем Twitter Bootstrap к Yii

Подключаем Twitter Bootstrap к Yii

вторник, 29 января 2013 14:42:26, написал Admin

Совсем недавно мне рассказали о такой классной вещи, как фреймворк css от Твиттера - Twitter Bootstrap. Раньше, максимум, что я использовал - это "reset css". Все остальное писал ручками. Каждый раз - одно и то же. Что, понятно, отрицательно сказывалось на производительности. Немного поработав с этим фреймворком (оформление админки на Симфони 2) - пришел к выводу, что вещь это безусловно полезная. Реально ускоряет работу в разы. И вот я решил перевести и свой блог на Yii к этому же виду.

Перво-наперво скачал сам Twitter Bootstrap с гитхаба: https://github.com/twitter/bootstrap. Т.е я качал вместе с исходниками на языку less, т.к. планировал самостоятельно компилировать из них css. Вы же может скачать уже скомпилированные файлы, например, отсюда: http://bootstrap.veliovgroup.com/ Но в этом случае уже нельзя будет изменять расцветку ну и вообще вносить изменения… В общем, я остановился на сырых исходниках.

Компилировать исходники less я решил с помощью расширения Yii-less: http://www.yiiframework.com/extension/yii-less/

Скачиваем данное расширение, ложем его в папку protected/extensions. В конфиге регистрируем новый  behaviors:

	'behaviors'=>array(
	    'ext.yii-less.components.LessCompilationBehavior',
	)

Регистрируем расширение как компонент:

'components'=>array(
  'lessCompiler'=>array(
    'class'=>'ext.yii-less.components.LessCompiler',
    'paths'=>array(
      // you can access to the compiled file on this path
      '/css/bootstrap.css' => array(
        'precompile' => true, // whether you want to cache the generation
        'paths' => array('/less/bootstrap.less') //paths of less files. you can specify multiple files.
      ),
    ),
  ),
),

И в лайоте пишем Yii::app()->clientScript->registerCssFile('/css/bootstrap.css')

Все, теперь при первом запуске в нашем ассете будет новый файл. Как альтернатива – можно компилировать файлы на стороне клиента (https://github.com/cloudhead/less.js)  – но, на мой взгляд, это сильно скажется на производительности….

Одной проблемой меньше. Остался вопрос с подсветкой кода на less. Мой редактор (NetBeans) по умолчанию не распознает less. Исправляем это с помощь плагина scss-editor http://code.google.com/p/scss-editor/

1. Качаем плагин, ставим его в NetBeans
2. Ассоциируем с ним файлы Less – Сервис ->Параметры ->Файлы,  создаем новое расширение less и в списке «Связанный тип файлов» задаем ему «text/x-scss»

Перезапускаем NetBeans – и подсветка появилась!

Напоследок замечу, что для Yii есть готовое решение в виде расширения yii-bootstrap: http://www.cniska.net/yii-bootstrap/ - но я его не пробовал. Лень разбираться…

UPD На Symfony2 этот же дизайн встал без проблем

Поделиться статьей с друзьями: