Rapid Drupal 8 Development with Components

 

Colin Watson, Digital Producer

Murray Woodman, Architect

Challenge to business

 

Building Drupal sites easily from zero

Time

Costs

Undefined spec / or keeps changing

Iterative Design

 

 

Rapid development

 

  1. Reuse components across the site
  2. Iterative design in the browser

Live Demo

Why we need rapid development

 

Save time

Save money

Consistent look & feel

Iterative improvement

How to do rapid development

 

REUSE components quickly

MODIFY components quickly

Design COMPONENTS, not pages

 

What is a component?

 

Any reusable thing is a component

Header, Footer, a block…

 

 

Components

Designing components

 

Our Solution

 

No coding

No dev skills

Quick to get basic theming

Modify easily

Reuse components

Demo

Demo overview

 

  1. Demo website
  2. One theme
  3. Components
  4. Modifiers
  5. Skins

Morpht Vanilla Theme

 

A single theme

Minimalist

Universal

Vanilla flower

 

Components

 

  1. Blocks,  Paragraphs, Nodes
  2. View Modes
  3. Layouts
  4. Theme regions
  5. Drupal element

Modifiers

Contain the magic

Capture Drupal theming power

Apply to any element on the page

  • Colors
  • Fonts
  • Corners
  • Shadows
  • Padding
  • Background Images
  • Background Parallax
  • Background Video
  • Image FX
  • Menus

 

 

 

Skins

 

A set of modifiers

Mapped to elements on the page

Displayed according to context

 

Defined by editors in the UI

1. Modify Content

 

Apply Modifiers direct to Custom Blocks or Paragraphs.

2. Modify Skin

 

Apply modifiers across the site

3. Skins in action

 

Skins combine together.

Skins inherit.

Skins map to elements.

 

The whole is greater than the sum of its parts

全体は部分の総和にあらず

Theme +

Components +

Modifiers +

Skins +

Mappings

Open Source

 

Development is ongoing

Modifiers, Skins and Plugins - GPL

Estimated time 2 months.

Opportunities

 

Multi-sites
Sub-sites
Campaign sites
Marketing sites
Group content

Thank You

 

Colin Watson, Digital Producer

Murray Woodman, Architect

 

http://morpht.com

@morphtmedia