css-kit - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

gulpfile.js

@@ -42,4 +42,4 @@ var gulp = require('gulp')
     .pipe(postcss(processors))
-    .pipe(gulp.dest('dist'))
+    .pipe(gulp.dest('lib'))
   console.log('[stylus building]')
 })

package.json

 {
   "name": "css-kit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "CSS Toolkit",
-  "main": "dist/toolkit.css",
+  "main": "./lib/toolkit.css",
+  "scripts": {
+    "clean": "rimraf ./lib",
+    "build": "npm run clean & gulp default",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/maskzh/toolkit.git"
+    "url": "git+https://github.com/maskzh/css-kit.git"
   },
@@ -14,2 +19,8 @@ "keywords": [
   ],
+  "author": "maskzh",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/maskzh/css-kit/issues"
+  },
+  "homepage": "https://github.com/maskzh/css-kit#readme",
   "devDependencies": {
@@ -22,9 +33,5 @@ "autoprefixer": "^6.3.1",
     "gulp-sourcemaps": "^1.6.0",
-    "gulp-stylus": "^2.2.0"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Elliott",
-  "license": "MIT"
+    "gulp-stylus": "^2.2.0",
+    "rimraf": "^2.5.2"
+  }
 }

README.md

 # css 工具箱
+一个用于快速构建 Web 界面的 CSS 工具库
 - 无 reset 样式
 - 无基础（h1-6、table 等）样式
-- 仅包含工具类如下
-  - [animation 基础动画](#animation-基础动画)
-  - [borders 边框相关](#borders-边框相关)
-  - [colors 颜色，背景色，边框色](#colors-文字色背景色边框色)
-  - [depth zIndex 层级](#depth-zindex-层级)
-  - [flex 栅格布局，基于 flex](#flex-栅格布局基于-flex)
-  - [grid 栅格布局，基于 float](#grid-栅格布局基于-float)
-  - [images 图片，背景图相关](#images-图片背景图相关)
-  - [positioning 定位，浮动](#positioning-定位浮动)
-  - [responsive 响应式相关](#responsive-响应式相关)
-  - [sizing 宽高](#sizing-宽高)
-  - [typography 排版相关](#typography-排版相关)
-  - [utilities 显示隐藏滚动等工具类](#utilities-显示隐藏滚动等工具类)
-  - [whitespace 内补外补](#whitespace-内补外补)
+- 仅包含工具类
 
-## 如何使用
+## 安装
 ```shell
@@ -24,39 +12,50 @@ npm i css-kit --save
 
+## 使用
+```js
+import 'css-kit'
+```
+or 使用 `dist` 下的目录下 toolkit.css 文件
 
-## animation 基础动画
+## 文档
+- [animation 基础动画](#animation-基础动画)
+- [borders 边框相关](#borders-边框相关)
+- [colors 颜色，背景色，边框色](#colors-文字色背景色边框色)
+- [depth zIndex 层级](#depth-zindex-层级)
+- [flex 栅格布局，基于 flex](#flex-栅格布局基于-flex)
+- [grid 栅格布局，基于 float](#grid-栅格布局基于-float)
+- [images 图片，背景图相关](#images-图片背景图相关)
+- [positioning 定位，浮动](#positioning-定位浮动)
+- [responsive 响应式相关](#responsive-响应式相关)
+- [sizing 宽高](#sizing-宽高)
+- [typography 排版相关](#typography-排版相关)
+- [utilities 显示隐藏滚动等工具类](#utilities-显示隐藏滚动等工具类)
+- [whitespace 内补外补](#whitespace-内补外补)
+
+### animation 基础动画
 支持的动画如下
-### fade
-  - .fadeIn
-  - .fadeOut
-  - .fadeInUp
-  - .fadeInDown
-### slide
-  - .slideUp
-  - .slideDown
-  - .slideRight
-  - .slideLeft
-### scale
-  - .scaleUp
-  - .scaleDown
-### flip
-  - .flipIn
-  - .flipOut
-### rotate
-  - .rotateRight
-  - .rotateLeft
-### other
-  - .flash
-  - .shake
+#### fade
+  - `.fadeIn`, `.fadeOut` `.fadeInUp`, `.fadeInDown`
+#### slide
+  - `.slideUp`, `.slideDown`, `.slideRight`, `.slideLeft`
+#### scale
+  - `.scaleUp`, `.scaleDown`
+#### flip
+  - `.flipIn`, `.flipOut`
+#### rotate
+  - `.rotateRight`, `.rotateLeft`
+#### other
+  - `.flash`, `.shake`
 
-## borders 边框相关
+### borders 边框相关
+#### 边框类型
 默认的 border-style 为 `solid`，默认的 border-color 为 `#D9D9D9`，默认的 border-radius 为 `3px`
 
 下面的类名默认都有 `border-style` 和 `border-color` 的样式
-- .b0、.b1、.b2、.b3 border-width 分别为 0, 1px, 2px, 3px，
-- .bt0、.bt1、.bt2、.bt3 上边框 border-width 分别为 0, 1px, 2px, 3px
-- .br0、.br1、.br2、.br3 右边框 border-width 分别为 0, 1px, 2px, 3px
-- .bb0、.bb1、.bb2、.bb3 下边框 border-width 分别为 0, 1px, 2px, 3px
-- .bl0、.bl1、.bl2、.bl3 左边框 border-width 分别为 0, 1px, 2px, 3px
+- `.b0`、`.b1`、`.b2`、`.b3` border-width 分别为 0, 1px, 2px, 3px，
+- `.bt0`、`.bt1`、`.bt2`、`.bt3` 上边框 border-width 分别为 0, 1px, 2px, 3px
+- `.br0`、`.br1`、`.br2`、`.br3` 右边框 border-width 分别为 0, 1px, 2px, 3px
+- `.bb0`、`.bb1`、`.bb2`、`.bb3` 下边框 border-width 分别为 0, 1px, 2px, 3px
+- `.bl0`、`.bl1`、`.bl2`、`.bl3` 左边框 border-width 分别为 0, 1px, 2px, 3px
 
-### hair border 头发丝边框
+#### hair border
 0.5px 的边框，通过 :before，:after 以及 transform: scale 缩放来实现
@@ -68,3 +67,3 @@ - .bht 上边框
 
-### 边框工具类
+#### 边框其他样式
 - .rounded     { border-radius: $border-radius }
@@ -75,5 +74,5 @@ - .not-rounded { border-radius: 0 }
 
-## colors 文字色，背景色，边框色
+### colors 文字色，背景色，边框色
 提供文字颜色、背景颜色、边框颜色支持的颜色
-```stylus
+```
 primary =    #337ab7
@@ -95,3 +94,3 @@ success =    #5cb85c
 
-文字颜色、背景颜色、边框颜色，分别使用 `color-xxx`、`bg-xxx`、`border-xxx`（eg. color-success、bg-white、border-black）
+**文字颜色、背景颜色、边框颜色，分别使用 `color-xxx`、`bg-xxx`、`border-xxx`（eg. color-success、bg-white、border-black）**
 
@@ -121,3 +120,3 @@ > 提供 `text-xxx` 作为 `color-xxx` 的别名
 
-## depth zIndex 层级
+### depth zIndex 层级
 ```css
@@ -137,4 +136,4 @@ .depth0  { z-index:    -1 }
 
-## flex 栅格布局，基于 flex
-### Flex 容器
+### flex 栅格布局，基于 flex
+#### Flex 容器
 ```css
@@ -158,3 +157,3 @@ .column {
 
-### Flex Items 定位
+#### Flex Items 定位
 ```css
@@ -180,3 +179,3 @@ .center               { align-items: center; justify-content: center }
 
-### Flex Items 对齐
+#### Flex Items 对齐
 ```css
@@ -192,3 +191,3 @@ .space-around   { justify-content: space-around }
 
-### Flex Order
+#### Flex Order
 ```css
@@ -207,3 +206,3 @@ .order1  { order: 1 }
 
-### Flex Size
+#### Flex Size
 ```css
@@ -218,8 +217,8 @@ .flex1 { flex: 1 }
 
-## grid 栅格布局，基于 float
+### grid 栅格布局，基于 float
 同 bootstrap 分为 12 栅格，从 `.col-1` 到 `.col-12`。
 也同时提供 `.col-pull-x`、`.col-push-x`、`.col-offset-x` 系列类名
 
-## images 图片，背景图相关
-### 背景图
+### images 图片，背景图相关
+#### 背景图
 ```css
@@ -247,4 +246,4 @@ .bg-no-repeat { background-repeat: no-repeat }
 
-## positioning 定位，浮动
-### 定位
+### positioning 定位，浮动
+#### 定位
 ```css
@@ -254,4 +253,3 @@ .relative { position: relative }
 .fixed    { position: fixed }
-```
-```css
+
 .top    { top: 0 }
@@ -262,3 +260,3 @@ .right  { right: 0 }
 ```
-### 浮动
+#### 浮动
 ```css
@@ -268,8 +266,2 @@ .float-left  { float: left }
 
-.pull-left  { float: left }
-.pull-right { float: right }
-
-.fl { float: left }
-.fr { float: right }
-
 /*清楚浮动*/
@@ -282,3 +274,5 @@ .clearfix:before, .clearfix:after {
 ```
-## responsive 响应式相关
+> 提供 `.pull-left`，`.pull-right` 以及 `.fl`，`.fr` 作为 `.float-left`，`.float-right` 的别名
+
+### responsive 响应式相关
 ```css
@@ -299,4 +293,4 @@ html { font-size: 10px }
 
-## sizing 宽高
-### 宽
+### sizing 宽高
+#### 宽
 ```css
@@ -319,3 +313,3 @@ .w-auto    { width: auto    !important }
 ```
-### 高
+#### 高
 ```css
@@ -347,4 +341,4 @@ .h-auto    { height: auto !important }
 
-## typography 排版相关
-### 文本对齐
+### typography 排版相关
+#### 文本对齐
 ```css
@@ -357,3 +351,3 @@ .text-center { text-align: center }
 
-### 行高
+#### 行高
 ```css
@@ -374,3 +368,3 @@ .lh1 { line-height:  1 }
 
-### 字体大小
+#### 字体大小
 ```css
@@ -393,20 +387,3 @@ .fs-xx-small { font-size: xx-small }
 .fs16       { font-size: 16px }
-.fs17       { font-size: 17px }
-.fs18       { font-size: 18px }
-.fs19       { font-size: 19px }
-.fs20       { font-size: 20px }
-.fs21       { font-size: 21px }
-.fs22       { font-size: 22px }
-.fs23       { font-size: 23px }
-.fs24       { font-size: 24px }
-.fs25       { font-size: 25px }
-.fs26       { font-size: 26px }
-.fs27       { font-size: 27px }
-.fs28       { font-size: 28px }
-.fs29       { font-size: 29px }
-.fs30       { font-size: 30px }
-.fs31       { font-size: 31px }
-.fs32       { font-size: 32px }
-.fs33       { font-size: 33px }
-.fs34       { font-size: 34px }
+...
 .fs35       { font-size: 35px }
@@ -416,3 +393,3 @@ .fs36       { font-size: 36px }
 
-### 其他工具类
+#### 其他字体样式
 ```css
@@ -441,4 +418,4 @@ /*文字溢出隐藏*/
 
-## utilities 显示隐藏滚动等工具类
-### display
+### utilities 显示隐藏滚动等工具类
+#### display
 ```css
@@ -456,5 +433,5 @@ .hidden       { display: none }
 ```
-同时 `.db`、`.dib`、`.di` 作为 `.block`、`.inline`、`.inline-block` 的别名
+> 同时 `.db`、`.dib`、`.di` 作为 `.block`、`.inline`、`.inline-block` 的别名
 
-### overflow & Scrolling
+#### overflow & Scrolling
 ```css
@@ -480,5 +457,5 @@ .overflow-hidden { overflow: hidden }
 ```
-同时 `.ofh`、`.ofs`、`.ofa` 作为 `.overflow-hidden`、`.overflow-scroll`、`.overflow-auto` 的别名
+> 同时 `.ofh`、`.ofs`、`.ofa` 作为 `.overflow-hidden`、`.overflow-scroll`、`.overflow-auto` 的别名
 
-### Text wrap
+#### Text wrap
 ```css
@@ -489,3 +466,3 @@ .pre       { white-space: pre }
 
-### Textareas
+#### Textareas
 ```css
@@ -497,3 +474,3 @@ .resize-none       { resize: none }
 
-### Misc
+#### Misc
 ```css
@@ -509,7 +486,7 @@ .pointer { cursor: pointer }
 
-## whitespace 内补外补
+### whitespace 内补外补
 提供内补和外补，粒度为 `1rem` 和 `10px`
 
-### 内补
-#### 以 `1rem` 为粒度
+#### 内补
+##### 以 `1rem` 为粒度
 ```css
@@ -542,3 +519,3 @@ .p0 { padding: 0 }
 
-#### 以 `10px` 为粒度
+##### 以 `10px` 为粒度
 ```css
@@ -568,3 +545,3 @@ .p10 { padding: 10px }
 
-#### 额外提供 `5px` 和 `15px`
+##### 额外提供 `5px` 和 `15px`
 ```css
@@ -587,2 +564,3 @@ .ph { padding: 5px }
 
-### 外补同补风格一致，类名前缀为 `m`
+### 外补
+**外补命名同内补风格一致，类名前缀为 `m`**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

77206

decreased by-0.13%

Dev dependency count

8

increased by14.29%

Number of lines in readme file

535

decreased by-3.95%

No dependency changes