Creating a style guide from your CSS can seem like a complex task, but with the Aigis package, it’s as simple as pie. This guide will help you get started on generating a comprehensive style guide for your project, even though the project itself is no longer maintained.

What is Aigis?

Aigis is a Node.js package designed to parse comments in your CSS files and automatically generate a style guide. This process not only saves time but also ensures that style guides are consistent across your projects. While the original Aigis project is no longer actively maintained, you can still use it to benefit from its functionalities.

Installation Guide

To get started, you need to install the Aigis package. Follow these simple steps:

• Open your terminal.
• Run the following command to install Aigis:

npm install --save-dev node-aigis

• Check if Aigis was installed correctly with:

.node_modules/.bin/aigis -v

Configuring Aigis

Once installed, you’ll need to initialize and configure Aigis:

1. Run the initialization command:

.node_modules/.bin/aigis init

2. This command creates the aigis_config.yml file along with some necessary directories.
3. You can then choose a template engine that Aigis will use to generate the style guide. The available options include:
• EJS
• Jade
• Handlebars
4. For example, to choose Jade as your template engine, you would run:

.node_modules/.bin/aigis init --engine jade

Editing the Config File

After initializing, you’ll need to edit the aigis_config.yml file. This file allows you to specify the source paths for your CSS files. For example:

source:
  - .lib/css
  - .style.css

The initial configuration typically points to aigis_assets, but you need to customize this to match your folder structure.

Adding Comments in Your CSS

To facilitate the style guide generation, you should include comments in your CSS files. Here’s how to structure your comments:

--- 
name: base button
category: module button
--- 

## This is base button
* Base button style.
* Use a Button

Generating the Style Guide

Now that everything is set up, you’re ready to generate the style guide!

• Run the following command to generate your style guide:

.node_modules/.bin/aigis run -c .aigis_config.yml

• Your output will appear in the console, typically including a link to check the sample category module, resembling this:
sample

Troubleshooting

If you encounter issues while using Aigis, here are some troubleshooting tips:

• Ensure Node.js is properly installed and updated.
• Check that the paths in aigis_config.yml are correct and exist.
• Make sure your CSS files contain properly formatted comments.
• Consult the full documentation for guidance.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now that you’re equipped with Aigis, you’re ready to streamline your style guide creation! Happy coding!