[object Object]

Adding and Removing Files

When working with files that require references to other files in order to make them work properly, just adding and removing files is not as simple as it seems. The Clarion CLI is designed to help reduce that friction.

Adding a New File

Adding a new file is quite simple. In the root of your project type the following command:

clarion add element headings

This will create the file _headings.scss in the 03_Elements directory as well as add @import '_headings.scss'; import statement to the directory manifest file so it can be included in your final CSS file.

If you look in your newly created _headings.scss file, you will also see a reference to the Abstracts manifest file - @import "../00_Abstracts/index.scss";. this will give you access to the variables and tools you have created in that folder.

Removing a File

Similar to adding a file, removing files can also be done through the CLI:

clarion remove element headings

This will remove the file _headings.scss in the 03_Elements directory as well as remove @import '_headings.scss'; import statement from the directory manifest file.

When specifying a directory to add or remove a file from, you do not have to use the entire directory name. This parameter supports "fuzzy search" witch means that it will try to find the appropriate directory based on part or all of the directory name. So, if I wanted to, I could add an item to the Abstracts folder by using the following command:

clarion add 00 colors

Clarion would find the directory based on the double zeros (00) that were entered rather than the directory name. If the directory is not found, you will be provided with a list of available options.

Subdirectory Support

Clarion supports subdirectories within the architecture. For example, if you wanted to further split up your Abstracts folder into variables and mixins, I would still be able to add files to the subdirectories using the following commands:

NOTE

Make sure the directories exist before adding files to them.

mkdir variables
clarion add abstract variables/colors

You should now see a /variables directory with the file _colors.scss in the /00_Abstracts directory: /00_Abstracts/variables/_colors.scss.

mkdir mixins
clarion add abstract mixins/breakpoints

Similar to the previous command, you should now see a /mixins directory with the file _breakpoints.scss in the /00_Abstracts directory: /00_Abstracts/mixins/_breakpoints.scss.

This allows for greater flexibility in your architecture and enable your code to expand in the future.

Adding Directories

That's right! You can add new directories using the CLI! A popular trend is to create a directory called "Shame". This directory is used for adding style hot fixes until the style can be added to the appropriate file later. The idea is to have this file lower down in the architecture so I overrides any of the previous rules. Adding a new directory is similar to adding a new file, but we use the directory keyword.

clarion add directory 08_Shame 

WARNING

Keep in mind that this practice is designed for hot fixes and temporary solutions. The reason it is called the Shame directory is because something is broken and you want to get the code out of that directory as soon as possible.