Drupal is by default, a component-based system. Everything is in place for a Frontend developer to work in a component way, but yet we almost never do.

Compony is the bridge between the component nature of Drupal and modern Frontend. It does this with flexibility and demanding a component-based thinking from developers.

Or as the Oxford dictionary would say in a Frontend-cryptic-way:
“heraldry made up of alternating metal and colour, colour and fur, or fur and metal”

The problem

Everything in our frontend follows the logic of components. But when we plug our frontend logic in to Drupal, all of our marvels of writing component-based are lost. This is due to just a few limitations within Drupal (and also in our way of thinking as frontend Drupal developers):

• We write component-based Sass, yet we compile all of our CSS in to one file.
• We write component-specific JS, yet we load each line of JS on every page.
• We have Drupal libraries api, yet we put all of our assets in to one global library.
• We all are theming the output of the same Drupal modules, yet we are unable to share our solutions between each other.
• We make beautiful things project-specific styled components, yet we can't plug it in to another project.
• We all love Drupal because of it's open source collaboration, yet the collaboration seems to stop when we talk about the frontend components or tools within our theming setup.

The Compony solution

The solution comes in 3 major parts:

1. The Compony theme

2. The Compony Gulp

3. The Compony platform

The Compony theme

The Compony-theme is a theme-structure that transforms a Drupal-theme in to a structure where everything becomes a component. You can download the theme from The Compony platform.

Next to a few PHP-functions that make all the theming you can do in the theme fully component-based. there is nothing special about it, next to a certain folder structure that you have to follow. (Docs: Folder structure)

In the folder with the name components, you can put your components. (Docs:Component structure) (Component example: text-dropdown)

The Compony Gulp

Creating a state-of-the-art Gulp-setup can cause head-scratching baldness.

Therefor we created a customised open source Gulp setup for this exact Compony-theme. The Gulp setup is opinionated, but customisable to the needs of your project and to the needs of a development team that operates in multiple ways. Within the same project it can handle multiple themes at once, multiple development environments within different operating systems.

It's even hand-tuned to know when to clear Drupal's cache for you while you are working. (docs: The Compony Gulp)

When downloading the theme from the homepage, the Gulp-setup is already included inside the theme.

The Compony platform

The Compony platform enables the community to share their frontend components with each other. It serves also as the hub on where we connect, contribute, discuss and evolve with the ever-evolving standards of Frontend.

Progressively bringing it all together

Following the logic of progressive enhancement, it's possible to only use certain parts of Compony.

The Backender's setup

Only using the Compony theme works in Drupal, without using components from the platform or using the Gulp setup. Drupal doesn't need Gulp to be able to correctly understand your theme.

This means that you can also use this approach on your server. Gulp is merely there for development purposes of the Frontend Layer anyway.

The Frontender's setup

A Frontender of your theme will want to have both the Compony theme, but also the Compony Gulp. Because the Gulp will enable that person to work faster and more reliably.

The community driven setup

If you want to benefit from components created by the community, you can use the platform to browse & download components from others. When using other components, you could also contribute back to the components you've used by fixing bugs, or making enhancements.

On the platform you can create components (Blogpost: Create a Compony component) for others to use. Or you can make collections of components that you can then download and drag-and-drop in to your theme. (Collection example: Bare essentials)

Sounds interesting?

You can use the platform free of charge, but we also have a few paying features.
Go ahead and register your account