-
-Welcome to GitHub Pages.
+
+imacss 
+
-This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:
+pronunciation: imax
-$ cd your_repo_root/repo_name
-$ git fetch origin
-$ git checkout gh-pages
-
+An application and library that transforms image files to data URIs (rfc2397) and embeds them into a single CSS file as background images.
+
+Let's say you have a web-based frontend which embeds a lot of images (e.g. icons). This referencing produces HTTP requests for every single image. What if you would like to minimize it to just one request? That is something imacss can do for you.
+
+
+What?
+
+Okay, enough words. Let's dive straight into a transformation example. If we assume that you have two SVGs, like github.svg and quitter.svg, imacss will generate this CSS code for you.
+
+.imacss.imacss-github {
+ background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEBg...);
+}
+
+.imacss.imacss-quitter {
+ background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhADA...);
+}
+If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.
+You can refer to this images by using the respective CSS classes:
+
+<div class="imacss imacss-quitter">...</div>
+
+CLI
+
+imacss comes with a command-line interface which pipes the output to stdout by default (yeah, plain old text streams FTW!).
-Designer Templates
+Installation
+
+Install with npm globally.
+
+npm install -g imacss
+
+
+
+Usage examples
+
+Embed all SVGs in a particular directory and all its subdirectories (will pipe the output to stdout).
+
+$ imacss "~/projects/webapp/images/**/*.svg"
+
+
+Embed all SVGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
+
+$ imacss "~/projects/webapp/images/*.svg" images.svg.css
+
+
+Embed all SVGs and PNGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.
-We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.
+$ imacss "~/projects/webapp/images/*.{svg,png}" images.css
+
+
+If you don't like the imacss selector namespace you are able to modify it as well.
+
+$ imacss "~/projects/webapp/images/*.{svg,png}" images.css foobar
+
+
+will produce this selector structure in the CSS file:
+
+.foobar.foobar-github {...}
+
+API
+
+If you would like to use the imacss functionality within your application, there is an API for that.
-Rather Drive Stick?
+Install
-If you prefer to not use the automatic generator, push a branch named gh-pages to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.
+Install with npm
+
+npm install --save imacss
+
-Authors and Contributors
+Methods
+
+
+transform(glob[, namespace]);
-You can @mention a GitHub username to generate a link to their profile. The resulting <a> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.
+Transforms the image files from the specified glob and returns a stream with the CSS selectors that can be piped to somewhere else.
+
+Arguments
+
+glob
+
+String || Vinyl file object
+
+The path to the images which should be transformed. You can use any glob pattern you want or you're also able pass single Vinyl file objects.
+
+namespace (optional; default=imacss)
+
+The CSS selector namespace.
-Support or Contact
+Usage example
+
+var imacss = require('imacss');
+
+imacss
+ .transform('/path/to/your/images/*.png')
+ .on('error', function (err) {
+ error('Transforming images failed: ' + err);
+ })
+ .pipe(process.stdout);
+Having trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.
+
+Changelog
+
+
+Version 0.2.2 (20140221)
+
+
+- Added more files to .npmignore.
+
+Version 0.2.1 (20140217)
+
+
+- Added
preferGlobal flag to the package.json.
+
+Version 0.2.0 (20140217)
+
+
+- Implemented support for passing a vinyl file object to the transform method.
+
+Version 0.1.1 (20140211)
+
+
+- Fixed typos in the README.
+
+Version 0.1.0 (20140211)
+
+
+- Initial Release. Implemented the core functionality (CLI and API).
+
+Author
+
+Copyright 2014, André König (andre.koenig@posteo.de)