my-theme
_sass-essentials
components
YAML Created with Sketch.
my-theme.info.yml
YAML Created with Sketch.
my-theme.libraries.yml
my-theme.theme

A Compony-theme looks a lot like any other Drupal 8 theme, let's first cover the files that are default in a Drupal 8 theme.

my-theme.theme #

This is the default .theme file. If you open this file, you will see a few functions that make the internals of Compony work. A .theme file contains PHP to adapt Drupal’s theming layer. The things we as Frontenders do in PHP is usually minimal and there is a lot of repetition of the things that we could do.

my-theme.libraries.yml #

This is a default libraries.yml file. This file defines libraries for Drupal. A library is a collection of JavaScript and CSS files. This means that my-theme.libraries.yml will define the libraries of my-theme.

my-theme.info.yml #

This is a default .info.yml file. Drupal uses this file to define some aspects of the theme such as the name of the theme, the regions, and more...

components #

The components folder is a convention in Compony. It introduces the main concept of theming with a Compony-theme: a theme is a collection of components.

This means that all HTML, CSS, JS, yaml and PHP, inside a theme, belong to a component. And if something belongs to a component, it should go in to this folder.

Prepare to have this folder always open, as all the theming work will go in here.

_sass_essentials #

_sass_essentials is a helper-folder that defines global sass-variables to be used  in components. If you want to read more about how Sass is used, please skip to the component.scss chapter.