Hamster Framework
Switch branches/tags
Nothing to show
Clone or download
h0tc0d3 Merge remote-tracking branch 'origin/master'
# Conflicts:
#	build/web/style.css
#	web/css/style.css
#	web/css/style.css.map
#	web/src/base.css
Latest commit 2764a9e Jun 8, 2017


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


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


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


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")

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