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.
Clarion supports subdirectories within the architecture. For example, if you wanted to further split up your Abstracts folder into
mixins, I would still be able to add files to the subdirectories using the following commands:
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
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
This allows for greater flexibility in your architecture and enable your code to expand in the future.
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
clarion add directory 08_Shame
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.