Fabulous
🎨 CSS properties sidebar for VS Code
Install / Use
/learn @Raathigesh/FabulousAbout this skill
Quality Score
0/100
Category
Development & EngineeringSupported Platforms
GitHub Copilot
README
<div align="center">
<img src="https://affectionate-booth-10a1f4.netlify.com/banner.png" />
<br />
</div>
<br />
Fabulous introduces a CSS properties sidebar into Visual Studio Code.
Fabulous supports the followings
- 💅 CSS-in-JS libs which supports template literal (styled-components, emotion, linaria)
- 🎨 CSS rules from
.cssfiles - 🌈 CSS rules from
.scssfiles - 🌏 CSS rules from
.htmlfiles - these must be in a<style>tag and the style tag must be within the<head>tag - 🌛 CSS rules from
component.tsAngular component files that have inline styles within the@Component({ styles:[``] })decorator - 🌟 CSS rules from
.vuefiles that have a<style>tag in the root of the file - 💍 CSS rules from
.sveltefiles that have a<style>tag in the root of the file
Fabulous is still in Preview. Give it a try and let us know when things don't go well.
Getting started
- Install the Fabulous extension in VS Code
- After opening a
css,scss,js,jsx,tsx,component.ts,vueorsveltefile, click on the <img src="https://affectionate-booth-10a1f4.netlify.com/tiny-icon.png" width="20px" /> icon to toggle the side-bar - Place your cursor in a CSS rule or in a Styled component template literal
- You should see the sidebar controls become active
Help us make Fabulous better
Have a look at our contribution guide.
Contributors
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore --> <table> <tr> <td align="center"><a href="https://github.com/threepointone"><img src="https://avatars2.githubusercontent.com/u/18808?v=4" width="100px;" alt="Sunil Pai"/><br /><sub><b>Sunil Pai</b></sub></a><br /><a href="#ideas-threepointone" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center"><a href="https://twitter.com/Raathigesh"><img src="https://avatars0.githubusercontent.com/u/3108160?v=4" width="100px;" alt="Raathi Kugarajan"/><br /><sub><b>Raathi Kugarajan</b></sub></a><br /><a href="#ideas-Raathigesh" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=Raathigesh" title="Code">💻</a> <a href="#design-Raathigesh" title="Design">🎨</a></td> <td align="center"><a href="https://github.com/0xflotus"><img src="https://avatars3.githubusercontent.com/u/26602940?v=4" width="100px;" alt="0xflotus"/><br /><sub><b>0xflotus</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=0xflotus" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/paustint"><img src="https://avatars2.githubusercontent.com/u/5461649?v=4" width="100px;" alt="Austin Turner"/><br /><sub><b>Austin Turner</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Tests">⚠️</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Code">💻</a> <a href="#maintenance-paustint" title="Maintenance">🚧</a> <a href="https://github.com/Raathigesh/fabulous/issues?q=author%3Apaustint" title="Bug reports">🐛</a> <a href="https://github.com/Raathigesh/fabulous/commits?author=paustint" title="Documentation">📖</a> <a href="#infra-paustint" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#review-paustint" title="Reviewed Pull Requests">👀</a></td> <td align="center"><a href="https://twitter.com/igrekov"><img src="https://avatars0.githubusercontent.com/u/13730032?v=4" width="100px;" alt="Ivan"/><br /><sub><b>Ivan</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=Winner95" title="Code">💻</a></td> <td align="center"><a href="https://github.com/mukeshmandiwal"><img src="https://avatars3.githubusercontent.com/u/9495069?v=4" width="100px;" alt="Mukesh Mandiwal"/><br /><sub><b>Mukesh Mandiwal</b></sub></a><br /><a href="https://github.com/Raathigesh/fabulous/commits?author=mukeshmandiwal" title="Code">💻</a></td> </tr> </table> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!
