https://github.com/trendyminds/molecule

⚛️ Grab Twig components, CSS and JS files outside the primary template folder
https://github.com/trendyminds/molecule

craft craft3 craftcms craftcms-plugin

Last synced: 2 months ago
JSON representation

⚛️ Grab Twig components, CSS and JS files outside the primary template folder

• Host: GitHub
• URL: https://github.com/trendyminds/molecule
• Owner: trendyminds
• License: mit
• Created: 2018-10-10T13:43:35.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-16T02:10:47.000Z (almost 6 years ago)
• Last Synced: 2024-09-27T08:41:46.946Z (3 months ago)
• Topics: craft, craft3, craftcms, craftcms-plugin
• Language: PHP
• Homepage: https://plugins.craftcms.com/molecule
• Size: 1.63 MB
• Stars: 20
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
#  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:

```twig



  {{label}}



```

Then include in your Twig templates using the following syntax:

```twig

{{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**

```twig



  


  {{craft.molecule.get("ButtonPrimary", {

      url: "#",

      label: "Learn more"

    })

  }}



```


## 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

```

```twig

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

```

will compile to:

```html



  



```

## 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](https://dribbble.com/AarhCreative) — [Dribbble post](https://dribbble.com/shots/3506937-Free-iOS-App-Icons)