agile theming with kalatheme & panopoly

AGILE THEMING WITH KALATHEME & PANOPOLY

Created by Andrey Stadnik / quazarweb.ru

http://quazarweb.ru/

Twitter Bootstrap

преимущества

1. Экономия времени2. Динамичные макеты3. Современный дизайн4. Простота в использовании5. Совместимость с браузерами6. Opensource project

Twitter Bootstrap

основные инструменты

1. Система сеток2. Оформление3. Утилиты адаптивности4. Формы и компоненты5. Javascript

Mobile First

/* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... }

Примеры сетки

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>

<div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<!-- Optional: clear the XS cols if their content doesn't match in height <div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div>

Twitter Bootstrap


1. Система сеток2. Оформление3. Утилиты адаптивности4. Формы и компоненты5. Javascript

Оформление Twitter Bootstrap

1. H1 H62. Встроенные элементы

<mark>, <del>, <blockquote>, <small>, <strong>

3. Стилизация списков4. Стилизация таблиц5. Быстрые float'ы (.pullleft, .pullright)Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you

open the speaker notes window (hit 's' on your keyboard).

Twitter Bootstrap


1. Система сеток2. Оформление3. Утилиты адаптивности4. Формы и компоненты5. JavascriptOh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you


Адаптивность Twitter Bootstrap

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if youopen the speaker notes window (hit 's' on your keyboard).

Twitter Bootstrap




Формы и компоненты Twitter Bootstrap


Twitter Bootstrap




Javascript в Twitter Bootstrap

Модальные окна modal.js

<button type="button" data-toggle="modal" data-target="#myModal">Запустить модальное окно



Выпадающее меню dropdown.js

<li class="dropdown"> <a id="drop4" role="button" data-toggle="dropdown" href="#">Выпадающее меню < <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">

<li role="presentation"> <a role="menuitem" tabindex="-1" href="http://bootstrap-ru.ru" target

</li> </ul></li>


Табы tab.js

<li class="active"><a href="#home" data-toggle="tab">Главная</a></li>



Всплывающие подсказки tooltip.js

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement



Информеры popover.js

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover"


Карусели carousel.js



<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>

Twitter Bootstrap на LESS и SASS

http://getbootstrap.com/css/#less

https://github.com/twbs/bootstrapsass



Kalatheme

Kalatheme системные требования

1. Libraries API 2.1+2. Panels 3.3+3. Views 3.x4. Ctools 1.x+5. JQuery Update 2.x (with JQuery version set to 1.7+)6. PHP 5.3+7. Panopoly Theme

Kalatheme установка

Установить все модулиУстановить Kalatheme и сделать по умолчанию

Сделать темой админ интерфейсаПочистить кешСоздать подтему

ИЛИ

Воспользоваться DRUSH

drush dl libraries, panels, views, jquery_update, panopoly_theme

drush en libraries, panels, views, jquery_update, panopoly_theme

drush kalatheme "My Awesome Theme"

drush kalatheme "My Awesome Theme" --fonts

drush kalatheme "My Awesome Theme" --custom=yeti

drush kalatheme "My Awesome Theme" --fonts --custom=cerulean

Настройки подтемы Kalatheme

Философия Kalatheme

Используйте один регион и панелиИспользуйте как можно меньше шаблоновИспользуйте panelizer и page manager

Используйте Panopoly templatesНе нашли нужный шаблон сделайте его сами

Используйте панелсНе используйте модули block, dispaly suite, context без надобности

Создание шаблона

Лучшая практика создания

Простая архитектураНачните с чего нибудь простого

Используйте бутстрапНе изменяйте бутстрапDon't Hack Bootstrap

Используйте плагин Стили и управленние видимостью Kalatheme

Плагин стили

Плагин управление видимостью

Спасибо за внимание!

Вопросы?

Стадник Андрей

MAIL: [email protected]: enemis87

GITHUB: https://github.com/enemisTwitter: возможно в будущем

agile theming with kalatheme & panopoly

Internet