What’s New in Layui 3? A Deep Dive into Its Design, Architecture, and Coding Standards

Overview

Layui releases the final 2.x version 2.13.0 and begins active development of Layui 3, a component library aimed at backend and full‑stack developers.

Design Proposal

Project Positioning

Layui 3 provides a richer Web component library for modern UI construction, comparable to Bootstrap but with more dynamic interactions.

Technology Stack

Developed with native HTML, CSS, and JavaScript (ES6+). Build tools include Rollup, Babel, and PostCSS. Code quality is enforced with Prettier, ESLint (Biome under consideration), and Jest.

Component Model

Two creation methods are planned: Web Components and traditional components, sharing a base component module similar to Layui 2.

Directory Structure

layui/
├── dist/               # build output
│   ├── css/            # CSS library
│   ├── components/
│   ├── core/
│   ├── index.js        # ESM entry for bundlers
│   ├── layui.esm.js    # browser ESM entry
│   └── layui.js        # browser IIFE entry
├── docs/               # documentation
├── src/                # source code
│   ├── components/     # component modules (e.g., button/ …)
│   ├── core/           # core modules (DOM utilities, base classes)
│   └── index.js        # build entry
├── scripts/            # build scripts
├── tests/              # tests
│   ├── unit/           # unit tests
│   └── visual/         # visual test examples
└── package.json

Development Standards

Code Formatting

Prettier is used with the default configuration except for enabling singleQuote:

{
  "singleQuote": true
}

Full configuration can be found at https://github.com/layui/layui/blob/main/.prettierrc.

Code Linting

ESLint is employed with the default settings; an example rule restricts console usage to warn and error only:

rules: {
  'no-console': ['error', { allow: ['warn', 'error'] }]
}

See the complete config at https://github.com/layui/layui/blob/main/eslint.config.mjs.

Pull Request Guidelines

When developing locally, always run npm ci to install dependencies. Detailed instructions are in https://github.com/layui/layui/blob/main/CONTRIBUTING.md.

Naming Conventions

Namespace

All namespaces start with the prefix lay, e.g., <lay-table> for a Web Component and .lay-table for a CSS class.

Naming Rules

CSS class: lay- + kebab‑case (e.g., .lay-tabs-header)

JavaScript class: PascalCase (e.g., Button, TreeTable)

Component/file name: camelCase or all‑lowercase (e.g., button, treeTable)

Callback functions: camelCase + lifecycle (e.g., beforeRender, afterRender)

Event‑handler property: on + event name (e.g., onClick)

Style Guidelines

Theme Colors

:root {
  /* blue‑green dual theme */
  --lay-color-primary-green: #16b777;
  --lay-color-primary-blue: #1e9fff;
  --lay-color-primary: var(--lay-color-primary-green);
  /* seven colors */
  --lay-color-red: #FF5722;
  --lay-color-orange: #F9A800;
  --lay-color-green: #21BA21;
  --lay-color-blue: var(--lay-color-primary-blue);
  --lay-color-purple: #A233C6;
  --lay-color-dark: #20222A;
  --lay-color-tint: #F8F9FA;
}

Size Guidelines

Buttons, Forms, etc.

24 px – sm 32 px – default 40 px –

lg

Margins & Padding

5 px – xs 8 px – sm 16 px – default 24 px – lg 32 px –

xl

Typography

12 px – comments

14 px – body (default)

16 px – sub‑heading

24 px – heading

32 px – large heading

Other Rules

Version numbers follow Semantic Versioning.

Git commit messages follow Conventional Commits.

These guidelines will be continuously refined; contributions from developers are welcome.