Inline style attribute
Orna
jQuery
Orna
JavaScript
Orna
Quick start
Download OrnaJS
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)
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)
- 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
- Arial, arial - font
- Times, times, TimesNewRoman - font
- center - block elements in center by x axis
- textincenter - text and inline elements in center by x axis
- none - display = none
- block - block element
- inline - inline element
- inlineblock - inline-block element
- uppercase - text in uppercase
- lowercase - text in lowercase
- capitalize - first symbol in uppercase
- hideatom - use for hide element from Orna, must be first in class attribute
- flexcenter-, flexstart-, flexend-, spacebetween, spacearound, flexcenter|, flexstart|, flexend|, baseline, stretch - use for flexbox
- relative - position: relative
- fixed - position: fixed
- absolute - position: absolute
- linear, ease, ease-in, ease-out, ease-in-out - default transition
- ornahelp - view the orna help info
- clean, clear - reset CSS properties top, bottom, left and right to 0
- orna-btn, sky-btn - decorate the block, like simple button
- screen-x, screen-X, screen-y, screen-Y - assign screen width and height as element size
- window-x, window-X, window-y, window-Y - assign current window width and height as element size
- pointfollow - move elements, follow for the pointer
- 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 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.
OrnaJS functions for Atomize
- 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');
- findmin(), findmax(); - functions, which find the minimal and maximal value in numeric array.
findmin(array);
- checkit(); - function, that check input field. checkit(element, regexp, color1, color2, length);
checkit("input", /[a-zA-Zа-яА-Я]+/, "red", "blue", 13);