postcss-hamster

PostCSS Hamster Framework

Typography, Vertical Rhythm, Modular Scale, Fluid Responsive Typography functions for CSS. Flexible system with high performance.

Hamster Framework - it's the language of macros and functions, which in the future can be easily transformed into css code and any units. Easy adapted to any user browser resolution.

If your company uses the plugin, then you can contact me and I can attach for free your company logo in main page https://hamster.im.

Support / Discussion: Gitter.

Documentation: RU

Big article with examples how to use Hamster Framework RUSSIAN

CSS Code: Examples

Installation

Be careful if you use precss and cssnext. You need to disable "lookup" plugin in precss and "rem" in cssnext. They interfere and the hamster plug-in expands their functionality.

npm install postcss-hamster

PostCSS

var fs = require("fs"),
    postcss = require("postcss"),
    hamster = require("postcss-hamster");

fs.readFile("filename.css", "utf8", (err, css) => {
    postcss([hamster]).process(css).then(result => {
        fs.writeFileSync("outputfilename.css", result.css);
    });
});

Gulp

If you are using postcss-gulp then install version 6.4.0. postcss-gulp@7.0.0 + precss have bug, and @import can't work correctly.

npm install gulp-postcss@6.4.0

var gulp = require("gulp"),
    sourcemaps = require("gulp-sourcemaps"),
    postcssgulp = require("gulp-postcss"),
    precss = require("precss"),
    autoprefixer = require("autoprefixer");
    hamster = require("postcss-hamster");

gulp.task("css", function () {
  
    var processors = [precss({
        "lookup": false
    }), hamster, autoprefixer({
        browsers: ["> 0.5%"]
    })];

    return gulp.src("./web/src/style.css")
       .pipe(sourcemaps.init())
       .pipe(postcssgulp(processors))
       //.pipe(cssnano())
       .pipe(sourcemaps.write("."))
       .pipe(gulp.dest("./web/css"));
});

gulp.task("default", ["css"]);