vic/prefix-css

Prefix all rules from a css-file with a namespace selector.

Source code at GitHub http://vic.github.com/prefix-css

{
  "defaultBranch": "master",
  "description": "Prefix all rules from a css-file with a namespace selector.",
  "fullName": "vic/prefix-css",
  "homepage": "http://vic.github.com/prefix-css",
  "language": "CoffeeScript",
  "name": "prefix-css",
  "pushedAt": "2013-12-20T21:28:04Z",
  "stargazersCount": 23,
  "updatedAt": "2023-06-14T20:56:07Z",
  "url": "https://github.com/vic/prefix-css"
}

prefix-css

A tool for prefixing all rules from css-files with some selector.

DEMO

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, imagine you could easily combine themes from BootSwatch 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, but for some particular portion you want to apply the colors from the slate theme.

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:

$ prefix-css .cyborg cyborg.min.css > cyborg.prefixed.min.css
$ prefix-css .slate  slate.min.css  > slate.prefixed.min.css

<div class='cyborg'>
  <a href='#' class="btn btn-primary">A Cyborg Button</a>
</div>

<div class='slate'>
  <a href='#' class="btn btn-primary">An Slate Button</a>
</div>

see it in action

Links

Bootswatchr Generate your own Bootstrap themes.

Bootswatch Some free Bootstrap themes.

Bootstrap Twitter Bootstrap