How we build component-based Drupal themes

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Molecules are where things start to get more tangible as we start combining atoms together. Example, a search form comprised of a label, input and submit button. Organisms allow us to combine molecules into something relatively complex, such as a distinct section of the interface. Example, the header or footer of a site. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action. Example, article node page. Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see. Drupal: In general, fields can be thought of as atoms, nodes as molecules and views, paragraphs or other listings as organisms.

Emulsify Pattern Lab (+ Gulp)

• Drupal 8 starterkit theme • Styleguide • Component Library • Prototyping Tool { Emulsify provides several useful components out of the box such as images, menus, headings (and a whole lot more) and the accompanying Drupal templates have already been overwritten and plumbed accordingly so you can quite literally start working on the pattern lab and see the results directly inside the Drupal build as you go. Styleguide (base, atoms): colors, typography, butonns, form elements, icons, utilities, grids Component Library (molecules, organisms): cards, media blocks, menus, grids of media blocks – collect own examples! Prototyping Tool (templates, pages): homepage, full node view, landing page – this level is not used in Drupal (do not include a whole PL page into Drupal) parallel frontend / backend workflow. Frontend dev does not depend on backend results. Get rid of thinking in Drupal terms / drupalisms. No Drupal knowledge needed to create the frontend components create non-static “design”: quicker than building it in Drupal, clients may be involved One source of truth: uses the same components in prototype and in Drupal Reuse a the design system in multiple sites (- theoretically. But: maintainability, fragmentation!)

templates/product/node—product—teaser.html.twig {% embed “@molecules/card/01-card.twig” with { card_title: label, card_stamp_text: content.field_tags.0, } %} {% block card_img %} {{ content.field_media.0 }} {% endblock %} {% endembed %} Integrating PL into Drupal components needs work! - create integrating templates of Drupal theme (few lines of code) - may need to change the PL component (eg. different data source) Tools coming with Emulsify - Components (Library module), Unified Twig extensions (module), Attach Library Twig extension Drupal has specific Twig functions, filters, tags, etc. that it uses that Pattern Lab is not aware of. Pattern Lab has an easy way to add those though, which is in components/_twig-components/. There are examples of filters and functions already in there (e.g., t(), without(), kint() functions). Documentation on how to add these can be found here. Twig functions for nesting components - Include: pull in file, replace variables - Extends: pull in file, replace Twig blocks (not used because variables lways defined) - Embed: pull in file, replace variables and / or twig blocks

Component Config title: Case Study label: M9 Case Study default: oneitem variants: - name: oneitem label: One Item title: Case Study 1 item context: items: 1 logo: 1 - name: twoitems label: Two Items title: Case Study 2 items context: items: 2 logo: 1 - name: Reversed View title: Case Study 2 Reverse context: reversed: ‘reversed’ hidden: false order: 4 status: ‘wip’ notes: “Different from the default component because this one is funky.” Lots of config format (the default is json, we used yml) Whether or not the collection (and all its children) should be hidden from listings and navigation. An integer order value, used when sorting collections. Overrides any order value set as a property of the directory name if set. Any notes about the variant. Displayed in the web preview UI if present. Accepts markdown.