Work with OrnaJS library

OrnaJS is a free JavaScript library for dynamically styling HTML elements without directly writing JS or CSS code. Styling is done by adding classes to the HTML element, as in the usual CSS libraries. Unlike the CSS libraries, Orna is not limited by the number of classes previously defined in it, but works as a parser, dynamically processes the class and sets the style. Styling in OrnaJS is based on the principle of Atomic CSS, which means that the appearance of an element is created in parts (atoms), but not in a single class. Horns can be compared with the style attribute in HTML, but with inheritance, abbreviations and events. The name Orna is short for Ornament. In the first two months after publication, although Orna offers a non-standard method of page styling, more than 2,000 developers managed to download it, indicating a growing popularity of dynamic styling.

OrnaJS and Atomic CSS

Atomic CSS is a CSS code writing methodology that follows the principle of “one class = one property”. When writing styles using the Atomic CSS methodology, the developer creates generic classes that in most cases carry only one property and its value. It is designed to remove repeatability, verbosity, confusion when working with CSS and also with CSS preprocessors, Less, Sass. CSS is the foundation for creating styles; it gives the opportunity to make add-ins and develop convenient architectures for specific developers, which is why it has the full form of properties and does not have a strict architecture. Atomic CSS architecture is developed by a team from Yahoo, OrnaOrg and all enthusiasts.

The OrnaJS project began in 2015 and was originally developed as a tool for conveniently implementing Atomic CSS architecture, but then was subject to reformation and is now following part of the rules from Atomic CSS and part from React CSS.
React CSS - reactive CSS, in contrast to the methodology Atomic CSS works with dynamic styles that are created in the process of working with elements. React CSS methodology, which is widely used in the creation of SPA, where markup elements are created dynamically and initially there are none. The Orna team created a separate library for the full implementation of Atomic CSS, which already involves the description of atomic styles, rather than their dynamic creation, Orna4Node. Orna4Node automatically generates a CSS file based on the classes specified in the elements, unlike OrnaJS which does not create a CSS file, but directly, JavaScript methods access the DOM tree. Orna4Node is similar in work to Atomizer from Yahoo! ..
')

OrnaJS and jQuery

OrnaJS works together with the jQuery library, from which it renders the main selectors and selections by elements. Orna works with the first version of jQuery, from the second and the third, the choice is put on the developer.

bgc_red_div: even - the class sets the background color to all even, child div elements.

bgc_red_div: odd - the class sets the background color to all odd, child div elements in red.

bgc_red_div: first - the class sets the red background color to the first child div element.

bgc_red_div: last - the class sets the background color to the last child div element to be red.

bgc_red_option: selected - the class sets the background color to red for all of the children to select option.

bgc_red_input [type = text] - the class sets the background color to all child elements of the input with the text type.

bgc_red_ # menu - the class sets the background color of the child element with the id menu.

bgc_red_.menu - the class sets the background color to all children with the menu class.

The main purpose

The main purpose of the OrnaJS parser library is to simplify work when styling markup elements. Orna helps to get rid of repeatability of styles, excessive verbosity and, most importantly, work on structuring CSS code. Since Orna took over the main ideas from the Atomic CSS methodology, when working with it, everything is atomically, that is, the style is collected by particles and all styles fall independently, cleanly, without the need for diligent refactoring. Also, using Orna, it is no longer necessary to style the elements using jQuery or Native JavaScript, since in Orna it is much easier because of the level of abstraction, which works on the principle of the waterfall html -> ornajs -> jquery -> native javascript .

Using

It is possible to use Orna for full styling of pilgrims or as an addition to the basic frame styles. In the modern trend of web development, where there are a lot of dynamics and states, developers are more and more moving away from static HTML and SS markup, in the direction of their dynamic creation in the process of user interaction with the interface. OrnaJS can be used in the context of react.js, riot.js, handlebars.js, angular.js, bootstrap.

Library connection:

<head> <script src="jquery.js"></script> <script src="orna.js"></script> </head> 

Class structure in OrnaJS

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

Stylization

 <div class="bgc_black c_yellow h_100px br_20px shadow_0_0_20px_0_red">Hello! I'm decorated by OrnaJS...</div> 

 <div class="bgc_black_a c_yellow_a h_30px_a br_20px_a">Hello! My (a)link decorated by OrnaJS... <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> 

Dom tree

Should dynamically change a DOM tree?

1. All new elements automatically follow the styles that were specified through the parent elements for children, without restarting Orna.

Example:

 <div class = "text-decoration_none_a border_none_button"> <a>link</a> <button>Click</button> </div> 

2. If new elements were added already with OrnaJS classes registered in them, then in order for these classes to be assigned, you must restart OrnaJS.

To do this, you need to run the function createatom (); Without an argument, the function stylizes all new elements, bypassing the old, concrete argument with an argument.

OrnaJS connects any font that is on a computer in system fonts, or is loaded directly into CSS and there are no spaces in its name, since OrnaJS space is understood as the end of the class. Two fonts Arial and Times New Roman are connected in one word (arial, times) just for quick access, but in general you need to write a class:

 <span class="ff_Verdana">Text</span> <span class="font-family_Verdana">Text</span> 

Demo

codepen.io/DimaPopov/pen/dXyZQR
codepen.io/DimaPopov/pen/JKEaby
fiddle.jshell.net/dimapopov/hokLfqqo
www.youtube.com/watch?v=k4mkK_3YUk8

Links

ornaorg.imtqy.com
ornaorg.imtqy.com/AtomicCSS.html
www.npmjs.com/package/ornajs
github.com/OrnaOrg
github.com/OrnaOrg/OrnaJS