ornajs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="Orna is the good js tool, designed for atomize Web UI."> <meta name="keywords" content="Orna, JS, Atomic, CSS, UI, UX, Web"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OrnaJS</title> <script src="jquery.min.js"></script> <script src="orna.min.js"></script> <link rel="icon" href="img/icon.png"> </head> <body class="min-width_730px background-color_white Arial margin_0"> <div class="bgc_white bgc_rgba(255,255,255,0.85) textincenter h_400px overflow_hidden"> <div class="width_50% max-width_700px margin_auto padding_20px"> <img src="img/ornaname.png" class="width_100% scale_0.7_mouseover scale_1_mouseout transition_all_0.5s_linear_0.5s"> </div> <h1 class="fw_normal fs_21px c_black opacity_0.5">Web Framework Decorate web page without directly writing CSS and JavaScript. OrnaJS is a tool that provide work by the <a href="http://acss.io/thinking-in-atomic.html" class="c_#ee0645 td_none">Atomic CSS</a> and <a href="https://andreypopp.com/posts/2014-08-06-react-style.html" class="c_#ee0645 td_none">React CSS</a> methodology for styling the page in a Single page application.</h1> </div> </div> <div class="background-color_rgb(245,245,245) bgi_url(img/atom.png)"> <div class="width_50% max-width_700px padding_20px background_white color_#530218 font-size_20px margin_auto rotate_4deg border_2px_solid_white"> <div class="background_rgb(255,255,255) padding_20px shadow"> <h3 class="Times">What is Orna?</h3> <a href="https://github.com/OrnaOrg/OrnaJS" class="color_#ee0645 text-decoration_none">Orna</a> 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.</div> </div> <div class="width_50% max-width_700px padding_20px background_white color_#530218 font-size_20px margin_auto rotate_-4deg border_2px_solid_white"> <div class="background_rgb(255,255,255) padding_20px shadow"> <h3 class="Times">What Orna do?</h3> 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.</div> </div> <div class="width_50% max-width_700px padding_20px background_white color_#530218 font-size_20px margin_auto rotate_4deg border_2px_solid_white"> <div class="background_rgb(255,255,255) padding_20px shadow"> <h3 class="Times">How Orna work?</h3> 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 <a href="http://jquery.com" class="text-decoration_none color_#0769AD">jQuery</a> 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) </div> </div> </div> <div class="text-align_center"> Actual Info for version 3.1.5 and more!!! Examples Similar action with style attribute, clear jQuery and jQuery with OrnaJS. Inline style attribute <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto bgc_white border_thin_black_solid" disabled> <div style="background-color:black; background-image:url(...); color:white;">Style Attr</div> </textarea> Orna <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto bgc_white border_thin_black_solid" disabled> <div class="bgc_black bgi_url(...) c_white">Orna</div> </textarea> jQuery <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto height_160px bgc_white border_thin_black_solid" disabled> <div class="name">jQuery</div> <script> $('.name').click(function() { $('.name').css('height', '100px'); }); </script> </textarea> Orna <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto bgc_white border_thin_black_solid" disabled> <div class="h_100px_click">Orna</div> </textarea> JavaScript <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto height_160px bgc_white border_thin_black_solid" disabled> <div id="a">JavaScript</div> <script> a.style.height = "100px"; a.style.backgroundColor = "red"; </script> </textarea> Orna <textarea class="width_40% min-width_550px overflow_hidden padding_10px display_block margin_auto bgc_white border_thin_black_solid" disabled> <div class="h_100px bgc_red">Orna</div> </textarea> <code class="height_100px color_black"> <a id="how"></a> Quick start <div class="background-color_rgb(245,245,245) padding_30px"> <a href="https://github.com/OrnaOrg/OrnaJS" class="color_#ee0645 text-decoration_none bgc_white bgc_black_mouseover bgc_white_mouseout padding_10px border_gray_solid_thin font-size_16px">Download OrnaJS</a> 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. <a href="https://cdnjs.com/libraries/ornajs" class=" c_black td_none fs_16px">CDN</a> <textarea class="w_650px h_60px fs_12px background-color_rgb(245,245,245) border_none overflow_hidden bgc_white" readonly> <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.1.1/orna.min.js"></script> </textarea> </div> Structure <div class="width_20% min-width_300px max-width_500px border_thin_solid_#ee0645 center padding_10px">property_value color_red </div> <div class="width_20% min-width_300px max-width_500px border_thin_solid_#ee0645 center padding_10px">property_value_event color_red_click</div> <div class="width_20% min-width_300px max-width_500px border_thin_solid_#ee0645 center padding_10px">property_value_childtagname color_red_div</div> <div class="width_20% min-width_300px max-width_500px border_thin_solid_#ee0645 center padding_10px">property_value_event_childtagname color_red_click_div</div> <div class="width_20% min-width_300px max-width_500px border_thin_solid_#ee0645 center padding_10px">property_value_childtagname_event color_red_div_click</div> <div class="width_500px ta_left color_white bgc_#ee0645 max-width_500px border_thin_solid_gray center padding_20px">Also you can use tagname, #id or .class of child element as selector. color_red_childtagname color_red_#id color_red_.class <hr> For current element, use "this"! (bgc_red_thisdiv_click) <hr> 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) <hr> 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) <hr> <div class="textincenter"> <a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/" class="color_#ee0645 text-decoration_none bgc_black bgc_black_mouseout bgc_white_mouseover tran_background-color_0.3s_linear_0.2s padding_10px border_gray_solid_thin font-size_16px">More</a></div> </div> <hr class="c_#ee0645 bg_#ee0645 width_80%" size="3"> Events <div class="text-align_left"> <ul class="width_300px arial fs_18px center"> <li>mouseover or just over (color_red_mouseover) (color_red_over)</li> <li>mouseout or just out (color_red_mouseout) (color_red_out)</li> <li>blur (color_red_blur)</li> <li>focus (color_red_focus)</li> <li>click (color_red_click)</li> </ul> </div> <hr class="c_#ee0645 bg_#ee0645 width_80%" size="3"> 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 '_'. <hr class="c_#ee0645 bg_#ee0645 width_80%" size="3"> Abbreviated name (You can use right or left name) <div class="center overflow_hidden width_730px"> <div class="float_left overflow_hidden width_410px bg_#F9a8be padding_5px font-size_15px"> 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 </div> <div class="float_left overflow_hidden bg_white padding_5px font-size_15px width_40px"> = = = = = = = = = = = = = = = = = = = = = = = = = = = =</div> <div class="float_left overflow_hidden bg_lightblue padding_5px font-size_15px width_250px"> 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 </div> </div> <div class="textincenter font-size_16px"> Extremely verbose In CSS: border-top-left-radius:20px, in OrnaJS: btlr_20px or same as: border-top-left-radius_20px </div> <hr class="c_#ee0645 bg_#ee0645 width_80%" size="3"> Special classes <div class="text-align_left"> <ol class="margin_auto width_400px color_#ee0645"> <li>Arial, arial - font</li> <li>Times, times, TimesNewRoman - font</li> <li>center - block elements in center by x axis</li> <li>textincenter - text and inline elements in center by x axis</li> <li>none - display = none</li> <li>block - block element</li> <li>inline - inline element</li> <li>inlineblock - inline-block element</li> <li>uppercase - text in uppercase</li> <li>lowercase - text in lowercase</li> <li>capitalize - first symbol in uppercase</li> <li>hideatom - use for hide element from Orna, must be first in class attribute</li> <li>flexcenter-, flexstart-, flexend-, spacebetween, spacearound, flexcenter|, flexstart|, flexend|, baseline, stretch - use for flexbox</li> <li>relative - position: relative</li> <li>fixed - position: fixed</li> <li>absolute - position: absolute</li> <li>linear, ease, ease-in, ease-out, ease-in-out - default transition</li> <li>ornahelp - view the orna help info</li> <li>clean, clear - reset CSS properties top, bottom, left and right to 0</li> <li>orna-btn, sky-btn - decorate the block, like simple button</li> <li>screen-x, screen-X, screen-y, screen-Y - assign screen width and height as element size</li> <li>window-x, window-X, window-y, window-Y - assign current window width and height as element size</li> <li>pointfollow - move elements, follow for the pointer</li> <li>inTime - put time into element</li> </ol> </div> !!!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 make breakpoint, use prefix "reset" when low size or "set" when more as 3 part, like (height_200px_reset600px)! !!!Write Orna classes without whitespace. Whitespace used, like separator between classes. <div class="background-color_rgb(245,245,245) "> OrnaJS functions for Atomize <div class="text-align_left"> <ol class="margin_auto width_400px color_#ee0645 list-style_none"> <li>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');</li> <li>findmin(), findmax(); - functions, which find the minimal and maximal value in numeric array. findmin(array); </li> <li>checkit(); - function, that check input field. checkit(element, regexp, color1, color2, length); checkit("input", /[a-zA-Zа-яА-Я]+/, "red", "blue", 13);</li> </ol> </div> </div> </body> </html>