https://github.com/vic/prefix-css
Prefix all rules from a css-file with a namespace selector.
https://github.com/vic/prefix-css
Last synced: over 1 year ago
JSON representation
Prefix all rules from a css-file with a namespace selector.
- Host: GitHub
- URL: https://github.com/vic/prefix-css
- Owner: vic
- Created: 2012-06-13T08:03:00.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2013-12-20T21:28:04.000Z (over 12 years ago)
- Last Synced: 2025-03-18T15:02:16.272Z (over 1 year ago)
- Language: CoffeeScript
- Homepage: http://vic.github.com/prefix-css
- Size: 645 KB
- Stars: 23
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# prefix-css
A tool for prefixing all rules from css-files with some selector.
[DEMO](http://vic.github.com/prefix-css)
### Installation
`npm install -g prefix-css`
### Why?
Well, sometimes you find that you'd like all rules from a css-file to apply but only while scoped under a specific selector.
ie, we all love using [Twitter Bootstrap](http://twitter.github.com/bootstrap/), imagine you could easily combine themes from [BootSwatch](http://bootswatch.com/) on a single page by having each theme prefixed by a css selector.
## Use case
suppose, for example that you're happily using the [cyborg theme](http://bootswatch.com/cyborg/), but for some particular portion you want to apply the colors from the [slate theme](http://bootswatch.com/slate/).
if you downloaded both themes as `cyborg.min.css` and `slate.min.css`, you could use `prefix-css` to
namespace each theme under a css-selector:
```shell
$ prefix-css .cyborg cyborg.min.css > cyborg.prefixed.min.css
$ prefix-css .slate slate.min.css > slate.prefixed.min.css
```
```html
```
[see it in action](http://vic.github.com/prefix-css)
## Links
[Bootswatchr](http://bootswatchr.com/) Generate your own Bootstrap themes.
[Bootswatch](http://bootswatch.com/) Some free Bootstrap themes.
[Bootstrap](http://twitter.github.com/bootstrap) Twitter Bootstrap