OrnaJS
Orna is good tool that atomize your css. It's parser and web framework.
Atomic CSS - is a model or style of coding where each of CSS properties have their own style classes. Good for fast creating the readable and easy changeable User Interface.
How Orna work?
1.Just plug jquery and orna files into your document
<script src="jquery.js"></script>
<script src="orna.js"></script>
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ornajs/3.3.0/orna.min.js"></script>
2.Then you can write CSS properties like classes in the class attribute
<div class="height_100px bgc_black color_white">
Hello! If this block black and string is white it means that Orna is ready!
</div>
3.Write Orna classes without whitespace. Whitespace used, like separator between classes.
<div class="ff_Times New Roman">Hello</div> //Wrong, can use only fonts without whitespace in name.
<div class="ff_Arial">Hello</div> //Right
- Always take the latest version!
- The priority in OrnaJS added to class that was written last(final). Like class="height_100px height_200px" the height of element will be 200px!
- You can use abbreviated name, molecules with events and inheritance, but not all!
- You can use prefix "this", like (height_200px_thisdiv_click), for current element, like hover in CSS!
- If you want decorate outside element not a child, use prefix "side", like (height_200px_side#id_click)!
- If you want to create breakpoint, use prefix "reset" as 3 part or "set", like (height_200px_reset600px). Prefix "reset" works if size low than width, "set" works when more than width!
Bower: bower install OrnaJS
NPM: npm install ornajs