通用CSS样式库

一个轻量级、高性能的现代化 CSS 样式库，专注于响应式设计和组件化开发。

特性

• 🚀 轻量级设计，按需加载
• 📱 完整的响应式支持
• 🎨 灵活的主题定制
• 🛠 丰富的工具类
• 📦 模块化组件

安装

npm install your-common-css-lib

快速开始

// 完整引入
import 'your-common-css-lib/dist/index.css';

// 按需引入
import 'your-common-css-lib/dist/grid.css';

Grid 系统

基础单位说明

本样式库支持两种基础单位：

• rpx：响应式像素单位，会根据屏幕宽度自动计算，常用于移动端适配
• px：固定像素单位，用于需要精确控制的场景

Grid 基础配置详解

// styles/grid.scss

// 核心配置
$grid: (
    unit: rpx,           // 单位类型：rpx/px
                        // - rpx 会自动按照屏幕宽度计算
                        // - px 则使用固定像素值

    base: 1,            // 基础比例
                        // - 默认值为1，表示1:1的比例
                        // - 可以调整为其他值来改变整体缩放比例

    cols: 12,           // 默认列数
                        // - 12栅格系统，可以被2、3、4、6整除
                        // - 可以根据需求修改，如设置为24

    screens: (          // 断点配置
        sm: 640px,      // 小屏幕 (≥640px)
        md: 768px,      // 中等屏幕 (≥768px)
        lg: 1024px,     // 大屏幕 (≥1024px)
        xl: 1280px      // 超大屏幕 (≥1280px)
    )
) !default;

基础配置使用示例

<!-- 使用默认12列网格 -->
<div class="grid grid-cols-12">
    <div class="col-span-6">占据6列</div>
    <div class="col-span-6">占据6列</div>
</div>

<!-- 响应式列宽设置 -->
<div class="grid">
    <div class="col-12 md:col-6 lg:col-4">
        <!-- 在不同屏幕宽度下占据不同列数 -->
        <!-- 移动端：12列 -->
        <!-- 平板：6列 -->
        <!-- 桌面：4列 -->
    </div>
</div>

单位使用建议

• 移动端开发建议使用 rpx 单位，可以实现更好的屏幕适配
• PC端开发可以使用 px 单位，获得更精确的布局控制
• 混合开发时可以通过配置 base 值来调整不同单位间的换算比例

使用示例

<!-- 基础网格 -->
<div class="grid grid-cols-4 gap-md">
    <div>项目 1</div>
    <div>项目 2</div>
</div>

<!-- 响应式布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-sm md:gap-md">
    <div>自适应内容</div>
</div>

类名系统

布局类

• grid - 网格容器
• grid-cols-{1-12} - 列数
• grid-flow-{row|col} - 流向

间距类

• gap-{size} - 统一间距
• gap-x-{size} - 水平间距
• gap-y-{size} - 垂直间距

响应式

• sm: - ≥640px
• md: - ≥768px
• lg: - ≥1024px
• xl: - ≥1280px

最佳实践

1. 移动优先设计
2. 使用语义化类名
3. 遵循 BEM 命名规范
4. 优先使用预定义配置

浏览器支持

• Chrome ≥ 61
• Firefox ≥ 60
• Safari ≥ 11
• Edge ≥ 16

许可证

MIT