PostCSS Hamster Framework - a tool that will make your life easier with the imposition. Typography. Vertical rhythm

Modern web development does not stand still, and every day the complexity of projects only grows. Constantly there are new tools that allow the developer to facilitate and automate the work so that he can keep up with the times and meet modern requirements, development rhythms. At first, the less, sass, etc. preprocessors came to our aid. Then came the gulp, grunt, webpack project build systems, etc. Freymorki came out, the most famous of them probably sass compass.

Everything was good, but the stumbling block was that large projects began to compile for a long time and began to waste precious time of developers. It was hard for new developers to learn the new syntax of preprocessors, which made it difficult to train new staff for companies. Existing large projects were problematic to rewrite to preprocessors. Preprocessors polluted the CSS code making it overloaded with functions and mixins, reducing its readability, especially for inexperienced developers in the team. Then the revolutionary PostCSS project, which allows parsing existing CSS files, came to the rescue, and on their basis build AST ( Abstract Syntax Tree ) trees and transform this tree with the help of its JS plug-ins. This is an innovative approach with high speed processing of incoming files. And every day the popularity of PostCSS is growing all over the world. PostCSS is used by many industrial leaders, among them google, github, ebay, wikipedia, taobao.

Many developers use such well-known plugins as precss, cssnext, autoprefixer.

precss - allows you to reduce the gap with preprocessors and allows you to implement their functionality using PostCSS.
')
cssnext - allows you to use the future features of CSS right now.

autoprefixer - adds vendor prefixes for CSS properties, you do not need to think about prefixes (-o, -moz, -ms), autoprefixer will add the necessary prefixes itself so that browsers support the necessary functionality better.

Not so long ago in the PostCSS ecosystem there was a new plugin - Hamster , which will allow you to reduce the time to develop and support your projects. This is a framework that is intended to be an alternative to the sass compass in PostCSS. And allow developers to upgrade to PostCSS, which have not yet done so due to the lack of an alternative to compass. Compared to competitors, the framework has greater flexibility, high speed and a simple syntax.

To install PostCSS Hamster, you need to run the command in an existing npm project:

npm install postcss-hamster --save-dev 

Next, we need to create a JS file that will process your files. In the code, you need to replace filename.css with the name of your input file, and outputfilename.css with the name of the file to which the result is written.

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

Run our JS file and get the resulting CSS file.

 node .js 

More detailed installation and configuration is discussed in the documentation.

Unfortunately, in order to familiarize yourself with the capabilities of the framework and begin to fully use it, you need to read the documentation. The good news is that all the documentation in Russian is well documented, and there are real examples with which the documentation was prepared. At first glance, it may seem to many that the documentation is overloaded and complicated, but it is not. Documentation is specially divided into logical parts, which will allow even an inexperienced user to easily start working with him and postcss. And more experienced users can choose only what is necessary.

At the moment, the framework has been tested on several of my projects, but testing is required on the part of users to eliminate bugs. We also accept suggestions and a list of features that you want to see in the next version. Now the project is in the RC stage and is preparing for release, further work will be done on version 2.0 with new useful and interesting features. Suggestions you can make in Gitter. I will also be happy to wait for your pull requests.

Regards, PostCSS Hamster developer, Gregory!

Source Code: Github
Documentation: RU
Support / Talk: Gitter