All Projects → Raathigesh → Fabulous

Raathigesh / Fabulous

Licence: mit
🎨 CSS properties sidebar for VS Code

Programming Languages

typescript
32286 projects


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 .css files
  • 🌈 CSS rules from .scss files
  • 🌏 CSS rules from .html files - these must be in a <style> tag and the style tag must be within the <head> tag
  • 🌛 CSS rules from component.ts Angular component files that have inline styles within the @Component({ styles:[``] }) decorator
  • 🌟 CSS rules from .vue files that have a <style> tag in the root of the file
  • 💍 CSS rules from .svelte files 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, vue or svelte file, click on the 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):

Sunil Pai
Sunil Pai

🤔
Raathi Kugarajan
Raathi Kugarajan

🤔 💻 🎨
0xflotus
0xflotus

📖
Austin Turner
Austin Turner

⚠️ 💻 🚧 🐛 📖 🚇 👀
Ivan
Ivan

💻
Mukesh Mandiwal
Mukesh Mandiwal

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].