Styleguide-Driven Development with Components & Paragraphs

Drupal Camp Asheville 2024 - July 12th-14th

Room
411
Start Time

Topics

Presenter(s)

Derek DeRaps
of
Kalamuna

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.

TL;DR

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!