0.0.3 • Published 6 years ago
basic-style v0.0.3
使用
Step 1
npm install basic-style
Step 2
import 'basic-style/scss/basic-style.scss'
概述
为了方便调用一些常用的样式而写,应用场景如:
flex实现移动端中文本
和图标
居中对齐
并 两端对齐
,需要在css中写上:
.cell{
display:flex;
align-items:center;
justify-content:space-between;
}
而为此封装一个组件,又少了灵活性,万一内边距有其他要求呢? 所以我把每一个flex的常用样式定义为独立样式名,调用起来的时候就像这样:
<div class="d-flex align-items-center justify-content-between">
<div>这里是文本</div>
<div> > </div><!-- 假设下面这个是图标 -->
</div>
这样就能实现需要另外定义的cell
了。假如这一部分要是手写,有可能只适用于一处。
先看目录
├─basic-style.scss //集成文件
├─ui //存放一些通用UI
| ├─control //比如按钮、文本框,单个表单组件这些都是算一个控件
| | ├─btn.scss //按钮
| | └input.scss //文本框
| ├─components //组件,多个控件、控件定制
| | ├─badge.scss //徽章
| | └navbar.scss //导航
├─text //文字处理
| ├─font-weight.scss //文字加粗
| ├─text-align.scss //文字排版,左中右
| ├─text-overflow.scss //文字超出显示省略号
| ├─text-size.scss //文字大小
| └text-type.scss //
├─layout //布局类
| ├─flex.scss //flex盒模型布局
| ├─float.scss //浮动类
| └layout.scss //全局布局类,可快速解决一些特定的布局
├─color //颜色处理
| ├─bg-colors.scss //背景颜色
| ├─gradient.scss //渐变背景颜色
| └text-colors.scss //文字颜色
├─basic //基础文件,存放一些比较基础的样式,例如初始化等此类不可过分定制但又经常需要的东西
| ├─border.scss //边框,默认就是1px的灰色边框
| ├─clearfix.scss //清除浮动
| ├─display.scss //块的模式,常用就那三个flex,block,inline-block
| ├─init.scss // 标签初始化
| ├─margin.scss // 外边距
| ├─overflow.scss //超出内容框的处理
| ├─padding.scss //内边距
| ├─position.scss //绝对定位
| ├─tag-size.scss //标签大小,经常用来设置头像大小等
| ├─_color.config.scss //颜色配置,包含颜色变量、颜色map等
| ├─_global.config.scss //全局配置,包含各个部件的变量设置
| ├─_inputConfig.scss //配置传入,用于
| └_mixins.config.scss //mixin方法