To restore the repository download the bundle wget and run: git clone webkul-micron_-_15-50-20. © Copyright 2018 Webkul Software, All rights reserved. Now use interaction with data-micron="custom" Credits
Pass an argument with type of ease to timing() method. Pass an argument which is a number to duration() method. Pass an argument with interaction name to interaction() method. Javascriptmicron.getEle("").interaction("").duration("").timing("") Pass an argument with selector name which can either be id or a class to getEle() method. Html Label Binded Access inside JavaScriptĬall micron chained methods to apply interactions to any DOM Element, right in your custom block of JavaScript Code. Add the attribute to control the easing of the defined interaction.įor now, supports the easings mentioned below-Īdd data-micron-bind="true" & data-micron-id="name" to the defined triggering element, and interaction will be applied to the element which reference to the defined id attribute. Micron Interactions defaults to "ease-in-out". Add the data-micron-duration="number" attribute to control the duration of the defined interaction. Micron Interactions defaults to ".45" seconds. Adding an InteractionĪdd the data-micron="interaction" attribute to the respective element and Voila! you are already there.
You can use either npm or bower to get the Micron.JS package.Ĭopy and Paste the command below in your terminal to get package with npm - clinpm install webkul-micronĬopy and Paste the command below in your terminal to get package with bower - clibower install webkul-micron Usage
Include both the Micron CSS and JavaScript files in the header section of your document. InstallationĬompiled CSS and JavaScript minified files can be directly linked from UNPKG CDN or Micron.JS can be included within your workflow using your favorite package managers as well. To get started with Micron.JS, you need to include both * (which have all ready to use interaction animations) and you don't need all the available interactions, you can simply include the respective *.min.css file only. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.A microInteraction library built with CSS Animations and controlled by JavaScript Power
It is free, fully open source, and makes it easy for you to handle dropped files on your website. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose. Dropzone.js is one of the most popular drag and drop JavaScript libraries. GrapesJS was designed primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Which allows your users to create complex HTML-like templates without any knowledge of coding. GrapesJS ships with features and tools that enable you to craft easy to use builders. you can create easily a GrapesJS builder around it and then use it independently your applications. So, for everything you can imagine as a set of elements like. React Native (opens new window)), Native Desktop Applications (eg. MJML (opens new window)), Native Mobile Applications (eg. We use HTML-like structure basically everywhere: Newsletters (eg. By "things" we mean anything with HTML-like structure, which entails much more than web pages. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". At first glance one might think this is just another page/HTML builder, but it's something more.