Decorate web page without directly writing CSS and JavaScript.

OrnaJS is a tool that provide work by the Atomic CSS and React CSS
methodology for styling the page in a Single page application.







OrnaJS Disqus



What is Orna?

Orna is good Atomic CSS tool, designed for atomize Web UI. Also perfect for SPA(single page application) or like additional.

Atomic CSS is a model or style of coding where each of properties have own style classes.

Atomic CSS is good for fast creation the readable and easy changeable User Interface.


What Orna do?

If you plug orna.js into HTML document you will have a new skill that gives you write css properties with values in class attribute and it will means class and property in one and we will call it atom. You can write properties with few value and that calls molecules. Molecules make your work easy when properties have many value. It's better than style attribute, because you have events and inheritance.


How Orna work?

Just write CSS properties into the class attribute then write underscore and value. Orna scan the html document, find atoms and define it directly to the element. Event you can create with jQuery functions addClass(), removeClass() and use onclick, onmouseover, onfocus, onblur and other. Or simply add Orna tail to the class name like: mouseover, mouseout, focus, blur, click. (width_100px_click, property_value_event)




Actual Info for version 3.3.0 and upper!!!

Examples

Similar action with style attribute, clear jQuery and jQuery with OrnaJS.

Inline style attribute



Orna



jQuery



Orna



JavaScript



Orna




Quick start

Download OrnaJS Watch demo


Plug jQuery and Orna to the head of HTML document and write CSS properties as classes into class attribute, just use underscore _ as separator.
It's better than style attribute, because you have good jquery API for manipulation with classes, events and inheritance.


CDN


Structure

property_value

color_red

property_value_event

color_red_click

property_value_childtagname

color_red_div

property_value_event_childtagname

color_red_click_div

property_value_childtagname_event

color_red_div_click


Also you can use tagname, #id or .class of child element as selector.

color_red_childtagname

color_red_#id

color_red_.class



For current element, use "this"!
(bgc_red_thisdiv_click)



For side element not a child use prefix "side"!
(bgc_red_side#id_click)



See also :even or :odd!
(bgc_red_div:even_click, bgc_red_thisdiv:even_click)
(bgc_red_div:odd_click, bgc_red_thisdiv:odd_click)



See also :first or :last!
(bgc_red_div:first_click, bgc_red_thisdiv:first_click)
(bgc_red_div:last_click, bgc_red_thisdiv:last_click)









Events

  • mouseover or just over
    (color_red_mouseover)
    (color_red_over)

  • mouseout or just out
    (color_red_mouseout)
    (color_red_out)

  • mousedown or just down
    (color_red_mousedown)
    (color_red_down)

  • mouseup or just up
    (color_red_mouseup)
    (color_red_up)

  • blur
    (color_red_blur)

  • focus
    (color_red_focus)

  • click
    (color_red_click)







CSS properties like classes

class="background-color_black width_50% height_100px margin_5px padding_4px border_4px_solid_red"
Just write css property and value only change ':' to '_'.






Abbreviated name (You can use right or left name)

background_white
background-color_white
background-image_url()
background-size_cover
background-position_center
background-repeat_no-repeat
background-attachment_fixed
transform_rotate(60deg)
transform_skew(20deg)
transform_scale(2)
transition_all_1s_ease_0.5s
color_red
height_100px
width_100px
margin_10px
margin-left_10px
padding_10px
padding-left_10px
border_2px_solid_black
border-left_2px_solid_black
border-radius_10px
font-family_Arial
font-weight_bold
font-size_20px
text-decoration_none
text-align_center
display_block
box-shadow_0_0_20px_0_black
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
bg_white
bgc_white
bgi_url()
bgs_cover
bgp_center
bgr_no-repeat
bga_fixed
rotate_60deg
skew_20deg
scale_2
tran_all_1s_ease_0.5s
c_red
h_100px
w_100px
m_10px
ml_10px
p_10px
pl_10px
b_2px_solid_black
b-l_2px_solid_black
br_10px
ff_Arial
fw_bold
fs_20px
td_none
ta_center
d_block
shadow_0_0_20px_0_black


Extremely verbose

In CSS: border-top-left-radius:20px, in OrnaJS: btlr_20px or same as: border-top-left-radius_20px





Special classes

  1. Arial, arial - font


  2. Times, times, TimesNewRoman - font


  3. center - block elements in center by x axis


  4. textincenter - text and inline elements in center by x axis


  5. none - display = none


  6. block - block element


  7. inline - inline element


  8. inlineblock - inline-block element


  9. uppercase - text in uppercase


  10. lowercase - text in lowercase


  11. capitalize - first symbol in uppercase


  12. hideatom - use for hide element from Orna, must be first in class attribute


  13. flexcenter-, flexstart-, flexend-, spacebetween, spacearound, flexcenter|, flexstart|, flexend|, baseline, stretch - use for flexbox


  14. relative - position: relative


  15. fixed - position: fixed


  16. absolute - position: absolute


  17. linear, ease, ease-in, ease-out, ease-in-out - default transition


  18. ornahelp - view the orna help info


  19. clean, clear - reset CSS properties top, bottom, left and right to 0


  20. orna-btn, sky-btn - decorate the block, like simple button


  21. screen-x, screen-X, screen-y, screen-Y - assign screen width and height as element size


  22. window-x, window-X, window-y, window-Y - assign current window width and height as element size


  23. pointfollow - move elements with a pointer


  24. inTime - put time into element



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

!!!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 if low, set if more!

!!!Write Orna classes without whitespace. Whitespace used, like separator between classes.





OrnaJS functions for Atomize

  1. createatom(); - Main Orna function, it's run automatically when document is ready, you can call it with arguments like #id, .class and tag name for render a special element. It's useful when you need dynamically update your page or element.
    Looks Like:
    createatom('#id');

  2. findmin(), findmax(); - functions, which find the minimal and maximal value in numeric array.

    findmin(array);

  3. checkit(); - function, that check input field. checkit(element, regexp, color1, color2, length);

    checkit("input", /[a-zA-Zа-яА-Я]+/, "red", "blue", 13);





Download




OrnaJS


Orna4Node


Orna4Chrome


This page fully written with OrnaJS. This page does not contain .css file and it doesn't use inline style(style attribute)! Try it!




About Atomic CSS model (ru)

About OrnaJS (ru)

Recommended JS Pack for work

Jump and Learn




Thanks to Node.JS, NW.JS, jQuery, React.JS, D3.JS and to all who give support in our work.




© 2015 OrnaOrg ornaorg2016@gmail.com | ornajs2016@gmail.com