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.
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.
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 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.
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!
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.
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.
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.
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.
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.
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