UI Taxonomy

Overview

Elentra JS UI Taxonomy

The layers that comprise the User Interface Taxonomy all pertain to the visual, interactive portion of the application, and include all of the tangible things that developers will be using to create interfaces through the development process.

This is in contrast to the User Experience Taxonomy, whose layers are more concerned with how (and why) the User Interface layers are combined together to create a positive experience for users.

1. Styles

In the EJS taxonomy, Styles are defined as the global design building blocks at the root of the system that are used by every other layer of the taxonomy. Each of these building blocks typically maps to a corresponding variable in the system, and each of these variables is contained within its categorized .SCSS partial in the elentra-2x-js repository, under the src/styles/variables directory.

Example: src/styles/variables/_typography.scss contains the Style variables that pertain to typography. This .scss partial includes individual variables for type families, weights, and sizing. Other Styles partials include:

• _border.scss

• _breakpoints.scss

• _colors.scss

• _iconography.scss

• _spacing.scss

2. Elements

Elements are the second smallest re-useable parts of the system (after the Styles). These include (but are not limited to) the common HTML elements such as <button>, <p>, <hr>, and so on. Elements typically make use of and are visually constructed with Style variables.

Example: a <button> is a good showcase for an Element that relies on Styles to define it's apearance. border and border-radius properties on a <button> are both set with the variables --ejs-border-width---d and --ejs-border-radius---d respectively, which sets those CSS properties to their EJS defaults (defaults are always indicated by a variables ending with a trailing ---d). Aside from base Styles, further variables may also be added to Elements contextually. A <button> for a positive or confirmation action will have it's background fill color set to the --ejs-color-interact--confirm variable (which is internally mapped to the --ejs-color-state--success variable).

For a delete <button>, the Style variable would be --ejs-color-interact--delete.

3. Components

Components are defined as the more advanced parts of the UI that are comprised of more than one element.

Example: An excellent example of a Component is <SingleLineInput>, which lives in the Component library at/src/components/SingleLineInput/SingleLineInput.vue. The <SingleLineInput> Component defines it's own necessary props and template code, but it also includes several smaller Elements, including an <input> and a <label>.