Latest Version: 3.7 Final 20 December 2018

VERSION 3.7 Final, 20 December 2018

elementals.js is a function library for JavaScript. I prefer not to call it a "framework" as it doesn't try to change how JavaScript works, it simply enhances the existing way of doing things and fills in what I consider to be some obvious 'blanks' in the specification. The new helper functions are provided through an object named "_" (yes, just an underscore character), and there are shim/polyfill to it to allow the use of some ECMAScript methods on strings and arrays for browsers that don't support them as yet.

Really most of the existing "frameworks" are WAY too massive to have any business on a normal website. Many of them by themselves gZip COMPRESSED are half the size I usually allow for an entire page template's HTML + CSS + scripts + images; yet amazingly their massive bloat is BEFORE you actually even start adding USEFUL scripting that actually does stuff to the page. In addition, they are quite often chock full of functions that most people would never use, outright abuse, are CSS' job, or just plain don't belong on a website!


  1. Maximum download size targets once gzipped of 12k for the complete source (currently 15.36k), and 8k or less gzipped when both minification and gzip compression is applied. (currently 9.00k)
  2. Implements the DOM-JON specification in the _.make and _.write methods for quickly and easily adding complex element structures to the DOM without resorting to the slow, quirky, and often insecure innerHTML method. In fact the use of innerHTML and methodologies like it are discouraged by elementals.js. As it well should be!
  3. Designed for inclusion before </body>, speeding load time.
  4. Encourages the use of scripts that attach themselves to the document, as opposed to being called by the attributes in the markup or inlined scripting. This makes elementals.js far easier to deal with when working in environments such as the Content Security Policy.
  5. Provide shims/polyfills in legacy browsers for missing ECMAScript functions like String.trim or Array.indexOf.
  6. Cross-browser AJAX object creation that allows passing a series of 'readystate' and 'status' handlers.
  7. uSort style method for Lists and Tables directly off existing markup. No need to waste time trying to pass the data in the scripting separately, just pull it from the live page!
  8. DOM walking tools like various 'each', 'next' and 'prev' methods, that can be passed a 'mask' for either specific tags, or nodetypes.. In addition all children or the entire sub-tree can be easily walked with a callback.
  9. Class handling methods akin to those in the new Element.classList property, but with more consistent naming conventions, not quite so buried in an element's properties, and with a few extra bells and whistles. Laughably it turns out the regEx I made for backwards compatibility in older browsers runs faster than the actual ECMAScript style methods... I suspect this is because the "real" ones actually use the classList Array, and Arrays/indexed objects are painfully slow in JavaScript.

For the time being news and announcements will be posted over on our sister site:
CutCodeDown - Minimalist Semantic Markup.



Current file sizes for elementals.js
Raw Size: 56157 bytes
Minified: 25833 bytes
Raw gZip: 15728 bytes
Minified gZip: 9213 bytes