Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

PostCSS Crip Build Status

PostCSS plugin Shorthand properties for Crips that are too lazy to write.

Installation

$ npm install postcss-crip --save-dev

Quick Start

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var crip = require('postcss-crip');

// CSS to be processed
var css = fs.readFileSync('input.css', 'utf8');

// Process our crip css using postcss-crip
var output = postcss()
  .use(crip())
  .process(css)
  .css

console.log('\n===>Output CSS:\n', output);

Or just:

var output = postcss(crip())
  .process(css)
  .css

Input:

/* Input example */
body{
  f: 24px/16px red normal Helvetica, serif;
  bg: #000 url('holy/crip/its/a/crapple.png') top left no-repeat;
  bgz: cover;
}

.crip {
  w: 100px;
  h: 100px;
  pos: relative;
  p: 10px;
  m: 20px;
}

Output:

/* Output example */
body{
  font: 24px/16px red normal Helvetica, serif;
  background: #000 url('holy/crip/its/a/crapple.png') top left no-repeat;
  background-size: cover;
}

.crip {
  width: 100px;
  height: 100px;
  position: relative;
  padding: 10px;
  margin: 20px;
}

See the full list of abbreviations

Options

(default: {})

You can create your own crip properties. Not all CSS properties are available in the module. So feel free to add your own.

var options = {
  'az': ['azimuth']
}

var output = postcss(crip(options))
  .process(css)
  .css;

input.css

td { 
  az: far-right 
}

output.css

td { 
  azimuth: far-right 
}

Usage

Grunt

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
          require('postcss-crip')(),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

Gulp

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var crip = require('postcss-crip')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
        crip()
    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

Contributing

Fork, work on a branch, install dependencies & run tests before submitting a PR.

$ git clone https://github.com/YOU/postcss-crip.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License

About

PostCSS plugin for Crips that are too lazy to write.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.