Fractal is a powerful component library and style guide system that runs on node.js. This talk will demonstrate how Fractal can be used to build front-end components that can then be used in Drupal OR WordPress projects, with data injected from the CMS. This process is not a React or Headless system, but a standard html, css, and javascript stack that allows front end and back end teams to work in parallel. 
Fractal libraries can also be used for code documentation and style guides, which helps to promote consistent code reuse and reduce technical debt. 

Bluecadet has used Fractal in multiple large-scale Drupal and WordPress websites for universities and museums. We have also created an internal library of reusable, accessible components that has improved our code quality and helped us ship sites faster.

The talk will address:

  • An overview of Fractal
  • Connecting Fractal components with data from Drupal and WordPress
  • Planning data structures for components
  • Organizing a Fractal project and a crash course in design systems
  • Things that Bluecadet has learned along the way

Thanks for listening to my talk!

Here are some links to references:

  1. Fractal:
    1. Choose your template engine. For twig, use either:
      2. (which has some native Drupal twig helpers)
  2. Connecting Fractal to Drupal:
    1. Install
    2. Make sure to follow the documentation link in that repo to point to your Fractal library in the setup file, according to Component Libraries
  3. Connecting Fractal to WordPress:
    1. Install Timber:
    2. Install
      1. Make sure to point the definitions in the documentation to the Fractal library.

Other links:

Article by Rachel Andrew on Pattern Libraries:

InVision DSM:

Atlassian Pattern Library:

Mailchimp Pattern Library:

US Web Design System:


If you have questions, feel free to reach out to


Track Audience(s) Experience Level Tags
Back End Development
Front End Development
Developers (Back-end php focused)
Developers (Front-end focused)
Developers (Javascript focused)
Design Systems

Scheduling Information

10:00am - 10:50am
, FrontEnd, Design systems

About the Presenter

Shaun Baer


Shaun Baer is a full-stack developer at Bluecadet who champions inclusive design practices and spearheads accessible web standards. He has helped create accessible websites for universities, museums, and non-profits. 

Session Recording

This Session's Recording