AutoclassCSS - HTML based fast frame

The generator will be useful for those who make up static pages.
The tool is written in JavaScript, and, following the BEM methodology, the framework is formed only on the basis of classes.
It works simply: it receives HTML at the input, and CSS at the output.

You can try it in action on the demo page , the design is customized to your taste.


Sometimes you have to quickly make a page. Usually my process consists of the following steps:

1. I write HTML (I think of CSS in my mind)
2. I copy all classes from the written HTML in a CSS file
3. writing CSS styles

I would like to exclude the second item, because it is a mechanical work. Automate!
')
In addition to using online, the script can be used directly on your own page.

To do this, just connect one file .

<script src="autoclasscss.js"></script> 

When creating an instance of AutoclassCSS, you can immediately pass HTML.

 var autoclass = new Autoclasscss('<div class"block">...</div>'); 

Or in the subsequent set / change the processed HTML.

 var autoclass = new Autoclasscss(); autoclass.set('<div class"block">...</div>'); 

To get the resulting string, just use the get method.

 var css = autoclass.get(); 

In addition, you can customize the appearance of the final result. There are a number of methods for this.

 autoclass .brace('newline') //    ,   —     .flat(true) //   ,       .ignore(['class1', 'class2']) //    .indent('tabs') //   ,   —   .inner(false) //       .line(true) //     .tag(true); //   

All methods are conveniently written in a chain; more detailed documentation is compiled on the basis of JSDoc .