Drupal Theming
2017
Founder @
Co- Founder @
Vladyslav Moyseenko, a.k.a vlad.dancer
&
BIG PICTURE
TREND
COMPOSITION
ОО Design
BEM, Atomic Design, Astrum, Fractal..
COMPONENT
what is it?
├── slider
├── slider.{vendor}
├── slider.scss
├── slider.js
├── slider.{json|yml}
└── slider.md
web
SHOULD BE
component
- easy moving from theme to theme
- easy reuse in other systems, frameworks
- async work during development
THINGS
TOOLS
METHODS
APPROACHES
TOOLS
🛠 TWIG
🛠 Power-ups
🛠 Base themes
personal
🛠
TWIG
reuse tags
🛠
{% source %}
{% include %} {% extends %} {% embed %}
{% import "@namespace/template.twig %}
{{ content.title|default('awesome') }}{% extends [
'component-slider.twig',
'component.twig',
'component.twig'
]%} usefull stuff
🛠 SassDoc
🛠 Styleguides styleguides.io, пример http://ux.mailchimp.com/patterns
🔮 ?
TOOLS
for your team
🛠 Common Components Library
🛠
POWER-UPS
PostCSS postcss.parts
pump up your css after scss
Stylus / Sass
OOP for your css'ing
🛠
Gulp
put your tasks on "rails"
Browser Sync
command center for your browsers
💡APPROACHES
- Styles via classes, markup from Drupal. Twitter Bootstrap
- Add styles via css preprocessor, markup from Drupal. SASS
- Custom styles and layouts. Drupal, don't bother us! 😊
⚡️METHODS
ATOMIC DESIGN
⚡️
☀️
PatternLab
⚡️☀️
alternatives
Fractal, Fabricator, Astrum, Mountain View...
an instance of Atomic Design
(PL)
is...
WANNA DEMO?
only PL
⚡️☀️
PL
⚡️☀️
source/
├── _data/ (global dummy data)
├── _patterns/ (your components)
├── 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 templates for PL; include your 3rd party libraries here)
└── pattern-lab/
├── config/config.yml (PL's config)
├── public/ (PL's compiled HTML)
└── composer.json (PL's depth)
^ base theme
<-- another one
Mumbo-Jumbo Stuff
- Stanalone
- Gulp
- Browser Sync
- Adding new component script
- Faker
(PLS)
🚀 Time FOR DEMO
- Page decomposition
- Set basic styles
- Add a couple of simple components
- Add a couple of more complex components
- Build page using mentioned above components
- Change some component and see changes
⚡️☀️
PLS
- topline [x]
- session-card [x]
- bg-webform
- jumbotron
- timer
- slider [x]
- keep-in-touch
- announce
- homepage
MOLECULES
ORGANISMS
PAGES
⚡️☀️
case for
PLS
topline-heading
session-card
MOLECULES
issues:
- ! _card.sccs - GOOD, card.scss - BAD
- dummy content
⚡️☀️
PLS
slider
ORGANISM
issues:
- add 3rd party libs
- reusing another components
BONUS
aleksip/plugin-data-transform
⚡️☀️
PLS
promo-homepage
PAGE
issues:
- fill up page with other components
⚡️☀️
PLS
⚡️☀️
WANNA DEMO?
PLS + Drupal
⚡️☀️
PLS + Drupal
issues:
- data mapping,
- add libraries in "drupalway" style: local and external
- Browser Sync setting up
- Theme setup (docs)
- field markup cleanup
promo-homepage
PAGE
CASES
LANDING PAGES
Bricks
->ECK / Paragraphs
-> UI Patterns Layouts
-> Components
BRICKS
- UI for "panels" 😋
- control your component's states
css classes, view modes
ECK
data provider for your components
UI Patterns
map data and component
Components
namespaces registry for your components
VIEWS theming
Show: Rendered Entity with view mode
Use: UI Patterns Layouts
Show: Fields
Use: UI Patterns Views
Views + UI Patterns
crazy_IDEAS
#
bricks
build the whole page
#
there is Already progress on this issue and some workaround
cross-platform components
out of Drupal example
#
MAKE COMPONENT's DELIVERY More Time-efficient
HTML -> Sketch
#
Sketch -> HTML
Summary
LINKS
HERE ⇊⇟
3 days!
Issue: components discussion
Article: Component-based Drupal 8 theming