CSS Architecture

JUI provides a multi-dimensional Design Token engine built with CSS variables and document root classes. With a small amount of code, it can support many personalized theme modes.

Document Root Classes

• mobile: mobile theme
• desktop: desktop theme
• dark: dark theme
• light: light theme
• j-theme-*: theme color
• j-radius-*: radius theme
• j-shadow-*: shadow theme
• j-font-*: font-size theme

Design Tokens

tokens.css

• Utility tokens
  • Basic utility tokens: CSS variables with fixed values, such as layout, font, and animation values.
  • Theme utility tokens: values such as line height and spacing. For example, --el-height-md has different values under mobile and desktop themes.
• Color tokens
  • Theme color tokens
  • Business color tokens
  • State color tokens

Utility Tokens

Common basic utility tokens.

Spacing

Transition Duration

Text Scale

Component Font Sizes

Different j-font-* font-size themes provide different font-size scales.

The default font-size theme is j-font-sm.

Font Weight

Line Height

Element Height

Different j-font-* font-size themes and different desktop device themes provide different element-height scales.

The defaults are j-font-sm and desktop.

Radius

Different j-radius-* radius themes provide different radius scales.

The default radius theme is j-radius-md.

Shadow

Different j-shadow-* shadow themes provide different shadow scales.

The default shadow theme is j-shadow-md.

Breakpoints

Container Width

Layer

Opacity

Directory Structure

The source src/css directory provides base DOM styles for UI primitives and components, plus their default theme styles.

Style Customization

vanilla-jui provides three ways to customize styles.

1. Custom CSS theme
   • src/css/ provides the base DOM styles for UI primitives and components.
   • src/css/themes/ provides UI theme styles. You can create your own independent theme style, such as newYork/.
   • src/css/themes/default/ provides the default theme styles.
2. Custom tokens.css
3. Tailwind CSS based customization, recommended
   • Use vanilla-jui’s multi-dimensional theme architecture in tokens.css as the lower-level data source for Tailwind and other CSS tools, then map it through configuration.
   • Benefits:
     • Keeps the multi-dimensional theme architecture.
     • Builds more complex style effects with Tailwind and other CSS tools.
     • Keeps generated CSS output small.

Head Script

Scripts placed in the HTML HEAD to prevent style flicker.

Device query:

JavaScript
(function (w, n, d) {  function m() {    var u;    if (typeof n === 'undefined') return !1;    if (n.userAgentData && typeof n.userAgentData.mobile === 'boolean')      return n.userAgentData.mobile;    u = n.userAgent || '';    if (      /\b(BlackBerry|webOS|iPhone|IEMobile|Android|Windows Phone|iPad|iPod)\b/i.test(        u      )    )      return !0;    if (typeof w === 'undefined' || typeof w.matchMedia !== 'function')      return !1;    return (      w.matchMedia('(pointer: coarse)').matches &&      w.matchMedia('(max-width: 820px)').matches    );  }  var r = d.documentElement,    b = m();  r.classList.toggle('mobile', b);  r.classList.toggle('desktop', !b);})(window, navigator, document);

Theme query:

JavaScript
(function (d, k) {  var v = {      mode: 'light',      theme: 'indigo',      radius: 'sm',      shadow: 'sm',      font: 'sm',    },    m = d.cookie.match(new RegExp('(?:^|; )' + k + '=([^;]*)')),    o = v;  if (m) {    try {      var r = JSON.parse(decodeURIComponent(m[1]));      if (r && typeof r.val === 'object') o = Object.assign({}, v, r.val);    } catch (e) {      o = v;    }  }  try {    var c =        o.mode === 'auto'          ? matchMedia('(prefers-color-scheme: dark)').matches            ? 'dark'            : 'light'          : o.mode,      h = d.documentElement;    h.classList.add(      c || 'dark',      'j-theme-' + (o.theme || v.theme),      'j-radius-' + (o.radius || v.radius),      'j-shadow-' + (o.shadow || v.shadow),      'j-font-' + (o.font || v.font)    );  } catch (e) {}})(document, 'ui-theme');