hipster-css

Hipster

A CSS Processor with a CLI and Gulp Plugin built on PostCSS.

Why?

PostCSS is fast, very fast, but it can be a pain to intergrate into your build stream. Hipster fixs this with a CLI and a Glup Plugin, leveraging the speed of PostCSS and removing the intergration headaches.

Installation

npm install hipster-css

Default Syntax

Variables

$header: #333; /* Declaring a variable */

h1 {
	color: $header; /* Using a variable */
}

Mixins

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	   -moz-border-radius: $radius;
	    -ms-border-radius: $radius;
	        border-radius: $radius;
}
 
.box { @include border-radius(10px); }

Nesting

header {
	h1 {
		font-size: 36px;
	}
}

Imports

@import "lib/normalize.css";
@import "media-queries/menu.css" (min-width: 480px);;

Default Features

calc() Reductions

Reducing calc() references whenever it's possible with the postcss-calc plugin.

Note: When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the w3c calc() feature.

CLI Usage

hipster <inputFile> <outputFile>

• If you supply one file the css of first file will be compiled and outputted to stdout.
• If you supply two files the css of the first file will be compiled and outputted to the second file. The second file will be created if it does not already exist or overwritten if it does exits.

Customize your Hipster Processor

As Hipster is built on PostCSS, it is really easy to add new plugin to allow for new syntax and functionality while retaining the easy of use of the CLI.

1. Install the new plugin via NPM

npm install <package> --save

2. Require the new plugin in index.js

var <plugin> = require('<plugin>');

3. Add the new plugin to Hipster's processor

.use('<plugin>')