Front-end JavaScript framework Evolution :: release 1.5.7

Since the presentation of the first public beta version of the front-end Evolution framework by me, it took about a month and I managed to fine-tune the code to the Production release and significantly expand the functionality.

It should be said that the main idea of ​​creating your own framework lay mainly in the key of minimalism and mobility. I really wanted my domestic version of the framework with jQuery partial functionality, a set of some ready-made components like tabs and slider, as well as support for adaptability.

At the moment, it turned out the engine is only about 50Kb in size with styles and code, where the main functional part in the minified version weighs only 19.4Kb.

First of all, the animation mechanism was significantly improved, which now supports the full stack 3D and 2D transformations. The engine automatically sets the context for working with transformations in 3D mode and supports all CSS3 transform properties.
')
Example:

//      $.dom("a:first-child", "style", ['display:inline-block', 'transform:perspective(200px)']); //  ,   $.dom("a:first-child","animate",['left:-170px:3000:pulse', 'font-size:30px:1000', 'color:gold:3000', 'transform:rotateX(360deg) rotateZ(360deg) perspective(40px):2000:flicker']); 

In addition, the animation functionality now has functionality for animating colors in RGBa mode. To do something special is not necessary. You can specify colors in RGB format or simply by name (there is a collection of supported names), as well as in #dcdcdc format. The system will automatically convert colors to RGBa and apply animation to the color, background-color or border-color properties.

In the engine appeared easing effects. Here is a list of temporary functions to be used easeInOutCirc, easeInQuad, easeInExpo, easeOutExpo, easeInOutExpo, easeOutBounce, bouncePast, bounce, radical, harmony, back, expo, easeOutStrong, easeInBack, easeOutBack, swingTo, swingFrom, springO, blink, pulse, wobble, sinOneBack, swingTo, swingFrom

Evolution JS is the first microform with similar functionality weighing only 20kb and lacking any dependencies.

Based on opinions from my last presentation, it was decided to slightly modify the API to apply events like click, hover, and so on.

Now it is done like this:

  $.event('a:first-child', 'click', function(e){ e.preventDefault(); }) 

In addition to multiple optimizations and refactoring, new features have appeared.

Local Storage API:

 $.storage(['evolution={"js framework": "1.5.8"}'],'set'); $.storage('evolution','get'); $.storage('evolution','del'); 

Class API:

 $.addClass('#some','class-test'); $.removeClass('#some', 'class-test'); $.hasClass('#some', 'class1 class2 class3'); //returns true if all classes defined for element #some 

The Grid module, which adaptively connects one of the 5 CSS layouts depending on the size of the user's screen, has been greatly reworked:

• 1 - mobile.css (screens of 480px and less),
• 2 - tablet.css (screens from 480 to 768 px),
• 3 - ptablet.css (screens from 768px to 960px),
• 4 - desktop.min (from 960px to 1280px),
• 5 - desktop-max.css (screens greater than 1280px).

→ Download the framework from the github project page.

In future versions, a strong API change is planned at the request of habrovchan, which will correspond to the jQuery syntax, and also the router module will be included in the kernel.

Until now, I accept suggestions for improving the functionality and orders for the implementation of what features you need.