【 攻城略地 】使用原子类css库atomic.css助力前端开发

介绍

提供 web 微信小程序 的原子CSS库，拿来即用，可快速搭建前端页面，也可以扩展属于自己的样式库。

• 统一的样式名称
• 内置 normalize.css
• 支持自定义选择器
• 支持自定义样式名称
• 支持自定义样式名称连接符
• 支持自定义生成带有数值后缀的样式
• 支持元素响应式可见

gitee
atomic.css

下载atom.css
atom.css
atom.min.css

下载atom.wxss
atom.wxss
atom.min.wxss

使用说明

Position

.pos, .pos-r      {
     position: relative; }.pos-s      {
     position: static; }.pos-a      {
     position: absolute; }.pos-f      {
     position: fixed; }.pos-a-trbl {
     position: absolute; top: 0; right: 0; bottom: 0; left: 0; }.pos-z-0    {
     z-index: 0; }
... .pos-z-100  {
     z-index: 100; }.pos-t-1    {
     top: 1px; }.pos-r-1    {
     right: 1px; }.pos-b-1    {
     bottom: 1px; }.pos-l-1    {
     left: 1px; }

Width

.w-a        {
     width: "auto"; }.w-1        {
     width: 1px; }.w-1vw      {
     width: 1vw; }.w-1pct     {
     width: 1%; }

Line-height

.lh-i       {
     line-height: "initial"; }.lh-nm      {
     line-height: "normal"; }.lh-1       {
     line-height: 1; }.lh-0-1     {
     line-height: 0.1; }.lh-1-2     {
     line-height: 1.2; }

Color

查看 ant.design

.c-n        {
     color: "none"; }.c-tp       {
     color: "transparent"; }.c-white    {
     color: #fff; }.c-black    {
     color: black; }.c-blue     {
     color: #1890ff; }.c-blue-1   {
     color: #e8f4ff; }
... .c-blue-10  {
     color: #1890ff; }

Responsive

查看 bootstrap-sass

.vis-xs     {
     display: block !important; }.vis-sm-b   {
     display: block !important; }.hid-lg     {
     display: none !important; }

自定义扩展

使用 glup

使用 npm 安装 package.json 内的依赖

npm install$ cd atomic.css
$ gulp

default.scss

修改 default.scss 内的参数，生成自己的样式文件！

// 选择器
$atomic-selector: '#'
=> #pos-r:  { position: relative; };// 公共样式名称前缀
$atomic-prefix: 'my';
=> .my-w-1  { width: 1px; }// 样式名称连接符
$atomic-connector: '_';
=> .lh_0_1  { line-height: 0.1; }// 多级样式名称连接符
$atomic-connectors: ('-', '_');
=> .lh-0_1  { line-height: 0.1; }// 每个样式可自定义属性名称缩写
// .dis-n   { display: none; }
$atomic-display-name: 'dp';
=> .dp-n    { display: none; }