Friday, October 14, 2022
HomeOperating SystemIntroducing a VSCode extension for Vanilla CSS Framework

Introducing a VSCode extension for Vanilla CSS Framework


The Vanilla CSS Framework is a utility class-based and customizable SASS library that’s the go-to on the subject of styling web sites and dashboards throughout nearly all of tasks at Canonical. Figuring out all the category utilities could possibly be difficult. That’s why we ensure that our documentation is up-to-date and accessible as a lot as attainable.

We developed a VSCode extension that enhances the developer expertise when utilizing Vanilla, hoping to enhance the developer’s expertise and productiveness whereas working with Vanilla.

The venture had its begin a yr in the past throughout a hackathon, and the MVP offered us some concepts about growing VSCode extensions, parsing SASS tasks and offering auto-completion. Later, we refactored the venture and rewrote some elements to make the extension light-weight and extra full!

Class utilities auto-completion for HTML

The extension now supplies auto-completion for HTML, React and Django templates recordsdata with an entire listing of usable courses primarily based on the put in Vanilla present in node_modules :

Class utilities auto-completion in VSCode

Vanilla code snippets

Vanilla supplies a full listing of examples for the totally different parts and layouts. We’ve added these examples as code snippets that you may import utilizing the command palette Vanilla Framework: insert a snippet:

Popup to pick the code snippet to insert in VSCode

SASS variables

The Vanilla Framework makes use of SASS variables as a solution to make the venture readable and customizable. The VSCode extension additionally supplies the whole listing of obtainable variable to make use of and override whereas writing customized SASS:

SASS variables auto-completion in VSCode

Conclusion

Model 1.0.0 of the Vanilla Framework Intellisense extension is accessible now on the VSCode retailer.

Additionally, come and be a part of the Internet and Design Staff in case you are enthusiastic about this sort of venture and extra!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments