tq-mreset

1.0.3 • Public • Published

tq-mreset

_function.scss集成了所有的基础功能,并且不输出任何样式,而_core.scss则在function的基础上加入了重置样式。

如何使用

npm 调用

安装

npm install tq-mreset --save-dev

调用

@import 'node_modules/tq-mreset/core';

@import 'node_modules/tq-mreset/function';

普通使用

<link rel="stylesheet" media="all" href="/node_modules/dist/reset.css">
// webpack
import 'tq-mreset/dist/reset.css'

开发

克隆项目

git clone ssh://git@gitlab.hztianque.com:22016/f2e/mobile-reset.git

项目build

npm run dist

项目发布

npm run pub

文件简述

两个集合文件(core,function)导入的都是core中的文件,区别在于core除了提供基本功能之外还会生成一份reset样式,而function则只提供基本功能。

core文件

variables

负责基础变量的文件,如常用的颜色,字体等变量。

media-queries

负责响应式断点判断的文件,来自paranoida的sass-mediaqueries

mixin

负责功能方面的文件。这里我们大概分成三个部分,一个是混合部分即mixin(主要定义了一些常用的flex,translate等),一个是placeholder选择器部分即%,最后就是我们的function函数部分。常用的include及extend就是在这里定义的。

animation

提供六组简单实用动画:fade-in/out, shrink-in/out, up-in/out, down-in/out,left-in/out,right-in/out。默认不产生样式,通过include调用

reset

normalize的基础上,根据目前我们大家的使用习惯进行了一些归零行动,及基础文字颜色,clearfix,box-sizing等。

字体重置规则,见文档字体设置

Readme

Keywords

Package Sidebar

Install

npm i tq-mreset

Weekly Downloads

1

Version

1.0.3

License

ISC

Last publish

Collaborators

  • inlost