Fast, Light & Productive UX
eon is an ultra light and fast web framework that focuses on user experience and developer experience, allowing you to create intuitive interfaces across any device with little effort. eon harness state of the art technologies to provide a smooth developing experience without compromising compatibility and performance, so you can stay highly productive while retaining full control of your user interface.
Bundled with eon there is a comprehensive library of flexible and themeable components that will suit most of your needs but you can also create your own with ease.
At is heart eon takes care of the hassles of user interface creation, effectively simplifying a plethora of issues that any interface designer faces in a daily basis (compatibility, performance, responsiveness, data binding, extensibility...) so you can stay focused on what really matters, your app!
- Light: Core of less than 16kb (minified and gzipped).
- Fast: With its asynchronous patterns and natively supported specs.
- Intuitive: The DOM is your API; HTML and JavaScript are enough to work with eon.
- Semantic: Non-verbose declarative and programmatic API.
- Templating: Data binding capabilities.
- Compatible: Designed for all modern browsers.
- Customizable: Themeable and customizable components.
- Extensible: Write once, reach everywhere.
- Responsive: Mobile first, visual and functionality adaptation.
-
You can download the latest version here and add it to your project.
-
Via NPM:
npm install @vimlet/eon-cli -gOnce it is installed
eon-cli installYou can execute
eon-cli installto update it later.
Once it's downloaded, simply import it into your head.
<head>
<script src="eon/eon.js"></script>
</head>Ensure that you use the path to your eon location folder
You have to import the components that you wish to use in your head too.
<head>
<script>
eon.import([
"eon/ui/eon-button.html"
]);
</script>
</head>Now it can be use anywhere in the body as any other html element.
<body>
<eon-button label="Click Me!"><eon-button>
</body>To use it programmatically due to its asynchronous nature you need to wait for eon.onReady
eon.onReady(function () {
document.querySelector("eon-button").label = "Hello World";
});Keep reading the full documentation
eon is released under MIT License. See LICENSE for details.