💒saduo.css

一个轻量级的CSS样式库，提供了一系列原子类，用于快速构建响应式网页。

🌈特点介绍

• 轻量:纯css支持响应式,无需JS，支持PC、移动端。
• 实用:不需要编译，引入即用，无需额外配置。
• 小巧:33kb,最佳实践，原子类为基础，复合样式类配合使用。

因为轻，所以值得拥有，很好的一个原子类css样式库。

⛱️软件架构

• 重置和基本样式

@import './reset.css';
@import './scrollbar.css';
@import './var.css';
@import './rem.css';

• 响应式

@import './screen.css';
@import './base.css';

• 位置

@import './row.css';
@import './col.css';
@import './position.css';

• 间距

@import './margin.css';
@import './padding.css';
@import './top.css';

• 高度&高度

@import './width.css';
@import './height.css';
@import './line-height.css';

• 列表&文本

@import './list.css';
@import './text.css';
@import './font.css';

• 阴影

@import './shadow.css';

• 透明度

@import './opacity.css';

• 滤镜

@import './filters.css';

• 颜色

@import './color.css';

🚧响应式断点参考

断点设置，768px，1024px，1536px，1536px，1920px。

• 小屏幕手机

@media (max-width: 768px){}

• 大屏幕手机/小平板

@media (min-width: 769px) and (max-width: 1024px) {}

• 平板

@media (min-width: 1025px) and (max-width: 1280px) {}

• 桌面

@media (min-width: 1281px) and (max-width: 1536px) {}

• 大桌面

@media (min-width: 1537px){}

使用说明

• 1.安装方式一：安装依赖包,依赖node.js环境。

npm i saduo --save
import "saduo/src/all.css";

• 2.安装方式二：cdn引入样式,建议下载到自己的项目中，并引入样式。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/css/saduo.css">

联系作者

微信:yanyutao2014
主页：https://gitee.com/yanyutao0402/saduo