Atomic is a DOM Library Agnostic solution for creating a better HTML element. They're called Atomic Components, and they come with a robust event system and patterns for composition.
Why would you choose Atomic?
- No DOM Library Opinion You're not bound to jQuery, YUI, Ender, or anything
- Small < 99kb SIZE TBD
- Simple enhance an element, put them together, that's it
- Works with AMD and CJS Loaders You can use any loader strategy you'd like
Why would you avoid Atomic?
- Out-of-the-box products like jQuery UI, Dijit, Flight, and more can give you large amounts of functionality for free.
- Prototyping the amount of initial work you will need to build up in Atomic makes it a poor choice for prototyping. You should consider something like Bootstrap in those cases
Your Script Tags
First, add a script loader to the page. Any loader that supports AMD or CommonJS will work. Offhand, we can think of a few:
Then, add the config to your page, and change the
system variable to your loader framework of choice.
// or inline it if that's your thing <script src="config.js"></script>
Finally, load the atomic.js script
Got all that? Good! Now we can enhance some elements.
Enhancing elements with Components
Click "next", advance "carousel". What just happened?
- Atomic.load() will load the Button and Carousel from the
components/directory. This is where all simple HTML Enhancements reside. Once the DOM is ready and the Elements objects loaded, the callback
functionis called with Button and Carousel in order.
- Create the new objects with the new keyword, and pass them an element. This is the enhancement.
What Can Components Do?
Atomic Components are designed to wrap normal HTML elements, making them behave more like modular bits of a larger system. A Component...
- Produces events independent of the DOM, enabling an abstraction of accessibility, touch events, and more
- Has a public API for manipulation
The fun doesn't stop there! Atomic Components have a way to fuse together. Components can...
- Include other Atomic Components
- May expose their internals or provide an abstraction in front of its "inner workings"
You got it. The examples/ directory shows how you can use Atomic in many different ways:
- files starting with pojs_* are the
- files starting with magic_* are the
magic HTML interfaceapis. Make some Components straight from your markup? Sure, if that's your thing!
What about unit tests?
We're using QUnit right now. With grunt, you'll just need
grunt build test to get going.
Built on Greatness
- When and a great read about why Promises are pretty sweet
- Fiber for OOP sugar internally
- Eventemitter2 for a standalone event system
By cool people
- Founding Team: Jakob Heuser, Eric Rowell, Jimmy Chan, Ryan Blunden, Asa Kusuma, Eugene O'Neill, Branden Thompson
- Contributors: View the Contributor List