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
🛠 Улучшайзеры
🛠 Базовые темы
для себя любимого
🛠
переиспользование
🛠
{% 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
командный центр синхронизации браузеров
⚡️
☀️
⚡️☀️
альтернативы
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)
^ стартовая тема
<-- альтернативная
Штуки дрюки
(PLS)
⚡️☀️
PLS
МОЛЕКУЛЫ
ОРГАНИЗМЫ
СТРАНИЦЫ
⚡️☀️
например
PLS
topline-heading
session-card
МОЛЕКУЛЫ
что нас ждет
⚡️☀️
PLS
slider
ОРГАНИЗМ
что нас ждет
BONUS
aleksip/plugin-data-transform
⚡️☀️
PLS
promo-homepage
СТРАНИЦА
что нас ждет
⚡️☀️
PLS
⚡️☀️
PLS + Drupal
⚡️☀️
PLS + Drupal
что нас ждет
promo-homepage
СТРАНИЦА
Bricks
->ECK / Paragraphs
-> UI Patterns Layouts
-> Components
css классы, view modes
провайдер данных для компонентов
связывает данные и компоненты
регистрирует пространства имен компонентов
Тип: Готовая сущность
Вид: UI Patterns Layouts
Тип: Поля
Вид: UI Patterns Views
Views + UI Patterns
пример за пределами Drupal
HTML -> Sketch
Sketch -> HTML
Issue: обсуждение компонентов