https://github.com/Raathigesh/fabulous
🎨 CSS properties sidebar for VS Code
https://github.com/Raathigesh/fabulous
Last synced: over 1 year ago
JSON representation
🎨 CSS properties sidebar for VS Code
- Host: GitHub
- URL: https://github.com/Raathigesh/fabulous
- Owner: Raathigesh
- License: mit
- Created: 2019-04-28T13:33:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-17T03:33:34.000Z (almost 6 years ago)
- Last Synced: 2025-03-19T20:35:28.569Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 866 KB
- Stars: 1,007
- Watchers: 11
- Forks: 26
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - fabulous - 🎨 CSS properties sidebar for VS Code ⭐999 `TypeScript` (📦 Legacy & Inactive Projects)
README
Fabulous introduces a CSS properties sidebar into Visual Studio Code.
Fabulous supports the followings
- 💅 CSS-in-JS libs which supports template literal ([styled-components](https://github.com/styled-components/styled-components), [emotion](https://github.com/emotion-js/emotion), [linaria](https://github.com/callstack/linaria))
- 🎨 CSS rules from `.css` files
- 🌈 CSS rules from `.scss` files
- 🌏 CSS rules from `.html` files - these must be in a `` 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](https://github.com/Raathigesh/fabulous/issues) when things don't go well.
## Getting started
- Install the [Fabulous](https://marketplace.visualstudio.com/items?itemName=Raathigeshan.fabulous) extension in VS Code
- After opening a `css`, `scss`, `js`, `jsx`, `tsx`, `component.ts`, `vue` or `svelte` file, 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](./contributing.md).
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!