Drupal and the New Front-end Workflow
Michael Potter
@hey__MP
Why is Drupal theming hard?
Front-end devs have 99 problems...
...but three big ones
1. Semantic markup is hard
2. Responsive is really hard
3. Accessibility is really !*@&ing hard
Why is theming in Drupal hard?
- Standard Drupal markup
- Opinionated base themes
- Layout managed in database
- No cool front-end tools!
Traditional workflow
- Get a Photoshop comp
- Create a new content types
- Add a bunch of fields
- Download Display Suite / Panels
- Spend the next week of your life in style.css
And then these things came along...
currently showing 8 of 3,190,398,844 frameworks
Where do they get those wonderful toys?
What does Google recommend?
Yeah but Drupal can't do all that right?
What if I told you
you can use front-end best practices in Drupal?
YOLO!
New methodology
- Start statically
- Create reusable design components
- Automate as much as possible
- Handcraft as much HTML as possible
Rapid prototyping
- We start writing HTML and CSS as soon as possible to create an HTML Prototype
- Photoshop and Illustrator used to inform the HTML Prototype, not to create comps
- Team members should have real time access to the prototype for iterative feedback
From Phase2 The New Design Workflow Drupalcon LA 2015
https://events.drupal.org/losangeles2015/sessions/new-design-workflow
Lets see this in action
It starts with an idea
quickly moves to a prototype
HTML Prototype
Lets talk automation
Front-end tools
- Automation tools that allow us to produce HTML / CSS / JS extremely quickly
- Utilize frameworks and mixins that help you work quickly (front-end stacks, grids, animations, your own)
- This will be your new best friend! Know it inside and out.
Get up and running quickly
Style Guide
Style guide
- Library of design components
- As we build components we need to document how they can be used throughout the site
- Makes implementation easier
- Maintains consistency
adding a component to the style guide
Style guide generators
Moving into Drupal
Steps to moving into Drupal
- Add CSS and JS files
- Start moving our custom HTML to tpl files
- Use template.php to alter variables and render arrays
- Utilize view modes to display different design components
Adding our files
Moving into page.tpl
Adding template variables
Adding template variables
Adding template variables
Adding regions
Customizing a block example
Customizing a block example
Add an override template file
block—listserv—listserv-subscribe.tpl
Customizing a block example
Add a hook_form_alter to adjust the markup of the submit button
Customizing a block example
Perfecto!
ELMS Learning Network and the new front-end workflow
ELMSLN workflow
- HTML prototype on codepen.io
- Collaborate on Github
- Create view modes for component variations
- Move prototype into Drupal
- Add component to styleguide
- Deploy....
HTML Prototype
HTML Prototype
HTML Prototype
Create new design component statically
Collaborate and Discuss
Post new issue on Github
Add component to style guide
Add custom view modes
View mode for each variation
Move into Drupal
Override node--inherit--card.tpl
Move into Drupal
Components as
view modes
Components as
view modes
- Each view mode represents a design component variation
- We can offer design options to our content creators while maintaining control over markup
Components as view modes
moving from prototype to node--article--teaser.tpl
Components as view modes in ELMSLN
Using view_mode_tab
Benefit of components as view modes
- Design components are highly reusable
- Can change markup retroactively!
- Content contribs still have options
- We just won battle for the body field!
How do I get view modes into my content?
Helpful Drupal modules
- Makes having lots of view modes manageable
- Generate custom template suggestions and preprocess functions easily
Inherit Display example
template_node__inherit__image() alter variables for the following templates
- image.tpl
- image__left.tpl
- image__left__lightboxed.tpl
- image__right.tpl
- image__right__lightboxed.tpl
template_node__inherit__image__left() alter variables for the following templates
- image__left.tpl
- image__left__lightboxed.tpl
Inherit Display
inherit display settings from parent's view mode
Inherit Display
Demo
Optionally override core and contrib CSS/JS files
Gives you a preview page of common Drupal elements
Gives you granular control over labels and field wrappers in your view
- Adds classes to components based on field values
- Helpful if you don't want to create new view modes for every components variation