Calibrate
Contact

Compony: the future of Drupal Theming

Jens Vranckx

Front-end Developer
Compony logo

As Calibrate we want to keep innovating in order to be up to date with the latest techniques and methodologies. To this end, we invited Mathieu Spillebeen - creator, developer and promoter - to our Ghent office to give a workshop on the Compony theme.

The Compony theme is essentially a kickstart theme: a theme that only contains structure & starter code. Ready to expand further.

The next step is to add Components. Each component contains very specific functionality, as well as a specific template file (containing the Twig/HTML code), styling (CSS) & scripts (JavaScript).

By structuring the components in this way, it is easy to transfer them from one code base to another. Mathieu offers a set of components that are ready to use. You can use these in this way or you can create and add new components yourself.

In short, a story in which we do see a future.

Compony - What's in a name?

The Compony theme does things just that little bit differently. The emphasis is on the (re)use of Components (Compony... Components... Do you get it?! ;-D )

What is a component?

 

  • A component is a piece of functionality of a website. Think for example of the contact form, an overview of employees, a teaser of an article...
  • A component contains all code files belonging to the functionality: template(s) (Twig/HTML), formatting (CSS), scripts (JavaScript), assets (icons, video...)..
  • A component contains only the essential, and no more than that.

 

  • A component has no relation to another component. They can therefore always be used separately.

These aspects make it easy to take over components from one project to another. You may need to adjust some variables in your SASS here and there (e.g. colors), but in essence you don't have to do anything anymore and the component will work.
So you only have to work out the same layout and styling once. After that you can quickly take it over to another project and adapt it to the needs of the customer.

This also brings some other advantages:

  • The structure of the components is always the same. Developers will quickly recognize the structure and easily find their way back.
  • Dividing the project into components ensures a better performance. By focusing on functionality, the code is usually more limited. Drupal will also only load the code needed for the page. This results in faster pages.

This makes Compony a Component based theme.
 

Performance

Performance

Compony is built in such a way that only the essential formatting (CSS) and functionality (JavaScript) will be loaded when visiting a page. For each page, all assets are automatically compressed into one file.

So each page only gets the layout, styling & scripting that is needed. This way we make every page hyper performant, short loading times with great results!
 

Compony theme

The Compony ecosystem

Theme en structure

Within the theme we see a different folder structure. With a classic theme you soon start working in folders like /css, /js, /templates, with Compony this is different.

Shared items
In the folder sass_essentials we collect the project specific global variables. For example, animations, colors, fonts, functions...

We make these variables available for all components.

Compony components

Components

In the components folder we place all the components that the website will use. Each component contains its own layout and functionality.

By using a library per component it is possible to make the website as performant as possible. Each component has its own collection of code. We define this collection in the libraries.yml file.
 

Through the component we can also add traditional assets such as images, icons...

In some cases you can't reach everything via the templates. In that case it is possible to add a .theme file. This allows us to overwrite certain items per component via PHP code. This way we have full control over the output of each component.

There is only 1 exception: the _global folder. This contains styling that is important for all pages. Think for example of Regions & Blocks.
 

Magic Glue

A traditional theme does not support multiple libraries and .theme files. But Compony has a solution for that. The Compony theme contains the necessary code that allows you to work with multiple .libraries.yml and .theme files.

The latter ensures that we can effectively collect all the necessary code in one component. Components that were created this way, you can simply copy from one project to another without losing functionality. It also makes it easier to find relevant pieces of code.
 

Tooling workflow

Given the uniqueness of the structure of a Compony theme, it is important to have a good Tooling Workflow. All components contain their own SASS and JavaScript. We need to compile those SASS & JS: We convert SASS to CSS, we minimize JavaScript.

To keep this process on the right track, an extensive Gulpfile has already been provided. This Gulpfile contains a lot of functionality for compiling the SASS and JavaScript.

Moreover, the Gulpfile can perform many other tasks:

  • Optimizing images and icons;
  • Emptying the Drupal Site Cache;
  • Applying autoprefixer and other post-css items.

The Gulpfile can be configured per project via a configuration file. This way you can make changes unique for each project, without disrupting the overall operation.
 

Compony library

Sharing is caring!

Compony is an open source story. This means that you can download and expand the theme for free and for nothing.

But it goes beyond that. Through the compony.io website you can find existing sets of components. You can use these components to develop your own project.

These components were partly developed by Mathieu himself and partly by the community. So you are free to share your own components back in the community, so that they can enjoy your work again.
 

Next steps?

Our themes are already convinced of this way of working. This is closely in line with the original idea of using libraries in a Drupal 8 website. In this way we improve our own way of working and create more performing websites.

We are currently looking internally at how we are going to incorporate Compony into our Calibrate ecosystem. In any case, we are excited to explore this new way of working in more depth and get to work with it.

Read more: https://www.compony.io/blog/what-compony