Molecule

Why Molecule?

Molecule allows you to grab Twig components from outside the template folder. This is useful if you want to keep your Twig partials, CSS, React/Vue files, etc in a single component folder. Now all of your components are nicely organized in individual folder structures!

├── components/
│   ├── ButtonPrimary/
│   │   ├── index.css
│   │   ├── index.jsx
│   │   ├── index.twig
│   │   └── README.md
│   ├── Gallery/
│   ├── Hero/
│   └── VideoEmbed/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

Example use

Setup your ButtonPrimary/index.twig partial:

<a href="{{url}}"{% if newWindow is defined and newWindow %} target="_blank"{% endif %}>
  {{label}}
</a>

Then include in your Twig templates using the following syntax:

{{craft.molecule.get("ButtonPrimary", {
    url: "https://google.com",
    label: "Visit Google.com",
    newWindow: true
  })
}}

You can even include components in other components!

/components/Hero/index.twig

<div class="Hero">
  <img src="myImage.jpg" alt="A short description">

  {{craft.molecule.get("ButtonPrimary", {
      url: "#",
      label: "Learn more"
    })
  }}
</div>

Icon Components

If you have an Icon/ component there's an additional craft.molecule.icon() helper you can use to output the SVG directly into your templates.

├── components/
│   ├── Icon/
│   │   ├── images/
│   │   │    ├── arrow.svg
│   │   │    ├── play-button.svg
│   │   │    └── twitter.svg
│   │   ├── index.css
│   │   └── index.jsx
│   ├── Gallery/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

{{craft.molecule.icon("twitter", { class: "custom_class" })}}

will compile to:

<span class="Icon Icon--twitter custom_class">
  <!-- SVG contents of twitter.svg -->
</span>

Testimonials

Matt Rothenberg @mattrothenberg

@aaronbushnell @CraftCMS I went all in 😜.

Feels so nice to be able to "compose" components in a React-y way, too. https://twitter.com/mattrothenberg/status/1094693570177654784/photo/1

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    cd /path/to/project
   

2. Then tell Composer to load the plugin:

    composer require trendyminds/molecule
   

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Molecule.

4. Configure the path to your components directory within Molecule's settings

Credits

Icon by Aaron Humphreys — Dribbble post