• Stars
    star
    403
  • Rank 107,140 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An application and library that transforms image files to data URIs and embeds them into a single CSS file.

imacss Build Status

pronunciation: imax

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...);
}

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!).

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.

$ 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}" foobar > images.css

will produce this selector structure in the CSS file:

.foobar.foobar-github {...}

Important: Please note that imacss does not embed image/svg+xml as base64 strings. Instead it will use the raw utf-8 representation.

API

If you would like to use the imacss functionality within your application, there is an API for that.

Install

Install with npm

npm install --save imacss

Methods

transform(glob[, namespace]);

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)

String || Function

A string containing the css class namespace prefix, or a function to generate the entire CSS ruleset.

The CSS selector namespace.

Usage example

var imacss = require('imacss');

imacss
    .transform('/path/to/your/images/*.png')
    .on('error', function onError (err) {
        console.error('Transforming images failed: ' + err);
    })
    .pipe(process.stdout);

Passing a function to customize the resulting CSS rule set

var imacss = require('imacss');

function generateCss(image) {
    return '.image-' + image.slug + ' { ' + 'background-image:' + 'url(\'' + image.datauri + '\'); }';
}

imacss
    .transform('/path/to/your/images/*.png', generateCss)
    .on('error', function (err) {
        console.error('Transforming images failed: ' + err);
    })
    .pipe(process.stdout);

Author

Copyright 2014 - 2015, André König ([email protected])

More Repositories

1

angular-deckgrid

A lightweight masonry-like grid for AngularJS.
JavaScript
1,098
star
2

prisma-kubernetes-deployment

Demo how to deploy a Prisma server to a Kubernetes cluster.
88
star
3

codegrabber

A simple way of pulling in remote content.
JavaScript
86
star
4

express-lingua

An i18n middleware for the Express.js framework.
JavaScript
67
star
5

kast

An UDP multicast framework.
JavaScript
56
star
6

npm-run.plugin.zsh

Autocompletion support for `npm run`.
Shell
54
star
7

gulp-svg2png

A gulp plugin for converting SVGs to PNGs.
TypeScript
54
star
8

cinnamon

A lightweight continuous integration server for Node.js applications.
JavaScript
38
star
9

gulp.plugin.zsh

Autocompletion support for your gulp.js tasks (zsh).
Shell
32
star
10

ninit

Community-driven module bootstrapper with a focus on sharing personal best practices.
JavaScript
22
star
11

github-trending

A library for fetching the current trending repositories on GitHub.
JavaScript
22
star
12

prisma-docker-compose

Demonstrates how to start a Prisma cluster (MySQL + Prisma) via Docker Compose
18
star
13

jutebag

A command line interface for Pocket a.k.a. getpocket.com a.k.a. Read It Later
JavaScript
15
star
14

pulumi-hcloud

Provider for using Pulumi with Hetzner Cloud
Go
10
star
15

adhoc

Opinionated higher-order component for establishing ad-hoc stream-based unidirectional data flows
JavaScript
10
star
16

fuchur

Fuchur analyzes the status of all your git repositories at once.
JavaScript
9
star
17

dots

Modular dotfiles manager
Shell
7
star
18

helm-prisma

A Helm Chart for easily installing Prisma on a Kubernetes cluster.
6
star
19

eventastic

An event store on top of RethinkDB.
TypeScript
5
star
20

boilerplate-redux-react

My personal redux + react boilerplate.
JavaScript
5
star
21

remix-observable-file-upload-demo

TypeScript
4
star
22

gulp-imacss

A gulp plugin for using imacss (the image to datauri to CSS transformer).
JavaScript
4
star
23

minerva-game

minerva ist eine digitale Version des im Jahre 1957 erstmals erschienenen Brettspiels "Risiko".
Java
3
star
24

laessig

A little tool belt which provides helpers for your day-to-day work with LESS.
JavaScript
3
star
25

marlene

A little poster generator written in Node.js and some frontend canvas magic.
JavaScript
3
star
26

awesome-react-components

📦 Collection of great React components
2
star
27

zed-gfm-preview

GitHub Markdown Preview for Zed
JavaScript
2
star
28

gulp-spellcheck

A gulp plugin for spell-checking with GNU Aspell.
JavaScript
2
star
29

solar

A lightweight key-value store for node.js
JavaScript
2
star
30

nyc-opendata

A wrapper around the official NYC OpenData API which provides a simplification and caching.
JavaScript
2
star
31

mailbouncer

An easy-to-configurable mail bouncer.
JavaScript
2
star
32

betaville-opendata

An aggregation layer for consuming data from the NYC OpenData project.
Java
2
star
33

transcripter

A "change data capture" library for MySQL / MariaDB
1
star
34

metalsmith-metaobject

A plugin to pass an object as metadata to metalsmith.
JavaScript
1
star
35

ifon

Observes your internet connection and executes configured apps if you're online or offline.
1
star
36

bunchitos

Loads a bunch of Node.js modules by a given prefix.
JavaScript
1
star
37

express-slicer

An Express middleware that provides the functionality for partial JSON responses based on the querystring.
JavaScript
1
star
38

sharebox

1
star
39

cinnamon-webui

The frontend of cinnamon.
JavaScript
1
star
40

octobrain

Helps you to avoid typing GitHub URIs over and over again.
JavaScript
1
star
41

akoenig

1
star