Style Guide-Driven Development with Components & Paragraphs

Tired of seeing your styleguide components' elegant, semantic markup chewed up and spat out by Drupal? Come learn how the Components module can seriously streamline your front-end development cycles by sharing templates between your living styleguide and Paragraph bundles. New to styleguide-driven development or Paragraphs? Not a problem, I'll start with a quick primer on both.

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. Those tools have lost their shine and perhaps outlived their usefulness; Kalateam is moving full steam ahead with some Paragraphs-based page building workflows, representing a radical shift in editorial UX for our clients.

On the UX design and discovery side, we're big fans of style guide-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-style 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 style guide components with a JavaScript implementation of the Twig templating system. You probably just said: “Wait a minute… Doesn’t Drupal 8 use Twig, too?” And then you might ask: "Are you saying we can use the exact same twig templates across prototype, style guide, 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 style guide-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 my presentation, I'll show you how to:

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

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