ornajs
Version:
OrnaJS is a tool for creation Atomic CSS. Framework and parser. Orna lightweight, clear and easy. It works with jQuery.
58 lines (36 loc) • 2.08 kB
Markdown
# 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!
[http://ornaorg.github.io](http://ornaorg.github.io)
**Bower:** bower install OrnaJS
**NPM:** npm install ornajs