Темизация   Drupal

2017

Founder @

Co- Founder @

Vladyslav Moyseenko, aka vlad.dancer

&

3  ДНЯ!

Концепт

 Тренд

КОМПОЗИЦИЯ

ОО Дизайн

BEM, Atomic Design, Astrum, Fractal..

Компонент

что это?

├── slider
    ├── slider.{vendor}
    ├── slider.scss
    ├── slider.js
    ├── slider.{json|yml}
    └── slider.md

веб

свойства

компонента

  1. переносим из темы в тему
  2. легко адаптировать в другую систему
  3. возможна асинхронная работа над его созданием

Практика

ИНСТРУМЕНТЫ

методы

подходы

ИНСТРУМЕНТЫ

🛠 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)

🚀 Время для кода 

  1. Сделаем декомпозицию страницы 
  2. Зададим основные стили
  3. Создадим парочку компонентов
  4. Добавим еще пару сложных
  5. Соберем тестовую страницу из компонентов
  6. Изменим компонент и посмотрим

 ⚡️☀️

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

https://github.com/pattern-library/pattern-figure-image

#

сократить итерацию доставки

компонента 

#

Выводы

ССылки

ниже ⇊⇟