{"id":15018321,"url":"https://github.com/trendyminds/molecule","last_synced_at":"2025-10-23T17:31:44.788Z","repository":{"id":57072639,"uuid":"152430390","full_name":"trendyminds/molecule","owner":"trendyminds","description":"⚛️ Grab Twig components, CSS and JS files outside the primary template folder","archived":false,"fork":false,"pushed_at":"2019-03-16T02:10:47.000Z","size":1707,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-30T20:04:54.004Z","etag":null,"topics":["craft","craft3","craftcms","craftcms-plugin"],"latest_commit_sha":null,"homepage":"https://plugins.craftcms.com/molecule","language":"PHP","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendyminds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-10T13:43:35.000Z","updated_at":"2022-01-03T19:17:20.000Z","dependencies_parsed_at":"2022-08-24T10:40:49.243Z","dependency_job_id":null,"html_url":"https://github.com/trendyminds/molecule","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fmolecule","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fmolecule/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fmolecule/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fmolecule/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendyminds","download_url":"https://codeload.github.com/trendyminds/molecule/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237869082,"owners_count":19379263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craft","craft3","craftcms","craftcms-plugin"],"created_at":"2024-09-24T19:51:49.680Z","updated_at":"2025-10-23T17:31:43.734Z","avatar_url":"https://github.com/trendyminds.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"resources/img/logo.svg\" width=\"35\" alt=\"Molecule logo\"\u003e Molecule\n\n\u003cimg src=\"resources/img/banner.png\" alt=\"Your component structure and Craft CMS in harmony\"\u003e\n\n## Why Molecule?\n\nMolecule 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!\n\n```\n├── components/\n│   ├── ButtonPrimary/\n│   │   ├── index.css\n│   │   ├── index.jsx\n│   │   ├── index.twig\n│   │   └── README.md\n│   ├── Gallery/\n│   ├── Hero/\n│   └── VideoEmbed/\n└── public/\n    ├── cpresources/\n    ├── index.php\n    └── .htaccess\n```\n\n## Example use\n\nSetup your `ButtonPrimary/index.twig` partial:\n```twig\n\u003ca href=\"{{url}}\"{% if newWindow is defined and newWindow %} target=\"_blank\"{% endif %}\u003e\n  {{label}}\n\u003c/a\u003e\n```\n\nThen include in your Twig templates using the following syntax:\n```twig\n{{craft.molecule.get(\"ButtonPrimary\", {\n    url: \"https://google.com\",\n    label: \"Visit Google.com\",\n    newWindow: true\n  })\n}}\n```\n\nYou can even include components in other components!\n\n**/components/Hero/index.twig**\n```twig\n\u003cdiv class=\"Hero\"\u003e\n  \u003cimg src=\"myImage.jpg\" alt=\"A short description\"\u003e\n\n  {{craft.molecule.get(\"ButtonPrimary\", {\n      url: \"#\",\n      label: \"Learn more\"\n    })\n  }}\n\u003c/div\u003e\n```\n\n## Icon Components\nIf you have an `Icon/` component there's an additional `craft.molecule.icon()` helper you can use to output the SVG directly into your templates.\n\n```\n├── components/\n│   ├── Icon/\n│   │   ├── images/\n│   │   │    ├── arrow.svg\n│   │   │    ├── play-button.svg\n│   │   │    └── twitter.svg\n│   │   ├── index.css\n│   │   └── index.jsx\n│   ├── Gallery/\n└── public/\n    ├── cpresources/\n    ├── index.php\n    └── .htaccess\n```\n\n```twig\n{{craft.molecule.icon(\"twitter\", { class: \"custom_class\" })}}\n```\n\nwill compile to:\n\n```html\n\u003cspan class=\"Icon Icon--twitter custom_class\"\u003e\n  \u003c!-- SVG contents of twitter.svg --\u003e\n\u003c/span\u003e\n```\n\n## Testimonials\n### Matt Rothenberg @mattrothenberg\n\u003e @aaronbushnell @CraftCMS I went all in 😜.\n\u003e\n\u003eFeels so nice to be able to \"compose\" components in a React-y way, too. https://twitter.com/mattrothenberg/status/1094693570177654784/photo/1\n\u003e\n\u003e \u003cimg src=\"resources/img/testimonials/01.png\" alt=\"AspectRatioBox component from Matt Rothenberg\" width=\"400\"\u003e\n\n## Requirements\n\nThis plugin requires Craft CMS 3.0.0-beta.23 or later.\n\n## Installation\n\nTo install the plugin, follow these instructions.\n\n1. Open your terminal and go to your Craft project:\n\n        cd /path/to/project\n\n2. Then tell Composer to load the plugin:\n\n        composer require trendyminds/molecule\n\n3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Molecule.\n\n4. Configure the path to your components directory within Molecule's settings\n\n## Credits\nIcon by [Aaron Humphreys](https://dribbble.com/AarhCreative) \u0026mdash; [Dribbble post](https://dribbble.com/shots/3506937-Free-iOS-App-Icons)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendyminds%2Fmolecule","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendyminds%2Fmolecule","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendyminds%2Fmolecule/lists"}