Loading haxcellence..

These are in-progress design documentation for the HAX design system, code named DDD (Develop, Design, Destroy!).

What is DDD?!

DDD is short for Develop, Design, Destroy!

• Develop : we needed to develop HAX and its ecosystem of elements to test the theory of how it's built and learn to build sustainable elements. They could have looked great from day one, but we might not have a day two to build in if we did!
• Design : Everything in HAX will begin to feel intentionally designed. This is because of the standardization of CSS variables, spacing and other naming considerations. All of the things invisible to our users will be leveraged to ensure that anyone and everyone gets a well designed experience.
• Destroy : With a rock solid development pattern, and a rock solid design pattern, we are able to start destroying connotations of what HAX is, what it can do, and the types of sites it can create. We don't want to be another brand in a marketplace of inaccessible, high energy consumption, expensive web. We want to destroy the web as it was and recreate a new web that works for everyone regardless of resources or abilities! A more inclusive web than we have today; we want to HAX The Web .

DDD seeks to solve a long standing criticism of web components and the HAX ecosystem more broadly, that it feels created and implemented by many people building in similar yet different ways. The resources used to build HAX over many years has created this problem; but fortunately, there is a solution. DDD is that solution, by creating a unified theory of css variables, classes and spacing, we can retroactively update existing HAX properties and HAX blocks to feel like they were all built at the same time.

How does this work?

HAX is primarily built on LitElement, a baseClass JavaScript library called Lit that we use to standardize our development experience. Lit makes things fast, small, and simple to read in the web components universe that is HAX. Because of this standardization, we can build a new baseClass that has baked in assumptions about spacing, color, and design. Previously we had this in a class called SimpleColors. SimpleColors provided a unified color theory to all things HAX. You'll see it at times when there is an "Accent Color" or "Dark mode" flag on elements. This is because they inherit from the same base of colors and css variables, then implemented in that element.

DDD then is a new base class that builds on top of SimpleColors to mix color in with fonts, spacing, borders, additional color pallets, breakpoints, and more to produce a consistent way of building and communicating blocks in HAX. In-fact the theme you are reading on right now is built using DDD which is why it feels consistent and cleanly spaced.

DDD - Develop, Design, Destroy

Below is the guide to DDD, built using the DDD based class itself. This ensures that this guide is always up to date as we push out changes! This is currently a highly functional work in progress but is not considered API stable or API complete. HAX 9 should provide the pathway toward DDD reaching beta in which it is API stable, but in the midst of clean up.