The Vanilla Framework is an extensible CSS framework designed to streamline development with its Sass capabilities. In this article, we’ll guide you on how to effectively utilize the Vanilla Framework in your projects. Let’s dive right in!

Using Vanilla

Hotlinking

If you’re looking to integrate the Vanilla Framework quickly, you can “hotlink” the CSS directly in your HTML. Simply replace the ‘x’ values with the version number you wish to link to:

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css">

Including Vanilla in Your Project via NPM or Yarn

For a more integrated experience, include Vanilla in your project via NPM or Yarn. Follow the steps below:

• First, add the Sass and Vanilla Framework packages to your project dependencies:

yarn add sass vanilla-framework

• Next, in your package.json, include the path to node_modules when building CSS:

"build-css": "sass -w --load-path=node_modules src:dist --style=compressed"

• Create a folder named src and inside it, create a file called style.scss.
• Import Vanilla in your style.scss file:

@import "vanilla-framework";<br>
@include vanilla;

• Optionally, you can override certain settings, like changing the brand color:

$color-brand: #ffffff;

• If you only need specific components, you can include just those parts:

@include vf-b-forms;

• Finally, run the build command to convert your Sass into CSS:

yarn build-css

Troubleshooting

If you encounter issues while setting up your Vanilla Framework, consider these troubleshooting ideas:

• Ensure that all your paths in package.json are correctly set.
• Verify that you have installed all necessary dependencies.
• If you face styling issues, check the console for any import errors related to Sass.

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

Developing Vanilla

Want to contribute to the Vanilla project? Start your journey with their contributing guidelines. Here, you can find information regarding:

• Code of conduct
• Reporting bugs and issues
• Working with the Vanilla project
• Pull requests
• Releasing Vanilla

Conclusion

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.