Simple and easy to use composable CSS library
npm install oocss
$ npm install oocss
`
Usage
`javascript
import 'oocss'
// or
import 'oocss/src/index.css'
`
Example
dawn | 中国大陆加速镜像站点
Variable
`css
/* 统一使用变量,在保持一致性的同时,修改起来也极为方便 /
:root {
--primary-color: #1890ff;
--success-color: #52c41a;
--warning-color: #faad14;
--error-color: #f5222d;
--gray-1: #ffffff;
--gray-2: #fafafa;
--gray-3: #f5f5f5;
--gray-4: #e8e8e8;
--gray-5: #d9d9d9;
--gray-6: #bfbfbf;
--gray-7: #8c8c8c;
--gray-8: #595959;
--gray-9: #262626;
--gray-10: #000000;
--size-s: 8px;
--size-m: 16px;
--size-l: 24px;
}
html.dark {
--gray-1: #2c2c2c;
--gray-2: #454545;
--gray-3: #5b5b5b;
--gray-4: #7e7e7e;
--gray-5: #adadad;
--gray-6: #dcdcdc;
--gray-7: #e8e8e8;
--gray-8: #f3f3f3;
--gray-9: #f8f8f8;
--gray-10: #fafafa;
}
`
$3
缩写-值-伪类
__尺寸__ 0: 0px,s: size-s, m: size-m, l: size-l
__颜色__ 1-10,gray-1 ~ gray-10, p: primary-color, s: success-color, w: warning-color, e: error-color
缩写通常只有2个字符,最多3个字符,一个类通常也只包含一个样式,通过样式可以很轻松的联想到类名,学习成本极低。
.mg-l { margin: var(--size-l); }
.dp-f { display: flex; }
.ta-c { text-align: center; }
.bgc-p { background-color: var(--primary-color); }
.mgt-s { margin-top: var(--size-s); }
.bdb { border-bottom: 1px solid var(--gray-5); }
.bdc-3 { border-color: var(--gray-3); }
$3
text-align: center;
color: var(--gray-7);
.cl-p-h:hover {color: var(--primary-color)};
font-weight: bold;
text-decoration: underline;
padding: var(--size-s);
.mgv-l { margin-top: var(--size-l); margin-bottom: var(--size-l); };
background-color: var(--gray-2);
border: 1px solid var(--gray-5);
box-shadow;
cursor: pointer;
` html
Hello oocss
`
flex等分水平垂直居中,dp-f1在设置display: flex的同时会给所有子元素添加flex: 1 1;fs-1 ~ fs-6 同 h1 ~ h6 大小效果一致
` html
left
right
`
左右布局,常见于左边图片,右边多行内容的卡片布局
` html
left
right
`
上中下布局,上下固定,中间撑满并且溢出滚动,针对chrome对滚动条做出了优化
` html
header
body
footer
`
固定于屏幕底部, wd-100 和 wd-100vh 分别代表 width: 100% 以及 width:100vh
` html
``
License
oocss is released under the MIT license.Show more