Getting started

Compony comes in 3 layers: the theme, the gulp & the platform

If you want to understand how to start with using these 3 layers, then this blogpost is for you!

If you want to learn more about the concepts of Compony, please note that we have a extensive documentation that goes deeper in to each part,

The order #

You should know that the 3 layers of Compony come in a certain order.

  1. The Compony theme
  2. The Compony Gulp
  3. The Compony platform

Each layer is the fundament for the next layer. This means that using the Compony Gulp without using the Compony Theme wouldn't make much sense. It also means that you can only really benefit from the platform once you use the first 2 layers.

This order also means that you have the option to only use the first layer and ignore the other layers.

So let's start with the only non-optional layer: the Compony Theme!

The Compony theme #

The Compony theme is a kickstart theme that can be downloaded from our homepage

  1. Download the theme,
  2. Unzip the downloaded file. You should find a folder named "compony".
  3. Put this "compony" folder in your Drupal project under web/themes/custom/ . If you don't have a "custom" folder, go ahead and create that folder.
  4. If you now log in to your Drupal site as an admin you can enable the Compony theme under local.your-site/admin/appearance

You have now enabled the Compony theme! You can now start doing your theming by using a component-only approach.

Don't worry if your site looks completely black and white and without any theming, the Compony theme doesn't have any theming from the start!

You can start writing your components from scratch, or you could also check out below and find out how to download themed functional components from the platform.

The Compony Gulp #

You now have a Drupal theme installed that works as a container for your components. You could start writing your CSS & JS without a tool off course. But nowadays, tools are quite vital to keep you productive.

Please note that you could choose for a project setup where only the frontend-developers need to set up the Gulp-setup,

The steps to set up the Gulp-layer for your Compony theme:

  1. Make sure you have a version of node and nvm on your environment.
  2. Use the correct node version and install the node_modules
  3. Run a Gulp command defined by Compony

And that's it! You can fine-tune how the Gulp-setup works by tuning your local configuration options and your project configuration options.

There are more than 4 million different combinations possible how you can fine-tune your Gulp-setup, I am sure there is one in there for you. :)

The Compony Platform #

You now have a theme that functions as a collection of components with on top a extraordinary tooling layer enabled.

At this point in time you could start writing your own components, or you could download components from others and drop them in your project to have a whole bunch of functionality to start from. You can find all of these components on the platform, so how would this work for you?

  1. Create an account or login to Compony.
  2. Browse through components and find the ones that are relevant for your project. A good example would be the status-messages component. You can add this component to a collection by clicking the big plus icon next to the title of the component.
  3. Fill up your collection with all the components you would like to download.
  4. Go to my account and find your newly created collection.
  5. Go to the detail page of this new collection and download the collection by using the button on the bottom of the page.
  6. Unzip the downloaded file and you should find a folder named "components".
  7. Open the "components" folder and copy all the individual components to the "components" folder in your Compony theme.
  8. Repeat steps 5 until 7 for individual components that you find on Compony.io.

And that's it!

If you feel like something is missing in each of these 3 layers, we have a fully transparent approach on how the project is evolving, so feel free to reach out to us.

On the homepage you can feel links on how to contribute to each part and how to get involved.