Normalax

A modern alternative to normalize.css, focused on typography, form usability, and cross-browser consistency.

Demos

See all demos

📥 Installation

Install via npm:

npm install normalax

Or using yarn:

yarn add normalax

Or using pnpm:

pnpm add normalax

🚀 Usage

Import the stylesheet in your project:

import 'normalax';

👉 This will automatically apply Normalax styles.

🌐 CDN Usage (Optional)

You can also use Normalax via CDN:

<link rel="stylesheet" href="https://unpkg.com/normalax/dist/normalax.css">

Or:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalax/dist/normalax.css">

✨ Philosophy

Normalax is designed with the following principles:

• Fix browser inconsistencies
• Provide a clean typography baseline
• Improve form & media usability
• Stay layout-neutral (no layout opinion)

🚀 Features

• Modern CSS defaults (e.g. accent-color, text-wrap)
• Improved form control consistency
• Better typography baseline
• Built-in multilingual font optimization (CJK, Arabic)
• Sensible defaults without over-styling

🎯 Goals

Normalax is not:

• ❌ A CSS framework
• ❌ A design system
• ❌ A UI component library

Normalax is:

• ✅ A foundational CSS layer
• ✅ A better normalize/reset
• ✅ A clean starting point for any project

🧩 Variable System

Normalax uses a minimal and intentional variable system.

Public Override Tokens

These variables are designed to be overridden by users:

:root {
  --default-font-family: "Inter", sans-serif;
  --default-mono-font-family: "Fira Code", monospace;
  --default-accent-color: #2563eb;
  --default-border-color: #ccc;
}

Internal Tokens

These variables are used internally and should generally not be modified:

:root {
  --font-sans: system-ui;
  --font-zh-sc: "PingFang SC", "Microsoft YaHei";
  --lh-normal: 1.5;
}

📦 Usage

<link rel="stylesheet" href="normalax.css">

🎨 Customization Example

:root {
  --default-font-family: "Inter", sans-serif;
  --default-accent-color: hotpink;
}

⚖️ Comparison

| Feature | Normalax | normalize.css | reset.css | | ------------------- | -------- | ------------- | --------- | | Modern CSS support | ✅ | ❌ | ❌ | | Typography baseline | ✅ | ⚠️ Minimal | ❌ | | Form improvements | ✅ | ❌ | ❌ | | Layout opinion | ❌ | ❌ | ❌ |

📄 License

MIT License

中文说明

一个现代化的 normalize.css 替代方案，专注于排版、表单可用性以及跨浏览器一致性。

演示

查看所有演示

📥 安装

通过 npm 安装：

npm install normalax

或者使用 yarn：

yarn add normalax

或者使用 pnpm：

pnpm add normalax

🚀 使用方式

在项目中直接引入：

import 'normalax';

👉 即可自动生效 Normalax 样式。

🌐 CDN 使用（可选）

你也可以通过 CDN 使用：

<link rel="stylesheet" href="https://unpkg.com/normalax/dist/normalax.css">

或者：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalax/dist/normalax.css">

✨ 设计理念

Normalax 的设计目标：

• 修正浏览器默认样式差异
• 提供干净统一的排版基线
• 优化表单与媒体元素体验
• 尽量不干涉布局（保持中立）

🚀 特性

• 使用现代 CSS（如 accent-color、text-wrap）
• 改进表单控件一致性
• 更合理的默认排版
• 内建多语言字体优化（中日韩 / 阿拉伯语）
• 提供基础能力但不过度设计

🎯 项目定位

Normalax 不是：

• ❌ UI 框架
• ❌ 设计系统
• ❌ 组件库

Normalax 是：

• ✅ 基础样式层
• ✅ 更现代的 normalize
• ✅ 项目的起点

🧩 变量系统

Normalax 提供两类变量：

可覆盖变量（Public API）

:root {
  --default-font-family
  --default-mono-font-family
  --default-accent-color
  --default-border-color
}

👉 用于用户自定义全局行为

内部变量（Internal Tokens）

:root {
  --font-sans
  --font-zh-sc
  --lh-normal
}

👉 用于内部实现，不建议直接修改

📦 使用方式

<link rel="stylesheet" href="normalax.css">

🎨 自定义示例

:root {
  --default-accent-color: hotpink;
}

⚖️ 对比

• 比 normalize.css 更现代
• 比 reset.css 更温和
• 不像 UI 框架那样侵入性强

📄 许可

MIT License