Enriching a minimal Javascript ToDo-App with ORGENIC UI

Christian Otto — Mon, 13 May 2019 14:18:07 +0000

A small To-Do list app. Well, nothing really new, right? Adding new tasks, then marking them as done or open or even erasing them completely from the list...sounds doable.

Here´s a little mockup of how it could look like.

I´m pretty sure there are many front-end developers out there who will not really have a problem coding up some lines in Javascript to solve all that. And this is also what we did.

Here´s a CodePen to see how little it takes. (Credits go out to my colleague Tobias for doing the preliminary work)

Okay, this may work for the moment, but the native HTML controls used here look a bit boring out of the box, are you with me? Checkboxes with a label, some buttons, maybe a fieldset or someting else that wraps the whole stuff. Time now to tweak the visual appearance!

If you´re not really into CSS that much to do all the styling of these elements on your own, you may be wondering if now the time has come to let a 3rd party tool help you out on that.

Well, of course a lot of people instantly may think of Bootstrap and the likes to accomplish the styling task. While this may work, it usually means that you have to stick to a certain predefined template structure that can easily blow up the number of lines your HTML is made of.

So, why not try web components instead, the stuff that everybody speaks of and all the neat SPA frameworks out there already make use of?

ORGENIC UI

Alright, time to introduce ORGENIC UI, a new and growing set of ready-to-use web components that supports theming via CSS custom properties (a.k.a. CSS variables).

While you can integrate the ORGENIC UI package into your, let´s say, Angular project, pretty easily via npm, you can, of course, also (make use of unpkg to) include the required files in a plain Javascript/HTML-based project. We have done just this and demonstrate it with a modified version of our aforementioned CodePen.

Here´s a version of the app that features ORGENIC UI components and some modified logic.

(Have a look at the pen settings to figure out the JS and CSS that need to be included. And head over to https://docs.orgenic.org to find out about the components that currently exist and how to handle them.)

Basically, we wrapped our main template parts with an <og-card> (ORGENIC card), which provides two slots to place content in, a content slot and a footer slot. The native buttons got replaced by <og-button> controls (ORGENIC button) that provide a custom clicked event that we can listen to. And we made use of <og-form-item> (ORGENIC input) to be our wrapper component for a label and a text input. As a bonus, we even integrated a small toolbar to demonstrate how easily it is possible to switch between the two themes (light and dark) that come with the package.

Are you also satisfied with the updated outcome? It was just a thing of a few minutes to radically change the UI of this little app, basically just by modifying our HTML a little. And best of all, you can easily change the provided layout just by overriding the available CSS custom properties, but I think this is something that is worth its own post, so stay tuned.

Please visit ORGENIC at:

DEV Community: Christian Otto

Enriching a minimal Javascript ToDo-App with ORGENIC UI

ORGENIC UI