Темизация Drupal
2017
Founder @
Co- Founder @
Vladyslav Moyseenko, aka vlad.dancer
&
Концепт
Тренд
КОМПОЗИЦИЯ
ОО Дизайн
BEM, Atomic Design, Astrum, Fractal..
Компонент
что это?
├── slider
├── slider.{vendor}
├── slider.scss
├── slider.js
├── slider.{json|yml}
└── slider.md
веб
свойства
компонента
- переносим из темы в тему
- легко адаптировать в другую систему
- возможна асинхронная работа над его созданием
Практика
ИНСТРУМЕНТЫ
методы
подходы
ИНСТРУМЕНТЫ
🛠 TWIG
🛠 Улучшайзеры
🛠 Базовые темы
для себя любимого
🛠
TWIG
переиспользование
🛠
{% source %}
{% include %} {% extends %} {% embed %}
{% import "@namespace/template.twig %}
{{ content.title|default('awesome') }}{% extends [
'component-slider.twig',
'component.twig',
'component.twig'
]%} полезности
🛠 SassDoc
🛠 Styleguides styleguides.io, пример http://ux.mailchimp.com/patterns
🔮 ?
ИНСТРУМЕНТЫ
для твоей команды
🛠 Общая библиотека компонентов
🛠
Улучшайзеры
PostCSS postcss.parts
прокачай сss после sass
Stylus / Sass
ООП для твоего CSS'а
🛠
Gulp
поставь задачи на "рельсы"
Browser Sync
командный центр синхронизации браузеров
💡ПОДХОДЫ
- С нас стили через классы, с Drupal разметка. Twitter Bootstrap
- С нас стили через структуры, с Drupal разметка. SASS
- С нас разметка и стили, с Drupal не мешать. 😊
⚡️МЕТОДЫ
АТОмарный дизайн
⚡️
☀️
PatternLab
⚡️☀️
альтернативы
Fractal, Fabricator, Astrum, Mountain View...
имплементация Atomic Design
(PL)
это...
Демо?
только PL
⚡️☀️
PL
⚡️☀️
source/
├── _data/ (глобальные тестовые данные)
├── _patterns/ (Папка с компонентами)
├── 00-base/ (NS: @base)
├── 01-atoms/ (NS: @atoms)
├── 02-molecules (NS: @molecules)
├── 03-organisms (NS: @organisms)
├── 04-templates (NS: @templates)
└── 05-pages (NS: @pages)
└── _meta/ (header and footer PL шаблоны; подключайте внешние библиотеки сюда)
└── pattern-lab/
├── config/config.yml (конфиг для PL)
├── public/ (PL скомпилированный HTML для styleguide)
└── composer.json (зависимости для PL)
^ стартовая тема
<-- альтернативная
Штуки дрюки
- Stanalone
- Gulp
- Browser Sync
- Adding new component script
- Faker
(PLS)
🚀 Время для кода
- Сделаем декомпозицию страницы
- Зададим основные стили
- Создадим парочку компонентов
- Добавим еще пару сложных
- Соберем тестовую страницу из компонентов
- Изменим компонент и посмотрим
⚡️☀️
PLS
- topline [x]
- session-card [x]
- bg-webform
- jumbotron
- timer
- slider [x]
- keep-in-touch
- announce
- homepage
МОЛЕКУЛЫ
ОРГАНИЗМЫ
СТРАНИЦЫ
⚡️☀️
например
PLS
topline-heading
session-card
МОЛЕКУЛЫ
что нас ждет
- ! _card.sccs - ХОРОШО, card.scss - ПЛОХО
- базовый контент для компонента
⚡️☀️
PLS
slider
ОРГАНИЗМ
что нас ждет
- подключение внешних библиотек
- использование других компонентов
BONUS
aleksip/plugin-data-transform
⚡️☀️
PLS
promo-homepage
СТРАНИЦА
что нас ждет
- наполнение страницы готовыми компонентами
⚡️☀️
PLS
⚡️☀️
Демо?
PLS + Drupal
⚡️☀️
PLS + Drupal
что нас ждет
- связывание данных,
- подключение библиотек: локальных и внешних
- настройка Browser Sync
- фиксы темы (имена, картинки, иконки) (инструкция)
- избавление от стандартной разметки поля
promo-homepage
СТРАНИЦА
Задачи
СТРОИМ промо страницы
Bricks
->ECK / Paragraphs
-> UI Patterns Layouts
-> Components
BRICKS
- UI для сборки страницы
- управление
состоянием компонентов
css классы, view modes
ECK
провайдер данных для компонентов
UI Patterns
связывает данные и компоненты
Components
регистрирует пространства имен компонентов
Темизация Вьюс
Тип: Готовая сущность
Вид: UI Patterns Layouts
Тип: Поля
Вид: UI Patterns Views
Views + UI Patterns
Крутые_Идеи
#
bricks
для сборки всей страницы
#
ПОКА ГОтовил ДОКЛАД УЖЕ НАЧАЛИ ПИЛИТЬ
Крос платформенные
компоненты
пример за пределами Drupal
#
сократить итерацию доставки
компонента
HTML -> Sketch
#
Sketch -> HTML
Выводы
ССылки
ниже ⇊⇟
Issue: обсуждение компонентов
Drupal Theming 2017
By Vlad Moyseenko
