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: https://fractal.build/
   1. Choose your template engine. For twig, use either:
      1. https://github.com/frctl/twig
      2. https://github.com/wearewondrous/fractal-twig-drupal-adapter (which has some native Drupal twig helpers)
2. Connecting Fractal to Drupal:
   1. Install https://github.com/wearewondrous/fractal_compound_handles
   2. Make sure to follow the documentation link in that repo to point to your Fractal library in the setup THEME.info.yml file, according to Component Libraries
3. Connecting Fractal to WordPress:
   1. Install Timber: https://wordpress.org/plugins/timber-library/
   2. Install https://github.com/bluecadet/timber-fractal-paths
      1. Make sure to point the definitions in the documentation to the Fractal library.

Other links:

Article by Rachel Andrew on Pattern Libraries:
https://www.smashingmagazine.com/2018/07/pattern-library-first-css/

InVision DSM:
https://www.invisionapp.com/design-system-manager

Atlassian Pattern Library:
https://atlassian.design/guidelines/product/overview

Mailchimp Pattern Library:
https://ux.mailchimp.com/patterns/color

US Web Design System:
https://components.designsystem.digital.gov/


----

If you have questions, feel free to reach out to shaun.baer@gmail.com