Styleguide-Driven Development with Components & Paragraphs

Drupal Camp Asheville 2023 - IN PERSON - July 7th-9th

Start Time



Derek DeRaps

The Paragraphs module has been around since 2013 and rapidly gained acclaim for being the bomb diggity. And though Panels, Panopoly, and the In-Place Editor have long been staple ingredients in Kalamuna’s awesome-sauce, our love affair is officially over. We find those tools have lost their shine and perhaps outlived their usefulness; Kalateam is moving full steam ahead with some Paragraphs-based page building workflows that represent a radical shift in editorial UX for our clients.

On the UX design and discovery side, we're big fans of styleguide-driven development (SGDD). But there's one giant PITA: Who wants to build out their components in beautiful, semantic markup just to to turn around re-implement their div-riddled, bastard cousins in Drupal-land? Aye, not this code pirate. Fortunately, there's now a better way: Thanks to John Albin's recent work on twig.js for KSS-node, we can build our precious styleguide components with a JavaScript implementation of the Twig templating system. “Wait a minute… Doesn’t Drupal 8 use Twig, too?” you probably just rhetorically wondered aloud. Yes, now pause and let that sink in for a moment... "Are you saying we can use the exact same twig templates across prototype, styleguide, and Drupal implementation?!" With a little help from the Components module, that's absolutely correct. Mind=blown.


Come check out this session if,

  • You keep hearing about styleguide-driven development or Paragraphs and want to investigate the hype, or...
  • You've tried SGDD development but found it too burdensome, or...
  • You already use Paragraphs and are ready to level up your game.

In our presentation, we'll show you how to,

  1. Break down your wireframes into components.
  2. Create a living styleguide from those components.
  3. Create Paragraphs bundles to match your components.
  4. Share markup between your styleguide and Drupal, so that a change to one reflects instantly in the other.
  5. Design a next-level page-building editorial UX with Paragraphs.

We are excited to evangelize these new tools for Drupal front-end development. See you there!