├── .gitignore ├── docs ├── .vuepress │ ├── styles │ │ ├── index.styl │ │ └── palette.styl │ ├── dist │ │ ├── assets │ │ │ ├── js │ │ │ │ ├── 9.58fad138.js │ │ │ │ ├── 4.65852a23.js │ │ │ │ ├── 7.1590e130.js │ │ │ │ ├── 5.df5aca5e.js │ │ │ │ ├── 8.e1cd00af.js │ │ │ │ ├── 3.793e2ba5.js │ │ │ │ └── 2.9ece8d63.js │ │ │ └── img │ │ │ │ └── search.83621669.svg │ │ ├── images │ │ │ ├── logo.png │ │ │ └── logo.svg │ │ ├── 404.html │ │ ├── index.html │ │ ├── blog │ │ │ └── index.html │ │ └── guide │ │ │ └── index.html │ ├── public │ │ └── images │ │ │ ├── logo.png │ │ │ └── logo.svg │ └── config.js ├── README.md ├── blog │ └── README.md ├── guide │ └── README.md └── doc │ └── README.md ├── lib ├── visibility.scss ├── white-space.scss ├── text-color.scss ├── background.scss ├── cursor.scss ├── _style.scss ├── vertical-align.scss ├── text-align.scss ├── float.scss ├── font-weight.scss ├── display.scss ├── link.scss ├── overflow.scss ├── position.scss ├── line-height.scss ├── _doc.scss ├── index.scss ├── font-size.scss ├── size.scss ├── _sundry.scss ├── box.scss ├── flex.scss ├── border.scss ├── _var.scss └── _reset.scss ├── .travis.yml ├── deploly.sh ├── package.json ├── gulpfile.js ├── LICENSE ├── README.md └── README-en.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | hr 2 | margin 2rem 0 3 | -------------------------------------------------------------------------------- /lib/visibility.scss: -------------------------------------------------------------------------------- 1 | .visible { 2 | visibility: visible; 3 | } 4 | 5 | .hidden { 6 | visibility: hidden; 7 | } -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/9.58fad138.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{11:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zj1024/assembly-css/HEAD/docs/.vuepress/dist/images/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zj1024/assembly-css/HEAD/docs/.vuepress/public/images/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #640d7b 2 | $textColor = #2c3e50 3 | $borderColor = #eaecef 4 | $codeBgColor = #282c34 5 | -------------------------------------------------------------------------------- /lib/white-space.scss: -------------------------------------------------------------------------------- 1 | @each $type in normal, nowrap, pre, pre-wrap, pre-line { 2 | .text-#{$type} { 3 | white-space: $type; 4 | } 5 | } -------------------------------------------------------------------------------- /lib/text-color.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @each $name, $color in $text-colors { 4 | .text-#{$name} { 5 | color: $color; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /lib/background.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @each $name, $color in $bg-colors { 4 | .bg-#{$name} { 5 | background-color: $color; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /lib/cursor.scss: -------------------------------------------------------------------------------- 1 | @each $type in default, auto, crosshair, pointer, move, text, wait, help { 2 | .cursor-#{$type} { 3 | cursor: $type; 4 | } 5 | } -------------------------------------------------------------------------------- /lib/_style.scss: -------------------------------------------------------------------------------- 1 | @import "sundry"; 2 | 3 | html { 4 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /lib/vertical-align.scss: -------------------------------------------------------------------------------- 1 | @each $type in baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit { 2 | .v-a-#{$type} { 3 | vertical-align: $type; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /lib/text-align.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" 3 | */ 4 | @each $type in left, right, center, justify, inherit { 5 | .text-#{$type} { 6 | text-align: #{$type}; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /lib/float.scss: -------------------------------------------------------------------------------- 1 | .clearfixed { 2 | &:before, &:after { 3 | content: ' '; 4 | display: table; 5 | } 6 | &:after { 7 | clear: both; 8 | } 9 | } 10 | .pull-left { 11 | float: left; 12 | } 13 | 14 | .pull-right { 15 | float: right; 16 | } -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lib/font-weight.scss: -------------------------------------------------------------------------------- 1 | @each $type in bold normal lighter { 2 | .#{$type} { 3 | font-weight: bold; 4 | } 5 | } 6 | 7 | @each $weight in 100, 200, 300, 400, 500, 600, 700, 800, 900 { 8 | .fw-#{$weight} { 9 | font-weight: $weight; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lib/display.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @each $type in inherit, none, inline, inline-block, block, table, inline-table, table-cell { 4 | .d-#{$type} { 5 | display: #{$type}; 6 | } 7 | } 8 | 9 | .hide { 10 | display: none; 11 | } 12 | 13 | .show { 14 | display: block 15 | } 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - lts/* 4 | install: 5 | - npm ci 6 | script: 7 | - npm run docs:build 8 | deploy: 9 | provider: pages 10 | skip-cleanup: true 11 | local_dir: docs/.vuepress/dist 12 | github-token: $GITHUB_TOKEN 13 | keep-history: true 14 | on: 15 | branch: master -------------------------------------------------------------------------------- /lib/link.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @each $name, $color in $text-colors { 4 | .link-#{$name} { 5 | color: $color; 6 | text-decoration: none; 7 | cursor: pointer; 8 | &:hover, &:active, &:focus { 9 | color: darken($color, 10%); 10 | text-decoration: underline; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /lib/overflow.scss: -------------------------------------------------------------------------------- 1 | @each $type in visible, hidden, scroll, auto, inherit { 2 | .o-#{$type} { 3 | overflow: $type; 4 | } 5 | .o-x-#{$type} { 6 | overflow-x: $type; 7 | } 8 | .o-y-#{$type} { 9 | overflow-y: $type; 10 | } 11 | } 12 | 13 | .scroll-touch { 14 | -webkit-overflow-scrolling: touch; 15 | } 16 | -------------------------------------------------------------------------------- /deploly.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 生成静态文件 7 | npm run docs:build 8 | 9 | # 进入生成的文件夹 10 | cd docs/.vuepress/dist 11 | 12 | git init 13 | git add -A 14 | git commit -m 'deploy' 15 | 16 | # 如果发布到 https://.github.io/ 17 | git push -f git@github.com:zj1024/assembly-css.git master:gh-pages 18 | 19 | cd - -------------------------------------------------------------------------------- /lib/position.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "var"; 3 | 4 | @each $type in static, relative, absolute, fixed, sticky { 5 | .#{$type} { 6 | position: $type; 7 | } 8 | } 9 | 10 | @each $size in $box-sizes { 11 | @each $side in top, right, bottom, left { 12 | .#{$side}-#{$size} { 13 | #{$side}: #{$size}px; 14 | } 15 | } 16 | } 17 | 18 | @each $size in $box-sizes { 19 | .z-index-#{$size} { 20 | z-index: #{$size}; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/4.65852a23.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{146:function(t,e,n){"use strict";var a=n(61);n.n(a).a},153:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||a().default)}},i=(n(146),n(0)),r=Object(i.a)(a,void 0,void 0,!1,null,"fa411f52",null);e.default=r.exports},61:function(t,e,n){}}]); -------------------------------------------------------------------------------- /lib/line-height.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @for $size from 0 through $line-height-through { 4 | .l-h-#{$size} { 5 | line-height: #{$size}em; 6 | } 7 | @if $size <= $line-height-decimal-through { 8 | @for $i from 0 to 10 { 9 | .l-h-#{$size}_#{$i} { 10 | line-height: #{$size}#{'.'}#{$i}em; 11 | } 12 | } 13 | } @else { 14 | .l-h-#{$size}_5 { 15 | line-height: #{$size}#{'.5'}em; 16 | } 17 | } 18 | } 19 | 20 | @for $size from 0 through $line-height-px-through { 21 | .lh-#{$size} { 22 | line-height: #{$size}px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /lib/_doc.scss: -------------------------------------------------------------------------------- 1 | // 用于文档使用的assembly-css版本 2 | // 由于vuepress直接对标签设置的样式 3 | // assembly-css打包去掉reset文件, 避免影响vuepress默认样式 4 | @import "background"; 5 | @import "border"; 6 | @import "box"; 7 | @import "cursor"; 8 | @import "display"; 9 | @import "flex"; 10 | @import "float"; 11 | @import "font-size"; 12 | @import "font-weight"; 13 | @import "line-height"; 14 | @import "link"; 15 | @import "overflow"; 16 | @import "position"; 17 | @import "size"; 18 | @import "text-align"; 19 | @import "text-color"; 20 | @import "vertical-align"; 21 | @import "visibility"; 22 | @import "white-space"; 23 | @import "sundry"; -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'AssemblyCss', 3 | description: 'A library for quickly writing CSS by combining classes', 4 | themeConfig: { 5 | smoothScroll: true, 6 | displayAllHeaders: true, 7 | nav: [ 8 | { text: '指南', link: '/guide/' }, 9 | { text: '文档', link: '/doc/' }, 10 | { text: '更新日志', link: '/blog/' }, 11 | { text: 'Github', link: 'https://github.com/zj1024/assembly-css' } 12 | ], 13 | sidebar: { 14 | '/guide/': [''], 15 | '/doc/': [''], 16 | '/blog/': [''] 17 | } 18 | }, 19 | base: '/assembly-css/' 20 | } 21 | -------------------------------------------------------------------------------- /lib/index.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * assembly-css 3 | * Github: https://github.com/zj1024/assembly-css 4 | * Author: jingyu 5 | */ 6 | @import "reset"; 7 | 8 | @import "background"; 9 | @import "border"; 10 | @import "box"; 11 | @import "cursor"; 12 | @import "display"; 13 | @import "flex"; 14 | @import "float"; 15 | @import "font-size"; 16 | @import "font-weight"; 17 | @import "line-height"; 18 | @import "link"; 19 | @import "overflow"; 20 | @import "position"; 21 | @import "size"; 22 | @import "text-align"; 23 | @import "text-color"; 24 | @import "vertical-align"; 25 | @import "visibility"; 26 | @import "white-space"; 27 | @import "sundry"; 28 | 29 | @import "style"; 30 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/7.1590e130.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{148:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "assembly-css", 3 | "version": "1.1.1", 4 | "description": "A library for quickly writing CSS by combining classes", 5 | "main": "gulpfile.js", 6 | "files": [ 7 | "dist", 8 | "lib" 9 | ], 10 | "directories": { 11 | "lib": "lib" 12 | }, 13 | "scripts": { 14 | "build": "gulp", 15 | "docs:dev": "vuepress dev docs", 16 | "docs:build": "vuepress build docs" 17 | }, 18 | "keywords": [ 19 | "css", 20 | "assembly-css", 21 | "sass" 22 | ], 23 | "author": "jingyu", 24 | "license": "MIT", 25 | "devDependencies": { 26 | "gulp": "^4.0.0", 27 | "gulp-rename": "^1.4.0", 28 | "gulp-sass": "^4.0.2", 29 | "vuepress": "^1.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp') 2 | const sass = require('gulp-sass') 3 | const rename = require('gulp-rename') 4 | 5 | gulp.task('minScss', () => { 6 | return gulp.src('./lib/index.scss') 7 | .pipe(rename('assembly-css.min.scss')) 8 | .pipe(sass({ 9 | outputStyle: 'compressed' 10 | })) 11 | .pipe(gulp.dest('./dist')) 12 | }) 13 | 14 | gulp.task('scss', () => { 15 | return gulp.src('./lib/index.scss') 16 | .pipe(rename('assembly-css.scss')) 17 | .pipe(sass({ 18 | outputStyle: 'expanded' 19 | })) 20 | .pipe(gulp.dest('./dist')) 21 | }) 22 | 23 | // 用于文档使用的assembly-css版本 24 | // 由于vuepress直接对标签设置的样式 25 | // assembly-css打包去掉reset文件, 避免影响vuepress默认样式 26 | gulp.task('docScss', () => { 27 | return gulp.src('./lib/_doc.scss') 28 | .pipe(rename('assembly-css.scss')) 29 | .pipe(sass({ 30 | outputStyle: 'compact' 31 | })) 32 | .pipe(gulp.dest('./docs/.vuepress/public')) 33 | }) 34 | 35 | gulp.task('default', gulp.parallel('scss', 'minScss', 'docScss')) 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 jingyu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/font-size.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | @for $size from 0 through $font-size-em-through { 4 | .fs-em-#{$size} { 5 | font-size: #{$size}em; 6 | } 7 | @if $size <= $font-size-em-decimal-through { 8 | @for $i from 0 to 10 { 9 | .fs-em-#{$size}_#{$i} { 10 | font-size: #{$size}#{'.'}#{$i}em; 11 | } 12 | } 13 | } @else { 14 | .fs-em-#{$size}_5 { 15 | font-size: #{$size}#{'.5'}em; 16 | } 17 | } 18 | } 19 | 20 | @for $size from 0 through $font-size-rem-through { 21 | .fs-rem-#{$size} { 22 | font-size: #{$size}rem; 23 | } 24 | @if $size <= $font-size-rem-decimal-through { 25 | @for $i from 0 to 10 { 26 | .fs-rem-#{$size}_#{$i} { 27 | font-size: #{$size}#{'.'}#{$i}rem; 28 | } 29 | } 30 | } @else { 31 | .fs-rem-#{$size}_5 { 32 | font-size: #{$size}#{'.5'}rem; 33 | } 34 | } 35 | } 36 | 37 | @for $size from 12 through $font-size-px-through { 38 | .fs-#{$size} { 39 | font-size: #{$size}px; 40 | } 41 | } 42 | 43 | // lib-flexible 在375宽度视口下定义rem像素大小 44 | @for $size from 12 through 80 { 45 | .fs-rem-#{$size}px { 46 | font-size: #{($size * .5) / 18.75}rem; 47 | } 48 | } -------------------------------------------------------------------------------- /lib/size.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | .w-full { 4 | width: 100%; 5 | } 6 | 7 | .h-full { 8 | height: 100%; 9 | } 10 | 11 | @for $percent from 0 to 100 { 12 | .w-p-#{$percent} { 13 | width: #{$percent}#{'%'}; 14 | } 15 | .h-p-#{$percent} { 16 | height: #{$percent}#{'%'}; 17 | } 18 | } 19 | 20 | 21 | @for $i from 1 through 30 { 22 | .h-#{$i} { 23 | height: #{$i}px; 24 | } 25 | } 26 | 27 | @for $i from 1 through 30 { 28 | .w-#{$i} { 29 | width: #{$i}px; 30 | } 31 | } 32 | 33 | 34 | @each $i in $sizes { 35 | .w-#{$i} { 36 | width: #{$i}px; 37 | } 38 | .h-#{$i} { 39 | height: #{$i}px; 40 | } 41 | .max-w-#{$i} { 42 | max-width: #{$i}px; 43 | } 44 | .max-h-#{$i} { 45 | max-height: #{$i}px; 46 | } 47 | .min-w-#{$i} { 48 | min-width: #{$i}px; 49 | } 50 | .min-h-#{$i} { 51 | min-height: #{$i}px; 52 | } 53 | } 54 | 55 | // 定义vw wh 56 | @for $size from 1 through 100 { 57 | .w-#{$size}vw { 58 | width: #{$size}vw; 59 | } 60 | .w-#{$size}vh { 61 | width: #{$size}vh; 62 | } 63 | .h-#{$size}vw { 64 | height: #{$size}vw; 65 | } 66 | .h-#{$size}vh { 67 | height: #{$size}vh; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | title: AssemblyCss 4 | heroText: AssemblyCss 5 | heroImage: /images/logo.png 6 | tagline: 通过组合class方式快速书写css的库 7 | actionText: 快速上手 ➡ 8 | actionLink: /guide/ 9 | meta: 10 | - name: description 11 | content: AssemblyCss, assembly-css通过组合class方式快速书写css的库, A library for quickly writing CSS by combining classes 12 | - name: keywords 13 | content: AssemblyCss, css, assembly-css 14 | features: 15 | - title: 方便快捷 16 | details: 通过npm安装或直接引入css文件, 随时可用, 在大型项目中表现尤为出色 17 | - title: 简单构建 18 | details: 通过 gulp + scss 的构建，快捷构建出打包后的css文件, 一处引入, 全局使用。 19 | - title: 易于维护 20 | details: 在团队开发过程中, 修改样式只需要更改DOM上的类即可, 避免了DOM逐级嵌套样式的混乱 21 | footer: MIT Licensed | Copyright © 2019-present 京宇jingyu 22 | --- 23 | 24 | ### 快速开发三栏布局 25 | 26 | **使用 assembly-css** 27 | 28 | ```html 29 | 30 |
31 |
left
32 |
content
33 |
right
34 |
35 | ``` 36 | 37 | **渲染结果** 38 | 39 | 40 | 41 |
42 |
left
43 |
content
44 |
right
45 |
46 | -------------------------------------------------------------------------------- /lib/_sundry.scss: -------------------------------------------------------------------------------- 1 | // sundry 杂项 2 | 3 | /** 4 | * 适用于父子元素 5 | * 父元素 .overlay-l-t 6 | * 子元素只有一个 7 | * @example:

test

8 | */ 9 | .overlay-l-t { 10 | position: relative; 11 | > * { 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | } 16 | } 17 | 18 | .overlay-r-t { 19 | position: relative; 20 | > * { 21 | position: absolute; 22 | right: 0; 23 | top: 0; 24 | } 25 | } 26 | 27 | .overlay-l-b { 28 | position: relative; 29 | > * { 30 | position: absolute; 31 | left: 0; 32 | bottom: 0; 33 | } 34 | } 35 | 36 | .overlay-r-b { 37 | position: relative; 38 | > * { 39 | position: absolute; 40 | right: 0; 41 | bottom: 0; 42 | } 43 | } 44 | 45 | /** 46 | * 适用于父子元素 47 | * 父元素 .layout-auto 48 | * 子元素只有一个, 父元素添加宽高 49 | * @example:
test
50 | */ 51 | .layout-auto { 52 | position: relative; 53 | > * { 54 | position: absolute; 55 | left: 50%; 56 | top: 50%; 57 | transform: translate(-50%, -50%); 58 | } 59 | } 60 | 61 | // 文字溢出处理 62 | .overflow-omit { 63 | text-overflow: ellipsis; 64 | overflow: hidden; 65 | white-space: nowrap; 66 | } 67 | 68 | @for $line from 1 through 3 { 69 | .overflow-#{$line} { 70 | display: -webkit-box; 71 | -webkit-box-orient: vertical; 72 | -webkit-line-clamp: $line; 73 | overflow: hidden; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /docs/blog/README.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | 3 | ## V1.1.1 4 | 5 | - 减小npm下载体积 6 | 7 | ## V1.1.0 8 | - 增加对flex样式的扩充 9 | - 增加vw, wh 单位的支持 10 | - 增加flexible字体大小的支持 11 | 12 | ### 增加对flex样式的扩充 13 | 14 | 1. 增加了flex-grow的支持 15 | 16 | 范围值为`0 - 3` 17 | 18 | 例: 19 | ```css 20 | .flex-g-1 { 21 | flex-grow: 1 22 | } 23 | ``` 24 | 25 | 2. 增加了align-content的支持 26 | 27 | 范围值 `flex-start, flex-end, center, space-between, space-around, stretch` 28 | 29 | 例: 30 | ```css 31 | .a-c-start { 32 | align-content: flex-start; 33 | } 34 | ``` 35 | 36 | 3. 增加了align-self的支持 37 | 38 | 范围值 `auto, flex-start, flex-end, center, baseline, stretch` 39 | 40 | 例: 41 | ```css 42 | .a-s-start { 43 | align-self: flex-start; 44 | } 45 | ``` 46 | 47 | ### 增加vw, wh 单位的支持 48 | 1. margin, padding 可以使用vw, wh 单位 49 | 50 | 范围值 `1-10` 51 | 52 | ```css 53 | .m-l-10vh { 54 | margin-left: 10vh; 55 | } 56 | .m-l-10vw { 57 | margin-left: 10vw; 58 | } 59 | .p-l-10vh { 60 | padding-left: 10vh; 61 | } 62 | .p-l-10vw { 63 | padding-left: 10vw; 64 | } 65 | ``` 66 | 67 | 2. width, height 可以使用vw, wh单位 68 | 69 | 范围值 `1-100` 70 | ```css 71 | .w-10vw { 72 | width: 10vw; 73 | } 74 | .w-10vh { 75 | width: 10vh; 76 | } 77 | .h-10vw { 78 | height: 10vw; 79 | } 80 | .h-10vh { 81 | height: 10vh; 82 | } 83 | ``` 84 | 85 | ### 增加flexible字体大小的支持 86 | 87 | 配合[flexible.js](https://github.com/amfe/lib-flexible) 在375宽度视口下定义rem像素大小 88 | 89 | 范围值 `12 - 80` 90 | ```css 91 | .fs-rem-16px { 92 | font-size: 0.4266666667rem; 93 | } 94 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AssemblyCss 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

Looks like we've got some broken links.
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /lib/box.scss: -------------------------------------------------------------------------------- 1 | @import "var"; 2 | 3 | /** 4 | * margin padding 5 | * @each 循环多次保证优先级 6 | */ 7 | 8 | .m-auto { 9 | margin-left: auto; 10 | margin-right: auto; 11 | } 12 | 13 | @each $size in $box-sizes { 14 | .m-#{$size}, .margin-#{$size} { 15 | margin: #{$size}px; 16 | } 17 | @if $size >= 0 { 18 | .p-#{$size}, .padding-#{$size} { 19 | padding: #{$size}px; 20 | } 21 | } 22 | } 23 | 24 | @each $size in $box-sizes { 25 | .m-h-#{$size} { 26 | margin-left: #{$size}px; 27 | margin-right: #{$size}px; 28 | } 29 | .m-v-#{$size} { 30 | margin-top: #{$size}px; 31 | margin-bottom: #{$size}px; 32 | } 33 | @if $size >= 0 { 34 | .p-h-#{$size} { 35 | padding-left: #{$size}px; 36 | padding-right: #{$size}px; 37 | } 38 | .p-v-#{$size} { 39 | padding-top: #{$size}px; 40 | padding-bottom: #{$size}px; 41 | } 42 | } 43 | } 44 | 45 | @each $size in $box-sizes { 46 | @each $side in top right bottom left { 47 | .m-#{str-slice($side, 0, 1)}-#{$size} { 48 | margin-#{$side}: #{$size}px; 49 | } 50 | @if $size >= 0 { 51 | .p-#{str-slice($side, 0, 1)}-#{$size} { 52 | padding-#{$side}: #{$size}px; 53 | } 54 | } 55 | } 56 | } 57 | 58 | @for $size from 1 through 10 { 59 | @each $side in left right top bottom { 60 | .m-#{str-slice($side, 0, 1)}-#{$size}vw { 61 | margin-#{$side}: #{$size}vw; 62 | } 63 | .p-#{str-slice($side, 0, 1)}-#{$size}vw { 64 | padding-#{$side}: #{$size}vw; 65 | } 66 | } 67 | @each $side in left right top bottom { 68 | .m-#{str-slice($side, 0, 1)}-#{$size}vh { 69 | margin-#{$side}: #{$size}vh; 70 | } 71 | .p-#{str-slice($side, 0, 1)}-#{$size}vh { 72 | padding-#{$side}: #{$size}vh; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /lib/flex.scss: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: flex; 3 | } 4 | 5 | .flex-column { 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | 10 | // justify-content 11 | .j-start { 12 | justify-content: flex-start; 13 | } 14 | .j-end { 15 | justify-content: flex-end; 16 | } 17 | .j-center { 18 | justify-content: center; 19 | } 20 | .j-between { 21 | justify-content: space-between; 22 | } 23 | .j-around { 24 | justify-content: space-around; 25 | } 26 | 27 | // align-items 28 | .a-start { 29 | align-items: flex-start; 30 | } 31 | 32 | .a-center { 33 | align-items: center; 34 | } 35 | 36 | .a-end { 37 | align-items: flex-end; 38 | } 39 | 40 | // flex-wrap 41 | @each $type in nowrap, wrap, wrap-reverse { 42 | .flex-#{$type} { 43 | flex-wrap: $type; 44 | } 45 | } 46 | 47 | // flex 48 | @each $size in 1, 2, 3 { 49 | .flex-#{$size} { 50 | flex: $size; 51 | } 52 | } 53 | 54 | // flex-shrink 55 | @for $i from 0 through 3 { 56 | .flex-s-#{$i} { 57 | flex-shrink: $i; 58 | } 59 | } 60 | 61 | // flex-grow 62 | @for $i from 0 through 3 { 63 | .flex-g-#{$i} { 64 | flex-grow: $i; 65 | } 66 | } 67 | 68 | // align-content 69 | .a-c-start { 70 | align-content: flex-start; 71 | } 72 | .a-c-end { 73 | align-content: flex-end; 74 | } 75 | .a-c-center { 76 | align-content: center; 77 | } 78 | .a-c-between { 79 | align-content: space-between; 80 | } 81 | .a-c-around { 82 | align-content: space-around; 83 | } 84 | .a-c-stretch { 85 | align-content: stretch; 86 | } 87 | 88 | // align-self 89 | .a-s-start { 90 | align-self: flex-start; 91 | } 92 | .a-s-end { 93 | align-self: flex-end; 94 | } 95 | @each $type in auto, center, baseline, stretch { 96 | .a-s-#{$type} { 97 | align-self: $type; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

AssemblyCss

8 | 9 |
10 | 11 | 通过组合class方式快速书写css的库 12 | 13 | ![MIT](https://img.shields.io/badge/license-MIT-green) ![SIZE](https://img.shields.io/badge/size-60%20kb-blue) ![VERSION](https://img.shields.io/badge/version-1.1.1-orange) 14 | 15 |
16 | 17 | --- 18 | 19 | ## 介绍 20 | 21 | assembly-css 是一个通过`sass`, `gulp` 构建完成的css库, 提供了基础的css样式类, 在开发大型项目避免书写重复的css样式。 22 | 23 | **过多的考虑** 在小型项目中由于代码量不大, 加上库的体积, 反而不建议使用 24 | 25 | ## 文档 26 | 27 | 中文 | [English](https://github.com/zj1024/assembly-css/blob/master/README-en.md) 28 | 29 | ## 安装 30 | 31 | ### CDN 引入 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | 生产环境使用压缩版本 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | ### NPM 引入 44 | 45 | ```Shell 46 | # 最新稳定版 47 | $ npm install assembly-css 48 | ``` 49 | 50 | ```js 51 | import 'assembly-css/lib/index.scss' 52 | ``` 53 | 54 | ### 快速开发三栏布局 55 | 56 | ```html 57 | 58 |
59 |
left
60 |
content
61 |
right
62 |
63 | ``` 64 | 65 | 你可以直接拷贝到自己的demo文件里尝试下运行效果, 也可以点击[这里](https://zj1024.github.io/assembly-css/)查看写好的例子 66 | 67 | ## 优点 ## 68 | 69 | - 方便快捷 通过npm安装或直接引入css文件, 随时可用, 在大型项目中表现尤为出色 70 | - 代码样式逻辑更加清晰 71 | - 易维护 在团队开发过程中, 修改样式只需要更改DOM上的类即可, 避免了DOM逐级嵌套样式的混乱 72 | 73 | ## 提问 74 | 75 | 你可以在[issues](https://github.com/zj1024/assembly-css/issues)直接提问 76 | 77 | ## 最后 78 | 79 | 如果你对这个项目有兴趣, 欢迎PR -------------------------------------------------------------------------------- /lib/border.scss: -------------------------------------------------------------------------------- 1 | @import 'var'; 2 | 3 | .border { 4 | border: 1px solid $color-border; 5 | } 6 | 7 | // vertical 8 | .b-v { 9 | border-top: 1px solid $color-border; 10 | border-bottom: 1px solid $color-border; 11 | } 12 | 13 | // horizontal 14 | .b-h { 15 | border-left: 1px solid $color-border; 16 | border-right: 1px solid $color-border; 17 | } 18 | 19 | // border double 20 | .b-double { 21 | border: double $color-border; 22 | } 23 | 24 | .b-w-thin { 25 | position: relative; 26 | &::after { 27 | content: ""; 28 | border: 1px solid $color-border; 29 | transform: scaleY(.5); 30 | position: absolute; 31 | left: 0; 32 | right: 0; 33 | top: -50%; 34 | bottom: -50%; 35 | } 36 | } 37 | 38 | .b-round { 39 | border-radius: 50%; 40 | } 41 | 42 | .b-none { 43 | border: none; 44 | } 45 | 46 | @each $side in left, right, top, bottom { 47 | .b-#{str-slice($side, 0, 1)} { 48 | border-#{$side}: 1px solid $color-border; 49 | } 50 | .b-#{$side} { 51 | border-#{$side}: 1px solid $color-border; 52 | } 53 | } 54 | 55 | // border-style 56 | @each $style in dotted, dashed { 57 | .border-#{$style} { 58 | border: 1px $style $color-border; 59 | } 60 | .b-v-#{$style} { 61 | border-top: 1px $style $color-border; 62 | border-bottom: 1px $style $color-border; 63 | } 64 | .b-h-#{$style} { 65 | border-left: 1px $style $color-border; 66 | border-right: 1px $style $color-border; 67 | } 68 | @each $side in left, right, top, bottom { 69 | .b-#{str-slice($side, 0, 1)}-#{$style} { 70 | border-#{$side}: 1px $style $color-border; 71 | } 72 | } 73 | } 74 | 75 | @for $size from 0 through $border-width-through { 76 | .b-#{$size} { 77 | border-width: #{$size}px; 78 | } 79 | } 80 | 81 | @for $size from 0 through $border-radius-through { 82 | .b-radius-#{$size}, 83 | .b-r-#{$size} { 84 | border-radius: #{$size}px; 85 | } 86 | } 87 | 88 | @each $name, $color in $border-colors { 89 | .b-#{$name} { 90 | border-color: $color; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /lib/_var.scss: -------------------------------------------------------------------------------- 1 | // 颜色 size范围 2 | $color-black: #333 !default; 3 | $color-white: #ffffff !default; 4 | $color-grey: #888 !default; 5 | $color-green: #19be6b !default; 6 | $color-blue: #61c3ff !default; 7 | $color-yellow: #ff9900 !default; 8 | $color-red: #f35958 !default; 9 | 10 | $color-title: #17233d !default; 11 | $color-content: #515a6e !default; 12 | $color-disabled: #c5c8ce !default; 13 | 14 | $bg-grey: #f2f2f2 !default; 15 | $bg-white: #ffffff !default; 16 | $bg-black: #393D49 !default; 17 | 18 | $color-border: #dcdfe6 !default; 19 | 20 | // 主题背景色 21 | $bg-colors: ( 22 | 'white': $bg-white, 23 | 'black': $bg-black, 24 | 'grey': $bg-grey, 25 | 'green': $color-green, 26 | 'blue': $color-blue, 27 | 'yellow': $color-yellow, 28 | 'red': $color-red, 29 | ) !default; 30 | 31 | // 文本颜色 32 | $text-colors: ( 33 | 'white': $color-white, 34 | 'black': $color-black, 35 | 'grey': $color-grey, 36 | 'green': $color-green, 37 | 'blue': $color-blue, 38 | 'yellow': $color-yellow, 39 | 'red': $color-red, 40 | 'title': $color-title, 41 | 'content': $color-content, 42 | 'disabled': $color-disabled 43 | ) !default; 44 | 45 | // 边框颜色 46 | $border-colors: ( 47 | 'white': $color-white, 48 | 'black': $color-black, 49 | 'grey': $color-border, 50 | 'green': $color-green, 51 | 'blue': $color-blue, 52 | 'yellow': $color-yellow, 53 | 'red': $color-red 54 | ) !default; 55 | 56 | // border 57 | $border-width-through: 20 !default; 58 | $border-radius-through: 20 !default; 59 | 60 | // margin padding left right top bottom 61 | $box-sizes: ( 62 | -20, -15, -12, -10, -8, -6, -5, -4, -3, -2, -1, 63 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 20, 25, 30, 35, 40, 50, 60, 80, 100) !default; 64 | 65 | // width height 66 | $sizes: ( 67 | 40, 50, 60, 70, 80, 90, 100, 68 | 120, 150, 200, 250, 300, 400, 500, 600, 800, 1000, 1200) !default; 69 | 70 | // font-size 71 | $font-size-em-through: 10 !default; 72 | $font-size-em-decimal-through: 5 !default; 73 | $font-size-rem-through: 10 !default; 74 | $font-size-rem-decimal-through: 5 !default; 75 | $font-size-px-through: 80 !default; 76 | 77 | // line-height 78 | $line-height-through: 20 !default; 79 | $line-height-decimal-through: 5 !default; 80 | $line-height-px-through: 100 !default; 81 | -------------------------------------------------------------------------------- /README-en.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

AssemblyCss

8 | 9 |
10 | 11 | A library for quickly writing CSS by combining classes 12 | 13 | ![MIT](https://img.shields.io/badge/license-MIT-green) ![SIZE](https://img.shields.io/badge/size-60%20kb-blue) ![VERSION](https://img.shields.io/badge/version-1.1.1-orange) 14 | 15 |
16 | 17 | --- 18 | 19 | ## Introduction 20 | 21 | QuicklyCSS is a CSS library built with `sass`, `gulp` and provides basic CSS style classes to avoid writing repetitive CSS styles on large projects. 22 | 23 | **overthink** It is not recommended for small projects because of the small amount of code and the size of the library 24 | 25 | ## Documentation 26 | 27 | English | [中文](https://github.com/zj1024/assembly-css/blob/master/README.md) 28 | 29 | ## Installation 30 | 31 | ### CDN 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | The production environment use a compressed version 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | ### NPM 44 | 45 | ```Shell 46 | $ npm install assembly-css 47 | ``` 48 | 49 | ```js 50 | import 'assembly-css/lib/index.scss' 51 | ``` 52 | 53 | ### Quickly develop a three-column layout 54 | 55 | ```html 56 | 57 |
58 |
left
59 |
content
60 |
right
61 |
62 | ``` 63 | 64 | You can copy it directly into your demo file and try it out, or you can click [here](https://zj1024.github.io/assembly-css/) to see an example 65 | 66 | ## Advantages ## 67 | 68 | - Easy to install or directly introduce CSS files through NPM, ready to use, especially in large projects 69 | - The code style logic is clearer 70 | - Easy maintenance during team development, changing styles only requires changing classes on the DOM, avoiding the confusion of hierarchical nested DOM styles 71 | 72 | ## Issues 73 | 74 | You can ask questions here [issues](https://github.com/zj1024/assembly-css/issues) 75 | 76 | ## Last 77 | 78 | If you are interested in this project, welcome to PR -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # 指南 2 | 3 | ## 介绍 4 | 5 | 通过组合 class 方式快速书写 css 的库. 6 | 7 | 开发 assembly-css 的目的就是为了在写 css 时简化开发的步骤, 传统开发方式将 css 单独拆成文件引入, `Vue`中在 template 文件最下方书写, `React`中可以通过把 css All in js. 上述的方案都是通过 DOM 中定义 class 来连接 css 与 html. 8 | 9 | 我们通过一个例子-`三栏布局`来直观感受 assembly-css 带来的便捷: 10 | 11 | **传统开发方式** 12 | 13 | ```css 14 | .wrapper { 15 | display: flex; 16 | } 17 | .left, 18 | .right { 19 | width: 200px; 20 | background: #19be6b; 21 | } 22 | .center { 23 | flex: 1; 24 | background: #61c3ff; 25 | } 26 | ``` 27 | 28 | ```html 29 |
30 |
left
31 |
content
32 |
right
33 |
34 | ``` 35 | 36 | **渲染结果** 37 | 38 | 39 | 53 |
54 |
left
55 |
content
56 |
right
57 |
58 | 59 | 60 | **使用 assembly-css** 61 | 62 | ```html 63 |
64 |
left
65 |
content
66 |
right
67 |
68 | ``` 69 | 70 | **渲染结果** 71 | 72 | 73 | 74 |
75 |
left
76 |
content
77 |
right
78 |
79 | 80 | 81 | 没错, 在书写过程中直接跳过了连接html和css的环节, 取而代之的是引入我们提前写好的库, 通过class类名之间的组合来生成样式, 而`assembly-css`就是具备了组合类产生样式的能力. 82 | 83 | 在设计assembly-css时, 选取了最常用的19个大类别, `background`, `border`, `box`, `cursor`, `display`, `flex`, `float`, `font-size`, `font-weight`, `line-height`, `link`, `overflow`, `position`, `size`, `text-align`, `text-color`, `vertical-align`, `visibility`, `white-space`, 在[文档](/doc/)中都会详细说明 84 | 85 | ## 安装 86 | 87 | ### CDN 引入 88 | 89 | ```html 90 | 91 | ``` 92 | 93 | 生产环境使用压缩版本 94 | 95 | ```html 96 | 97 | ``` 98 | 99 | ### NPM 引入 100 | 101 | ```Shell 102 | # 最新稳定版 103 | $ npm install assembly-css 104 | ``` 105 | 106 | ```js 107 | import 'assembly-css/lib/index.scss' 108 | ``` 109 | 110 | 111 | ## 目录结构 112 | 113 | ```js 114 | . 115 | ├── dist // 打包输出的文件 116 | │ ├── assembly-css.css 117 | │ └── assembly-css.min.css 118 | ├── lib 119 | │ ├── _reset.scss // 格式化css 120 | │ ├── _style.scss // 全局样式 121 | │ ├── _sundry.scss // 杂项样式 122 | │ ├── _var.scss // 全局scss变量 123 | │ ├── background.scss 124 | │ ├── border.scss 125 | │ ├── box.scss // margin padding 126 | │ ├── cursor.scss // 鼠标样式相关 127 | │ ├── display.scss 128 | │ ├── flex.scss 129 | │ ├── float.scss 130 | │ ├── font-size.scss 131 | │ ├── font-weight.scss 132 | │ ├── index.scss 133 | │ ├── line-height.scss 134 | │ ├── link.scss 135 | │ ├── overflow.scss 136 | │ ├── position.scss 137 | │ ├── size.scss // width height 138 | │ ├── text-align.scss 139 | │ ├── text-color.scss 140 | │ ├── vertical-align.scss 141 | │ ├── visibility.scss 142 | │ └── white-space.scss 143 | ``` 144 | 145 | ## 构建 146 | 147 | 使用scss + gulp构建, 简单快捷, 配置文件在 `/gulpfile.js` 148 | 149 | ## 下一步 150 | 151 | 开始了解assembly-css提供的样式[文档](/doc/) -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/5.df5aca5e.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{151:function(t,s,a){"use strict";a.r(s);a(60);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h3",{attrs:{id:"快速开发三栏布局"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#快速开发三栏布局","aria-hidden":"true"}},[t._v("#")]),t._v(" 快速开发三栏布局")]),t._v(" "),a("p",[a("strong",[t._v("使用 assembly-css")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex j-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("w-200 bg-green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("left"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex-1 bg-blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("content"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("w-200 bg-green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("right"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("渲染结果")])]),t._v(" "),a("ClientOnly",[a("section",{staticClass:"flex j-between"},[a("div",{staticClass:"w-200 bg-green"},[t._v("left")]),t._v(" "),a("div",{staticClass:"flex-1 bg-blue"},[t._v("content")]),t._v(" "),a("div",{staticClass:"w-200 bg-green"},[t._v("right")])])])],1)}),[],!1,null,null,null);s.default=e.exports},22:function(t,s,a){},60:function(t,s,a){"use strict";var n=a(22);a.n(n).a}}]); -------------------------------------------------------------------------------- /lib/_reset.scss: -------------------------------------------------------------------------------- 1 | // reset 初始化浏览器样式 2 | * { 3 | box-sizing: border-box; 4 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 5 | } 6 | 7 | *:before, 8 | *:after { 9 | box-sizing: border-box; 10 | } 11 | 12 | html { 13 | -ms-text-size-adjust: 100%; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | body, 18 | div, 19 | dl, 20 | dt, 21 | dd, 22 | ul, 23 | ol, 24 | li, 25 | h1, 26 | h2, 27 | h3, 28 | h4, 29 | h5, 30 | h6, 31 | form, 32 | fieldset, 33 | legend, 34 | input, 35 | textarea, 36 | p, 37 | blockquote, 38 | th, 39 | td, 40 | hr, 41 | button, 42 | article, 43 | aside, 44 | details, 45 | figcaption, 46 | figure, 47 | footer, 48 | header, 49 | hgroup, 50 | menu, 51 | nav, 52 | section { 53 | margin: 0; 54 | padding: 0; 55 | } 56 | 57 | button, 58 | input, 59 | select, 60 | textarea { 61 | font-family: inherit; 62 | font-size: inherit; 63 | line-height: inherit; 64 | } 65 | 66 | input::-ms-clear, 67 | input::-ms-reveal { 68 | display: none; 69 | } 70 | 71 | h1 { 72 | font-size: 2em; 73 | margin: 0.67em 0; 74 | } 75 | 76 | article, 77 | aside, 78 | footer, 79 | header, 80 | nav, 81 | section { 82 | display: block; 83 | } 84 | 85 | figcaption, 86 | figure, 87 | main { 88 | display: block; 89 | } 90 | 91 | figure { 92 | margin: 1em 40px; 93 | } 94 | 95 | li:focus { 96 | outline-width: 0; 97 | } 98 | 99 | /** 100 | * 1. Remove the gray background on active links in IE 10. 101 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 102 | */ 103 | 104 | a { 105 | background-color: transparent; 106 | -webkit-text-decoration-skip: objects; 107 | text-decoration: none; 108 | color: inherit; 109 | } 110 | 111 | a:active { 112 | color: inherit; 113 | } 114 | 115 | a:active, 116 | a:hover, 117 | a:focus { 118 | outline-width: 0; 119 | } 120 | 121 | abbr[title] { 122 | border-bottom: none; 123 | text-decoration: underline; 124 | text-decoration: underline dotted; 125 | } 126 | 127 | /** 128 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 129 | */ 130 | 131 | b, 132 | strong { 133 | font-weight: inherit; 134 | } 135 | 136 | /** 137 | * Add the correct font weight in Chrome, Edge, and Safari. 138 | */ 139 | 140 | b, 141 | strong { 142 | font-weight: bolder; 143 | } 144 | 145 | pre, 146 | code, 147 | kbd, 148 | samp { 149 | font-family: monospace, monospace; 150 | font-size: 1em; 151 | } 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | mark { 158 | background-color: #ff0; 159 | color: #000; 160 | } 161 | 162 | small { 163 | font-size: 80%; 164 | } 165 | 166 | sub, 167 | sup { 168 | font-size: 75%; 169 | line-height: 0; 170 | position: relative; 171 | vertical-align: baseline; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | sup { 179 | top: -0.5em; 180 | } 181 | 182 | audio, 183 | video { 184 | display: inline-block; 185 | } 186 | 187 | audio:not([controls]) { 188 | display: none; 189 | height: 0; 190 | } 191 | 192 | img { 193 | border-style: none; 194 | vertical-align: middle; 195 | } 196 | 197 | svg:not(:root) { 198 | overflow: hidden; 199 | } 200 | 201 | button, 202 | input, 203 | optgroup, 204 | select, 205 | textarea { 206 | font-size: 100%; 207 | line-height: 1.15; 208 | margin: 0; 209 | } 210 | 211 | button, 212 | input { 213 | overflow: visible; 214 | } 215 | 216 | button, 217 | select { 218 | text-transform: none; 219 | } 220 | 221 | button, 222 | html [type="button"], 223 | [type="reset"], 224 | [type="submit"] { 225 | -webkit-appearance: button; 226 | } 227 | 228 | button::-moz-focus-inner, 229 | [type="button"]::-moz-focus-inner, 230 | [type="reset"]::-moz-focus-inner, 231 | [type="submit"]::-moz-focus-inner { 232 | border-style: none; 233 | padding: 0; 234 | } 235 | 236 | /** 237 | * Restore the focus styles unset by the previous rule. 238 | */ 239 | 240 | button:-moz-focusring, 241 | [type="button"]:-moz-focusring, 242 | [type="reset"]:-moz-focusring, 243 | [type="submit"]:-moz-focusring { 244 | outline: 1px dotted ButtonText; 245 | } 246 | 247 | /** 248 | * Change the border, margin, and padding in all browsers (opinionated). 249 | */ 250 | 251 | fieldset { 252 | border: 1px solid #c0c0c0; 253 | margin: 0 2px; 254 | padding: 0.35em 0.625em 0.75em; 255 | } 256 | 257 | /** 258 | * 1. Correct the text wrapping in Edge and IE. 259 | * 2. Correct the color inheritance from `fieldset` elements in IE. 260 | * 3. Remove the padding so developers are not caught out when they zero out 261 | * `fieldset` elements in all browsers. 262 | */ 263 | 264 | legend { 265 | box-sizing: border-box; /* 1 */ 266 | color: inherit; /* 2 */ 267 | display: table; /* 1 */ 268 | max-width: 100%; /* 1 */ 269 | padding: 0; /* 3 */ 270 | white-space: normal; /* 1 */ 271 | } 272 | 273 | /** 274 | * 1. Add the correct display in IE 9-. 275 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 276 | */ 277 | 278 | progress { 279 | display: inline-block; /* 1 */ 280 | vertical-align: baseline; /* 2 */ 281 | } 282 | 283 | /** 284 | * Remove the default vertical scrollbar in IE. 285 | */ 286 | 287 | textarea { 288 | overflow: auto; 289 | resize: vertical; 290 | } 291 | 292 | /** 293 | * 1. Add the correct box sizing in IE 10-. 294 | * 2. Remove the padding in IE 10-. 295 | */ 296 | 297 | [type="checkbox"], 298 | [type="radio"] { 299 | box-sizing: border-box; /* 1 */ 300 | padding: 0; /* 2 */ 301 | } 302 | 303 | /** 304 | * Correct the cursor style of increment and decrement buttons in Chrome. 305 | */ 306 | 307 | [type="number"]::-webkit-inner-spin-button, 308 | [type="number"]::-webkit-outer-spin-button { 309 | height: auto; 310 | } 311 | 312 | /** 313 | * 1. Correct the odd appearance in Chrome and Safari. 314 | * 2. Correct the outline style in Safari. 315 | */ 316 | 317 | [type="search"] { 318 | -webkit-appearance: textfield; /* 1 */ 319 | outline-offset: -2px; /* 2 */ 320 | } 321 | 322 | /** 323 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 324 | */ 325 | 326 | [type="search"]::-webkit-search-cancel-button, 327 | [type="search"]::-webkit-search-decoration { 328 | -webkit-appearance: none; 329 | } 330 | 331 | /** 332 | * 1. Correct the inability to style clickable types in iOS and Safari. 333 | * 2. Change font properties to `inherit` in Safari. 334 | */ 335 | 336 | ::-webkit-file-upload-button { 337 | -webkit-appearance: button; /* 1 */ 338 | font: inherit; /* 2 */ 339 | } 340 | 341 | /* 342 | * Add the correct display in IE 9-. 343 | * 1. Add the correct display in Edge, IE, and Firefox. 344 | */ 345 | 346 | details, /* 1 */ 347 | menu { 348 | display: block; 349 | } 350 | 351 | /* 352 | * Add the correct display in all browsers. 353 | */ 354 | 355 | summary { 356 | display: list-item; 357 | } 358 | 359 | /** 360 | * Add the correct display in IE 9-. 361 | */ 362 | 363 | canvas { 364 | display: inline-block; 365 | } 366 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AssemblyCss 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
AssemblyCss
hero

AssemblyCss

19 | 通过组合class方式快速书写css的库 20 |

快速上手 ➡

方便快捷

通过npm安装或直接引入css文件, 随时可用, 在大型项目中表现尤为出色

简单构建

通过 gulp + scss 的构建，快捷构建出打包后的css文件, 一处引入, 全局使用。

易于维护

在团队开发过程中, 修改样式只需要更改DOM上的类即可, 避免了DOM逐级嵌套样式的混乱

快速开发三栏布局

使用 assembly-css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
21 | <section class="flex j-between">
22 |   <div class="w-200 bg-green">left</div>
23 |   <div class="flex-1 bg-blue">content</div>
24 |   <div class="w-200 bg-green">right</div>
25 | </section>
26 |

渲染结果

27 | MIT Licensed | Copyright © 2019-present 京宇jingyu 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/8.e1cd00af.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{149:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"更新日志"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#更新日志","aria-hidden":"true"}},[t._v("#")]),t._v(" 更新日志")]),t._v(" "),a("h2",{attrs:{id:"v1-1-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#v1-1-0","aria-hidden":"true"}},[t._v("#")]),t._v(" V1.1.0")]),t._v(" "),a("ul",[a("li",[t._v("增加对flex样式的扩充")]),t._v(" "),a("li",[t._v("增加vw, wh 单位的支持")]),t._v(" "),a("li",[t._v("增加flexible字体大小的支持")])]),t._v(" "),a("h3",{attrs:{id:"增加对flex样式的扩充"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#增加对flex样式的扩充","aria-hidden":"true"}},[t._v("#")]),t._v(" 增加对flex样式的扩充")]),t._v(" "),a("ol",[a("li",[t._v("增加了flex-grow的支持")])]),t._v(" "),a("p",[t._v("范围值为"),a("code",[t._v("0 - 3")])]),t._v(" "),a("p",[t._v("例:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".flex-g-1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-grow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("ol",{attrs:{start:"2"}},[a("li",[t._v("增加了align-content的支持")])]),t._v(" "),a("p",[t._v("范围值 "),a("code",[t._v("flex-start, flex-end, center, space-between, space-around, stretch")])]),t._v(" "),a("p",[t._v("例:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".a-c-start")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("ol",{attrs:{start:"3"}},[a("li",[t._v("增加了align-self的支持")])]),t._v(" "),a("p",[t._v("范围值 "),a("code",[t._v("auto, flex-start, flex-end, center, baseline, stretch")])]),t._v(" "),a("p",[t._v("例:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".a-s-start")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"增加vw-wh-单位的支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#增加vw-wh-单位的支持","aria-hidden":"true"}},[t._v("#")]),t._v(" 增加vw, wh 单位的支持")]),t._v(" "),a("ol",[a("li",[t._v("margin, padding 可以使用vw, wh 单位")])]),t._v(" "),a("p",[t._v("范围值 "),a("code",[t._v("1-10")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".m-l-10vh")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".m-l-10vw")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".p-l-10vh")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".p-l-10vw")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-left")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("ol",{attrs:{start:"2"}},[a("li",[t._v("width, height 可以使用vw, wh单位")])]),t._v(" "),a("p",[t._v("范围值 "),a("code",[t._v("1-100")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".w-10vw")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".w-10vh")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".h-10vw")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vw"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".h-10vh")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10vh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"增加flexible字体大小的支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#增加flexible字体大小的支持","aria-hidden":"true"}},[t._v("#")]),t._v(" 增加flexible字体大小的支持")]),t._v(" "),a("p",[t._v("配合"),a("a",{attrs:{href:"https://github.com/amfe/lib-flexible",target:"_blank",rel:"noopener noreferrer"}},[t._v("flexible.js"),a("OutboundLink")],1),t._v(" 在375宽度视口下定义rem像素大小")]),t._v(" "),a("p",[t._v("范围值 "),a("code",[t._v("12 - 80")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fs-rem-16px")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.4266666667rem"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/blog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 更新日志 | AssemblyCss 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
AssemblyCss

更新日志

V1.1.0

  • 增加对flex样式的扩充
  • 增加vw, wh 单位的支持
  • 增加flexible字体大小的支持

增加对flex样式的扩充

  1. 增加了flex-grow的支持

范围值为0 - 3

例:

.flex-g-1 {
19 |   flex-grow: 1
20 | }
21 |
  1. 增加了align-content的支持

范围值 flex-start, flex-end, center, space-between, space-around, stretch

例:

.a-c-start {
22 |   align-content: flex-start;
23 | }
24 |
  1. 增加了align-self的支持

范围值 auto, flex-start, flex-end, center, baseline, stretch

例:

.a-s-start {
25 |   align-self: flex-start;
26 | }
27 |

增加vw, wh 单位的支持

  1. margin, padding 可以使用vw, wh 单位

范围值 1-10

.m-l-10vh {
28 |   margin-left: 10vh;
29 | }
30 | .m-l-10vw {
31 |   margin-left: 10vw;
32 | }
33 | .p-l-10vh {
34 |   padding-left: 10vh;
35 | }
36 | .p-l-10vw {
37 |   padding-left: 10vw;
38 | }
39 |
  1. width, height 可以使用vw, wh单位

范围值 1-100

.w-10vw {
40 |   width: 10vw;
41 | }
42 | .w-10vh {
43 |   width: 10vh;
44 | }
45 | .h-10vw {
46 |   height: 10vw;
47 | }
48 | .h-10vh {
49 |   height: 10vh;
50 | }
51 |

增加flexible字体大小的支持

配合flexible.js 在375宽度视口下定义rem像素大小

范围值 12 - 80

.fs-rem-16px {
52 |   font-size: 0.4266666667rem;
53 | }
54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/images/logo.svg: -------------------------------------------------------------------------------- 1 | www.logoaa.com -------------------------------------------------------------------------------- /docs/.vuepress/public/images/logo.svg: -------------------------------------------------------------------------------- 1 | www.logoaa.com -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 指南 | AssemblyCss 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
AssemblyCss

指南

介绍

通过组合 class 方式快速书写 css 的库.

开发 assembly-css 的目的就是为了在写 css 时简化开发的步骤, 传统开发方式将 css 单独拆成文件引入, Vue中在 template 文件最下方书写, React中可以通过把 css All in js. 上述的方案都是通过 DOM 中定义 class 来连接 css 与 html.

我们通过一个例子-三栏布局来直观感受 assembly-css 带来的便捷:

传统开发方式

.wrapper {
19 |   display: flex;
20 | }
21 | .left,
22 | .right {
23 |   width: 200px;
24 |   background: #19be6b;
25 | }
26 | .center {
27 |   flex: 1;
28 |   background: #61c3ff;
29 | }
30 | 
<section class="wrapper">
31 |   <div class="left">left</div>
32 |   <div class="center">content</div>
33 |   <div class="right">right</div>
34 | </section>
35 |

渲染结果

使用 assembly-css

<section class="flex j-between">
36 |   <div class="w-200 bg-green">left</div>
37 |   <div class="flex-1 bg-blue">content</div>
38 |   <div class="w-200 bg-green">right</div>
39 | </section>
40 |

渲染结果

没错, 在书写过程中直接跳过了连接html和css的环节, 取而代之的是引入我们提前写好的库, 通过class类名之间的组合来生成样式, 而assembly-css就是具备了组合类产生样式的能力.

在设计assembly-css时, 选取了最常用的19个大类别, background, border, box, cursor, display, flex, float, font-size, font-weight, line-height, link, overflow, position, size, text-align, text-color, vertical-align, visibility, white-space, 在文档中都会详细说明

安装

CDN 引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
41 |

生产环境使用压缩版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.min.css">
42 |

NPM 引入

# 最新稳定版
43 | $ npm install assembly-css
44 | 
import 'assembly-css/lib/index.scss'
45 |

目录结构

.
46 | ├── dist // 打包输出的文件
47 | │   ├── assembly-css.css
48 | │   └── assembly-css.min.css
49 | ├── lib
50 | │   ├── _reset.scss // 格式化css
51 | │   ├── _style.scss // 全局样式
52 | │   ├── _sundry.scss // 杂项样式
53 | │   ├── _var.scss // 全局scss变量
54 | │   ├── background.scss
55 | │   ├── border.scss
56 | │   ├── box.scss // margin padding
57 | │   ├── cursor.scss // 鼠标样式相关
58 | │   ├── display.scss
59 | │   ├── flex.scss
60 | │   ├── float.scss
61 | │   ├── font-size.scss
62 | │   ├── font-weight.scss
63 | │   ├── index.scss
64 | │   ├── line-height.scss
65 | │   ├── link.scss
66 | │   ├── overflow.scss
67 | │   ├── position.scss
68 | │   ├── size.scss // width height
69 | │   ├── text-align.scss
70 | │   ├── text-color.scss
71 | │   ├── vertical-align.scss
72 | │   ├── visibility.scss
73 | │   └── white-space.scss
74 |

构建

使用scss + gulp构建, 简单快捷, 配置文件在 /gulpfile.js

下一步

开始了解assembly-css提供的样式文档

75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/3.793e2ba5.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{144:function(t,s,a){"use strict";var n=a(58);a.n(n).a},145:function(t,s,a){"use strict";var n=a(59);a.n(n).a},150:function(t,s,a){"use strict";a.r(s);a(144),a(145);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"指南"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#指南","aria-hidden":"true"}},[t._v("#")]),t._v(" 指南")]),t._v(" "),a("h2",{attrs:{id:"介绍"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#介绍","aria-hidden":"true"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),a("p",[t._v("通过组合 class 方式快速书写 css 的库.")]),t._v(" "),a("p",[t._v("开发 assembly-css 的目的就是为了在写 css 时简化开发的步骤, 传统开发方式将 css 单独拆成文件引入, "),a("code",[t._v("Vue")]),t._v("中在 template 文件最下方书写, "),a("code",[t._v("React")]),t._v("中可以通过把 css All in js. 上述的方案都是通过 DOM 中定义 class 来连接 css 与 html.")]),t._v(" "),a("p",[t._v("我们通过一个例子-"),a("code",[t._v("三栏布局")]),t._v("来直观感受 assembly-css 带来的便捷:")]),t._v(" "),a("p",[a("strong",[t._v("传统开发方式")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".wrapper")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".left,\n.right")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #19be6b"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".center")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #61c3ff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("left"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("left"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("content"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("right"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("渲染结果")])]),t._v(" "),a("ClientOnly",[a("section",{staticClass:"wrapper"},[a("div",{staticClass:"left"},[t._v("left")]),t._v(" "),a("div",{staticClass:"center"},[t._v("content")]),t._v(" "),a("div",{staticClass:"right"},[t._v("right")])])]),t._v(" "),a("p",[a("strong",[t._v("使用 assembly-css")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex j-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("w-200 bg-green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("left"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex-1 bg-blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("content"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("w-200 bg-green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("right"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("渲染结果")])]),t._v(" "),a("ClientOnly",[a("section",{staticClass:"flex j-between"},[a("div",{staticClass:"w-200 bg-green"},[t._v("left")]),t._v(" "),a("div",{staticClass:"flex-1 bg-blue"},[t._v("content")]),t._v(" "),a("div",{staticClass:"w-200 bg-green"},[t._v("right")])])]),t._v(" "),a("p",[t._v("没错, 在书写过程中直接跳过了连接html和css的环节, 取而代之的是引入我们提前写好的库, 通过class类名之间的组合来生成样式, 而"),a("code",[t._v("assembly-css")]),t._v("就是具备了组合类产生样式的能力.")]),t._v(" "),a("p",[t._v("在设计assembly-css时, 选取了最常用的19个大类别, "),a("code",[t._v("background")]),t._v(", "),a("code",[t._v("border")]),t._v(", "),a("code",[t._v("box")]),t._v(", "),a("code",[t._v("cursor")]),t._v(", "),a("code",[t._v("display")]),t._v(", "),a("code",[t._v("flex")]),t._v(", "),a("code",[t._v("float")]),t._v(", "),a("code",[t._v("font-size")]),t._v(", "),a("code",[t._v("font-weight")]),t._v(", "),a("code",[t._v("line-height")]),t._v(", "),a("code",[t._v("link")]),t._v(", "),a("code",[t._v("overflow")]),t._v(", "),a("code",[t._v("position")]),t._v(", "),a("code",[t._v("size")]),t._v(", "),a("code",[t._v("text-align")]),t._v(", "),a("code",[t._v("text-color")]),t._v(", "),a("code",[t._v("vertical-align")]),t._v(", "),a("code",[t._v("visibility")]),t._v(", "),a("code",[t._v("white-space")]),t._v(", 在"),a("router-link",{attrs:{to:"/doc/"}},[t._v("文档")]),t._v("中都会详细说明")],1),t._v(" "),a("h2",{attrs:{id:"安装"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#安装","aria-hidden":"true"}},[t._v("#")]),t._v(" 安装")]),t._v(" "),a("h3",{attrs:{id:"cdn-引入"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn-引入","aria-hidden":"true"}},[t._v("#")]),t._v(" CDN 引入")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("生产环境使用压缩版本")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.min.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"npm-引入"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm-引入","aria-hidden":"true"}},[t._v("#")]),t._v(" NPM 引入")]),t._v(" "),a("div",{staticClass:"language-Shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("# 最新稳定版\n$ npm install assembly-css\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'assembly-css/lib/index.scss'")]),t._v("\n")])])]),a("h2",{attrs:{id:"目录结构"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#目录结构","aria-hidden":"true"}},[t._v("#")]),t._v(" 目录结构")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n├── dist "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打包输出的文件")]),t._v("\n│ ├── assembly"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("css\n│ └── assembly"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("css\n├── lib\n│ ├── _reset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 格式化css")]),t._v("\n│ ├── _style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全局样式")]),t._v("\n│ ├── _sundry"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 杂项样式")]),t._v("\n│ ├── _var"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全局scss变量")]),t._v("\n│ ├── background"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── border"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── box"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// margin padding")]),t._v("\n│ ├── cursor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 鼠标样式相关")]),t._v("\n│ ├── display"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── flex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── float"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── font"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── font"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("weight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── line"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── link"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── overflow"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// width height")]),t._v("\n│ ├── text"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("align"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── text"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── vertical"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("align"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ ├── visibility"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n│ └── white"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("space"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scss\n")])])]),a("h2",{attrs:{id:"构建"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#构建","aria-hidden":"true"}},[t._v("#")]),t._v(" 构建")]),t._v(" "),a("p",[t._v("使用scss + gulp构建, 简单快捷, 配置文件在 "),a("code",[t._v("/gulpfile.js")])]),t._v(" "),a("h2",{attrs:{id:"下一步"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#下一步","aria-hidden":"true"}},[t._v("#")]),t._v(" 下一步")]),t._v(" "),a("p",[t._v("开始了解assembly-css提供的样式"),a("router-link",{attrs:{to:"/doc/"}},[t._v("文档")])],1)],1)}),[],!1,null,null,null);s.default=e.exports},58:function(t,s,a){},59:function(t,s,a){}}]); -------------------------------------------------------------------------------- /docs/doc/README.md: -------------------------------------------------------------------------------- 1 | # 文档 2 | 3 | > ⚠️文档的源码部分除了当前展示用的css类外, 额外增加的没有提及的css类纯粹是为了展示好看。 4 | 5 | > 由于设计规则简单, 建议粗读之后接入自己的项目中体验, 或直接阅读源码 6 | 7 | 8 | 9 | ## background 10 | 11 | 12 | **设置背景颜色** 13 | 14 | `.bg-` 15 | - 参数: white / black / grey / green / blue / yellow / red 16 | 17 |
18 |
.bg-white
19 |
.bg-black
20 |
.bg-grey
21 |
.bg-green
22 |
.bg-blue
23 |
.bg-yellow
24 |
.bg-red
25 |
26 | 27 | ```html 28 |
29 |
.bg-white
30 |
.bg-black
31 |
.bg-grey
32 |
.bg-green
33 |
.bg-blue
34 |
.bg-yellow
35 |
.bg-red
36 |
37 | ``` 38 | 39 | ## border 40 | 41 | **设置边框** 42 | 43 | `.border` 44 | 45 |
边框
46 | 47 | ```html 48 |
边框
49 | ``` 50 | 51 | --- 52 | 53 | `.b-v[-dotted / -dashed]` 54 | 55 |
56 |
.b-v 上下边框
57 |
.b-v-dotted 上下边框dotted
58 |
.b-v-dashed 上下边框dashed
59 |
60 | 61 | ```html 62 |
63 |
.b-v 上下边框
64 |
.b-v-dotted 上下边框dotted
65 |
.b-v-dashed 上下边框dashed
66 |
67 | ``` 68 | 69 | --- 70 | 71 | `.b-h[-dotted / -dashed]` 72 | 73 |
74 |
.b-h 左右边框
75 |
.b-h-dotted 左右边框dotted
76 |
.b-h-dashed 左右边框dashed
77 |
78 | 79 | ```html 80 |
81 |
.b-h 左右边框
82 |
.b-h-dotted 左右边框dotted
83 |
.b-h-dashed 左右边框dashed
84 |
85 | ``` 86 | 87 | --- 88 | 89 | `.b-double` 90 | 91 |
两条线边框
92 | 93 | ```html 94 |
两条线边框
95 | ``` 96 | 97 | --- 98 | 99 | `.b-w-thin` 100 | 101 |
半像素边框
102 | 103 | ```html 104 |
半像素边框
105 | ``` 106 | 107 | --- 108 | 109 | `.b-round` 110 | 111 |
圆形
112 | 113 | ```html 114 |
圆形
115 | ``` 116 | 117 | --- 118 | 119 | `.b-none` 120 | 121 |
清除边框
122 | 123 | ```html 124 |
清除边框
125 | ``` 126 | 127 | --- 128 | 129 | `.b-` 130 | - 参数 l[-dotted / dashed] / r[-dotted / dashed] / t[-dotted / dashed] / b[-dotted / dashed] 131 | 132 |
133 |
.b-l 左边框
134 |
.b-r 右边框
135 |
.b-t 上边框
136 |
.b-b 下边框
137 |
138 | 139 |
140 |
.b-l-dotted 左边框
141 |
.b-r-dotted 右边框
142 |
.b-t-dotted 上边框
143 |
.b-b-dotted 下边框
144 |
145 | 146 |
147 |
.b-l-dashed 左边框
148 |
.b-r-dashed 右边框
149 |
.b-t-dashed 上边框
150 |
.b-b-dashed 下边框
151 |
152 | 153 | ```html 154 |
155 |
.b-l 左边框
156 |
.b-r 右边框
157 |
.b-t 上边框
158 |
.b-b 下边框
159 |
160 | 161 |
162 |
.b-l-dotted 左边框
163 |
.b-r-dotted 右边框
164 |
.b-t-dotted 上边框
165 |
.b-b-dotted 下边框
166 |
167 | 168 |
169 |
.b-l-dashed 左边框
170 |
.b-r-dashed 右边框
171 |
.b-t-dashed 上边框
172 |
.b-b-dashed 下边框
173 |
174 | ``` 175 | 176 | --- 177 | 178 | `.border-` 179 | - 参数 dotted / dashed 180 | 181 |
182 |
.border-dotted
183 |
.border-dashed
184 |
185 | 186 | ```html 187 |
188 |
.border-dotted
189 |
.border-dashed
190 |
191 | ``` 192 | 193 | --- 194 | 195 | `.b-` 196 | - 参数 从0到20的值, 包括0和20 197 | 198 |
199 |
.b-10
200 |
.b-20
201 |
202 | 203 | ```html 204 |
205 |
.b-10
206 |
.b-20
207 |
208 | ``` 209 | 210 | --- 211 | 212 | `.b-radius-` 或者 `.b-r-` 213 | - 参数 从0到20的值, 包括0和20 214 | 215 |
216 |
.b-r-10
217 |
.b-radius-20
218 |
219 | 220 | ```html 221 |
222 |
.b-r-10
223 |
.b-radius-20
224 |
225 | ``` 226 | 227 | 228 | ## box 229 | 230 | `.m-auto` 居中显示 231 | 232 |
123
233 | 234 | ```html 235 |
123
236 | ``` 237 | 238 | `.m-` 居左显示 239 | 240 | - 参数 -20 / -15 / -12 / -10 / -8 / -6 / -5 / -4 / -3 / -2 / -1, 241 | 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 242 | 243 |
244 | .m-l-0 245 | .m-l-10 246 |
247 | 248 | ```html 249 |
250 | .m-l-0 251 | .m-l-10 252 |
253 | ``` 254 | 255 | --- 256 | 257 | `.p-` 或者 `.padding-` 258 | 259 | - 参数 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 260 | 261 |
262 | .m-l-0 263 | .m-l-10 264 | .m-l-10 265 |
266 | 267 | ```html 268 |
269 | .m-l-0 270 | .m-l-10 271 | .m-l-10 272 |
273 | ``` 274 | 275 | --- 276 | 277 | `.m-h-` / `.m-v-` 横向 / 纵向margin间距 278 | 279 | - 参数 -20 / -15 / -12 / -10 / -8 / -6 / -5 / -4 / -3 / -2 / -1, 280 | 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 281 | 282 |
283 |
.m-v-0 .m-h-0
284 |
.m-v-10 .m-h-10
285 |
.m-v-20 .m-h-20
286 |
287 | 288 | ```html 289 |
290 |
.m-v-0 .m-h-0
291 |
.m-v-10 .m-h-10
292 |
.m-v-20 .m-h-20
293 |
294 | ``` 295 | 296 | --- 297 | 298 | `.p-h-` / `.p-v-` 横向 / 纵向padding间距 299 | 300 | - 参数 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 301 | 302 |
303 |
.p-h-0 .p-v-0
304 |
.p-h-10 .p-v-10
305 |
.p-h-20 .p-v-20
306 |
307 | 308 | ```html 309 |
310 |
.p-h-0 .p-v-0
311 |
.p-h-10 .p-v-10
312 |
.p-h-20 .p-v-20
313 |
314 | ``` 315 | 316 | --- 317 | 318 | `.m-[direction]-[size]` / `.p-[direction]-[size]` 319 | 320 | > 注意 `.p-[direction]-[size]`中的参数从0开始, padding没有负值 321 | 322 | - 参数 direction: t / r / b / l (分别对应 top / right / bottom / left) 323 | - 参数 size: -20 / -15 / -12 / -10 / -8 / -6 / -5 / -4 / -3 / -2 / -1, 324 | 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 325 | 326 |
327 |
.m-l-0 .p-l-0
328 |
.m-l-10 .p-l-10
329 |
.m-l-20 .p-l-20
330 |
331 | 332 | ```html 333 |
334 |
.m-l-0 .p-l-0
335 |
.m-l-10 .p-l-10
336 |
.m-l-20 .p-l-20
337 |
338 | ``` 339 | 340 | --- 341 | 342 | `.m-[direction]-[size]` 或 `.l-[direction]-[size]` 343 | 344 | - 参数 direction: t / r / b / l (分别对应 top / right / bottom / left) 345 | 346 | - 参数 size: 从0到10的值, 包括0和10 347 | 348 |
349 |
.p-l-2vw .p-t-2vw
350 |
.p-l-2vh .p-t-2vh
351 |
.m-l-2vw .m-t-2vw
352 |
.m-l-2vh .m-t-2vh
353 |
354 | 355 | ```html 356 |
357 |
.p-l-2vw .p-t-2vw
358 |
.p-l-2vh .p-t-2vh
359 |
.m-l-2vw .m-t-2vw
360 |
.m-l-2vh .m-t-2vh
361 |
362 | ``` 363 | 364 | 365 | ## cursor 366 | 367 | `.cursor-` 368 | 369 | - 参数 default / auto / crosshair / pointer / move / text / wait / help 370 | 371 |
372 |
default
373 |
auto
374 |
crosshair
375 |
pointer
376 |
move
377 |
text
378 |
wait
379 |
help
380 |
381 | 382 | ```html 383 |
384 |
default
385 |
auto
386 |
crosshair
387 |
pointer
388 |
move
389 |
text
390 |
wait
391 |
help
392 |
393 | ``` 394 | 395 | ## display 396 | 397 | `.d-` 398 | 399 | - 参数 inherit / none / inline / inline-block / block / table / inline-table / table-cell 400 | 401 | ```html 402 |
403 |
404 |
405 |
406 | ``` 407 | 408 | ## flex 409 | 410 | `.flex` 411 | 412 | ```html 413 |
414 | ``` 415 | 416 | `.j-` justify-content设置值 417 | 418 | - 参数 start / end / center / between / around 419 | 420 | ```html 421 |
422 | ``` 423 | 424 | `.a-` align-items设置值 425 | 426 | - 参数 start / center / end 427 | 428 | ```html 429 |
430 | ``` 431 | 432 | `.flex-` flex-wrap设置值 433 | 434 | - 参数 nowrap / wrap / wrap-reverse 435 | 436 | ```html 437 |
438 | ``` 439 | 440 | `.flex-` flex设置值 441 | 442 | - 参数 1 / 2 / 3 443 | 444 | ```html 445 |
446 | ``` 447 | 448 | `.flex-s-` flex-shrink设置值 449 | 450 | - 参数 1 / 2 / 3 451 | 452 | ```html 453 |
454 | ``` 455 | 456 | `.flex-g-` flex-grow设置值 457 | 458 | - 参数 1 / 2 / 3 459 | 460 | ```html 461 |
462 | ``` 463 | 464 | `a-c-` align-content设置值 465 | 466 | - 参数 start / end / center / between / around / stretch 467 | 468 | ```html 469 |
470 | ``` 471 | 472 | `a-s-` align-self设置值 473 | 474 | - 参数 start / end / auto / center / baseline / stretch 475 | 476 | ```html 477 |
478 | ``` 479 | 480 | ## float 481 | 482 | `.clearfixed` 清除浮动 483 | 484 | `.pull-` 浮动 485 | 486 | - 参数 left / right 487 | 488 |
489 |
.pull-left
490 |
.pull-right
491 |
492 | 493 | ```html 494 |
495 |
.pull-left
496 |
.pull-right
497 |
498 | ``` 499 | 500 | ## font-size 501 | 502 | `fs-em-` 或者 `fs-rem-` 503 | 504 | - 参数 从0到10 包括0和10 505 | 506 | - 支持浮点数 `0.0`到`5.9`, 从`6-10`只有`.5`的值, 比如6.5, 7.5, 8.5, 9.5, 10.5 507 | 508 |
509 | .fs-em-1 510 | .fs-em-2 511 | .fs-em-3 512 |
513 | 514 |
515 | .fs-rem-1 516 | .fs-rem-2 517 | .fs-rem-3 518 |
519 | 520 | ```html 521 |
522 | .fs-em-1 523 | .fs-em-2 524 | .fs-em-3 525 |
526 | 527 |
528 | .fs-rem-1 529 | .fs-rem-2 530 | .fs-rem-3 531 |
532 | ``` 533 | 534 | `fs-` 535 | 536 | - 参数 从12到80, 包括12和80 537 | 538 |
539 | .fs-12 540 | .fs-14 541 | .fs-16 542 | .fs-18 543 | .fs-22 544 | .fs-80 545 |
546 | 547 | ```html 548 |
549 | .fs-12 550 | .fs-14 551 | .fs-16 552 | .fs-18 553 | .fs-22 554 | .fs-80 555 |
556 | ``` 557 | 558 | `.fs-rem-[size]px` 像素的值是基于375宽度来计算(主流的设计稿宽度) 559 | 560 | - 参数 从12到80 包括12和80 561 | 562 | > 1.1.0 新增 563 | 564 | > ⚠️ 该class类是结合[lib-flexible](https://github.com/amfe/lib-flexible)库来使用, flexible.js会根据视口的大小动态改变根节点的font-size值 565 | 566 | 该节点在375宽会自动计算成12px: 567 | ```html 568 | .fs-rem-12px 569 | ``` 570 | 571 | 572 | ```html 573 |
574 | .fs-rem-12px 575 | .fs-rem-14px 576 | .fs-rem-16px 577 | .fs-rem-18px 578 | .fs-rem-22px 579 | .fs-rem-80px 580 |
581 | ``` 582 | 583 | ## font-weight 584 | 585 | `.bold` 字体加粗 586 | 587 | --- 588 | 589 | `.normal` 字体正常 590 | 591 | --- 592 | 593 | `.lighter` 字体更亮 594 | 595 | --- 596 | 597 | `fw-` 字体宽度, 数值表示 598 | 599 | - 参数 100, 200, 300, 400, 500, 600, 700, 800, 900 600 | 601 |
602 |
.fw-100 数值表示字体的粗度
603 |
.fw-200 数值表示字体的粗度
604 |
.fw-300 数值表示字体的粗度
605 |
.fw-400 数值表示字体的粗度
606 |
.fw-500 数值表示字体的粗度
607 |
.fw-600 数值表示字体的粗度
608 |
.fw-700 数值表示字体的粗度
609 |
.fw-800 数值表示字体的粗度
610 |
.fw-900 数值表示字体的粗度
611 |
612 | 613 | ```html 614 |
615 |
.fw-100 数值表示字体的粗度
616 |
.fw-200 数值表示字体的粗度
617 |
.fw-300 数值表示字体的粗度
618 |
.fw-400 数值表示字体的粗度
619 |
.fw-500 数值表示字体的粗度
620 |
.fw-600 数值表示字体的粗度
621 |
.fw-700 数值表示字体的粗度
622 |
.fw-800 数值表示字体的粗度
623 |
.fw-900 数值表示字体的粗度
624 |
625 | ``` 626 | 627 | ## line-height 628 | 629 | `.l-h-` 630 | 631 | > 单位为em 632 | 633 | - 参数 从0到20的值, 包括0和20 634 | 635 | - 支持浮点数 从`0.0` 到 `5.9` 另外有 `6.5`, `7.5`, `8.5` 636 | 637 |
638 |
.l-h-1
639 |
.l-h-2
640 |
641 | 642 |
643 |
.l-h-1_2
644 |
.l-h-2_5
645 |
.l-h-5_9
646 |
.l-h-6_5
647 |
.l-h-7_5
648 |
.l-h-8_5
649 |
650 | 651 | ```html 652 |
653 |
.l-h-1
654 |
.l-h-2
655 |
656 | 657 |
658 |
.l-h-1_2
659 |
.l-h-2_5
660 |
.l-h-5_9
661 |
.l-h-6_5
662 |
.l-h-7_5
663 |
.l-h-8_5
664 |
665 | ``` 666 | 667 | `.lh-` 668 | 669 | > 单位为px 670 | 671 | - 参数 从0到100的值, 包括0和100 672 | 673 |
674 |
.lh-10
675 |
.lh-20
676 |
.lh-50
677 |
678 | 679 | ```html 680 |
681 |
.lh-10
682 |
.lh-20
683 |
.lh-50
684 |
685 | ``` 686 | 687 | ## link 688 | 689 | `.link-` 690 | 691 | - 参数 white / black / grey / green / blue / yellow / red / title / content / disabled 692 | 693 |
.link-white
694 |
.link-black
695 |
.link-grey
696 |
.link-green
697 |
.link-blue
698 |
.link-yellow
699 |
.link-title
700 |
.link-content
701 |
.link-disabled
702 | 703 | ```html 704 |
.link-white
705 |
.link-black
706 |
.link-grey
707 |
.link-green
708 |
.link-blue
709 |
.link-yellow
710 |
.link-title
711 |
.link-content
712 |
.link-disabled
713 | ``` 714 | 715 | ## overflow 716 | 717 | `.o-` 和 `.o-x-` 和 `.o-y-` 718 | 719 | - 参数 visible / hidden / scroll / auto / inherit 720 | 721 | ```html 722 |
o-visible
723 |
.o-hidden
724 |
.o-y-scroll
725 | ``` 726 | 727 | `scroll-touch` 在移动IOS设备上平滑滚动 728 | 729 | ```html 730 |
.scroll-touch
731 | ``` 732 | 733 | ## position 734 | 735 | `.static / .relative / .absolute / .fixed / .sticky` 736 | 737 |
738 |
739 | 742 |

placeholder

743 |

placeholder

744 |

placeholder

745 |
746 |
747 | 748 | ```html 749 |
750 |
751 | 754 |

placeholder

755 |

placeholder

756 |

placeholder

757 |
758 |
759 | ``` 760 | 761 |
762 |
763 | absolute 764 |
765 |
766 | 767 | ```html 768 |
769 |
770 | absolute 771 |
772 |
773 | ``` 774 | 775 | `z-index-` 776 | 777 | - 参数 -20 / -15 / -12 / -10 / -8 / -6 / -5 / -4 / -3 / -2 / -1, 778 | 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 12 / 15 / 20 / 25 / 30 / 35 / 40 / 50 / 60 / 80 / 100 779 | 780 | ```html 781 |
782 | ``` 783 | 784 | ## size 785 | 786 | `.w-full` 787 | 788 |
.w-full
789 | 790 | ```html 791 |
.w-full
792 | ``` 793 | 794 | `.h-full` 795 | 796 |
797 |
.h-full
798 |
799 | 800 | ```html 801 |
802 |
.h-full
803 |
804 | ``` 805 | 806 | `.w-p-` 807 | 808 | - 参数 从0到99的值, 包括0和99 809 | 810 |
811 |
.w-p-10
812 |
.w-p-20
813 |
.w-p-30
814 |
.w-p-40
815 |
.w-p-99
816 |
817 | 818 | ```html 819 |
820 |
.w-p-10
821 |
.w-p-20
822 |
.w-p-30
823 |
.w-p-40
824 |
.w-p-99
825 |
826 | ``` 827 | 828 | `.h-p-` 829 | 830 | - 参数 参数 从0到99的值, 包括0和99 831 | 832 |
833 |
.h-p-20
834 |
.h-p-30
835 |
.h-p-40
836 |
.h-p-50
837 |
.h-p-60
838 |
.h-p-70
839 |
.h-p-80
840 |
.h-p-90
841 |
842 | 843 | ```html 844 |
845 |
.h-p-20
846 |
.h-p-30
847 |
.h-p-40
848 |
.h-p-50
849 |
.h-p-60
850 |
.h-p-70
851 |
.h-p-80
852 |
.h-p-90
853 |
854 | ``` 855 | 856 | `.h-` 和 `.w-` 857 | 858 | - 参数 0 到 30, 包括0和30; 40 / 50 / 60 / 70 / 80 / 90 / 100, 859 | 120 / 150 / 200 / 250 / 300 / 400 / 500 / 600 / 800 / 1000 / 1200 860 | 861 |
862 | .w-1: 863 |
864 |
865 |
866 | .w-11: 867 |
868 |
869 |
.w-100
870 |
.w-120
871 |
.w-150
872 |
.w-200
873 |
.w-250
874 |
.w-300
875 |
.w-500
876 | 877 | ```html 878 |
879 | .w-1: 880 |
881 |
882 |
883 | .w-11: 884 |
885 |
886 |
.w-100
887 |
.w-120
888 |
.w-150
889 |
.w-200
890 |
.w-250
891 |
.w-300
892 |
.w-500
893 | ``` 894 | 895 | `max-w-` 和 `max-h` 和 `min-w` 和 `min-h` 896 | 897 | - 参数 40 / 50 / 60 / 70 / 80 / 90 / 100, 898 | 120 / 150 / 200 / 250 / 300 / 400 / 500 / 600 / 800 / 1000 / 1200 899 | 900 | ```html 901 |
902 |
903 |
904 |
905 | ``` 906 | 907 | `w-[size]vw` 和 `w-[size]vh` 和 `h-[size]vw` 和 `h-[size]vh` 908 | 909 |
w-10vw
910 |
w-10vh
911 |
h-10vw
912 |
h-10vh
913 | 914 | ```html 915 |
w-10vw
916 |
w-10vh
917 |
h-10vw
918 |
h-10vh
919 | ``` 920 | 921 | ## text-align 922 | 923 | `.text-` 924 | 925 | - 参数 left / right / center / justify 926 | 927 |
928 |

.text-left

929 |

.text-right

930 |

.text-center

931 |

.text-justify

932 |
933 | 934 | ## text-color 935 | 936 | `.text-` 937 | 938 | - 参数 white / black / grey / green / blue / yellow / red / title / content / disabled 939 | 940 |
941 |
.text-white
942 |
.text-black
943 |
.text-grey
944 |
.text-green
945 |
.text-blue
946 |
.text-yellow
947 |
.text-red
948 |
.text-title
949 |
.text-content
950 |
.text-disabled
951 |
952 | 953 | ```html 954 |
955 |
.text-white
956 |
.text-black
957 |
.text-grey
958 |
.text-green
959 |
.text-blue
960 |
.text-yellow
961 |
.text-red
962 |
.text-title
963 |
.text-content
964 |
.text-disabled
965 |
966 | ``` 967 | 968 | ## vertical-align 969 | 970 | `.v-a-` 971 | 972 | - 参数 baseline / sub / super / top / text-top / middle / bottom / text-bottom / inherit 973 | 974 |
975 |
976 | .v-a-baseline 977 |
978 |
979 | .v-a-sub 980 |
981 |
982 | .v-a-super 983 |
984 |
985 | .v-a-top 986 |
987 |
988 | .v-a-text-top 989 |
990 |
991 | .v-a-middle 992 |
993 |
994 | .v-a-bottom 995 |
996 |
997 | .v-a-text-bottom 998 |
999 |
1000 | 1001 | ```html 1002 |
1003 |
1004 | .v-a-baseline 1005 |
1006 |
1007 | .v-a-sub 1008 |
1009 |
1010 | .v-a-super 1011 |
1012 |
1013 | .v-a-top 1014 |
1015 |
1016 | .v-a-text-top 1017 |
1018 |
1019 | .v-a-middle 1020 |
1021 |
1022 | .v-a-bottom 1023 |
1024 |
1025 | .v-a-text-bottom 1026 |
1027 |
1028 | ``` 1029 | 1030 | ## visbility 1031 | 1032 | `.visible` 1033 | 1034 |
.visible
1035 | 1036 | 1037 | ```html 1038 |
.visible
1039 | 1040 | ``` 1041 | 1042 | 1043 | ## white-space 1044 | 1045 | `.text-` 1046 | 1047 | - 参数 normal / nowrap / pre / pre-wrap / pre-line 1048 | 1049 |
1050 |
1051 | .text-nowrap this is test 1052 |
1053 |
1054 | .text-normal this is test 1055 |
1056 |
1057 | .text-pre 1058 | this is test 1059 |
1060 |
1061 | .text-pre-wrap 1062 | this is test 1063 |
1064 |
1065 | .text-pre-line 1066 | this is test 1067 |
1068 |
1069 | 1070 | ```html 1071 |
1072 |
1073 | .text-nowrap this is test 1074 |
1075 |
1076 | .text-normal this is test 1077 |
1078 |
1079 | .text-pre 1080 | this is test 1081 |
1082 |
1083 | .text-pre-wrap 1084 | this is test 1085 |
1086 |
1087 | .text-pre-line 1088 | this is test 1089 |
1090 |
1091 | ``` 1092 | 1093 | ## 杂项 1094 | 1095 | `.overflow-omit` 单行文本溢出省略 1096 | 1097 | `.overflow-` 多行文本溢出省略 1098 | 1099 | - 参数 1 / 2 / 3 1100 | 1101 |
1行文本溢出省略
1102 |
2行文本溢出省略, 2行文本溢出省略
1103 |
3行文本溢出省略, 3行文本溢出省略, 3行文本溢出省略
1104 | 1105 | ```html 1106 |
1行文本溢出省略
1107 |
2行文本溢出省略, 2行文本溢出省略
1108 |
3行文本溢出省略, 3行文本溢出省略, 3行文本溢出省略
1109 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/2.9ece8d63.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],[,,,,,,,,,,,,function(t,e,n){var r=n(14),i=n(26),o=n(17),a=n(24),s=n(40),u=function(t,e,n){var c,l,f,p,h=t&u.F,d=t&u.G,v=t&u.S,g=t&u.P,m=t&u.B,b=d?r:v?r[e]||(r[e]={}):(r[e]||{}).prototype,x=d?i:i[e]||(i[e]={}),y=x.prototype||(x.prototype={});for(c in d&&(n=e),n)f=((l=!h&&b&&void 0!==b[c])?b:n)[c],p=m&&l?s(f,r):g&&"function"==typeof f?s(Function.call,f):f,b&&a(b,c,f,t&u.U),x[c]!=f&&o(x,c,p),g&&y[c]!=f&&(y[c]=f)};r.core=i,u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e,n){var r=n(36)("wks"),i=n(37),o=n(14).Symbol,a="function"==typeof o;(t.exports=function(t){return r[t]||(r[t]=a&&o[t]||(a?o:i)("Symbol."+t))}).store=r},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return o})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return g}));const r=/#.*$/,i=/\.(md|html)$/,o=/\/$/,a=/^[a-z]+:/i;function s(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return a.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function f(t){if(u(t))return t;const e=t.match(r),n=e?e[0]:"",i=s(t);return o.test(i)?t:i+".html"+n}function p(t,e){const n=t.hash,i=function(t){const e=t.match(r);if(e)return e[0]}(e);return(!i||n===i)&&s(t.path)===s(e)}function h(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const o=t.replace(/^\//,"").split("/");for(let t=0;t({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}(t);const s=a.sidebar||o.sidebar;if(s){const{base:t,config:n}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,s);return n?n.map(e=>(function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{i>3&&console.error("[vuepress] detected a too deep nested sidebar group.");const o=e.children||[];return 0===o.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:o.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}})(e,i,t)):[]}return[]}function v(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},function(t,e,n){var r=n(23),i=n(38);t.exports=n(20)?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(19);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){t.exports=!n(15)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},,function(t,e,n){var r=n(18),i=n(64),o=n(66),a=Object.defineProperty;e.f=n(20)?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(14),i=n(17),o=n(25),a=n(37)("src"),s=n(88),u=(""+s).split("toString");n(26).inspectSource=function(t){return s.call(t)},(t.exports=function(t,e,n,s){var c="function"==typeof n;c&&(o(n,"name")||i(n,"name",e)),t[e]!==n&&(c&&(o(n,a)||i(n,a,t[e]?""+t[e]:u.join(String(e)))),t===r?t[e]=n:s?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,"toString",(function(){return"function"==typeof this&&this[a]||s.call(this)}))},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e){var n=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(67),i=n(21);t.exports=function(t){return r(i(t))}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(30),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(21);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(12),i=n(33)(3);r(r.P+r.F*!n(34)([].some,!0),"Array",{some:function(t){return i(this,t,arguments[1])}})},function(t,e,n){var r=n(40),i=n(67),o=n(31),a=n(29),s=n(97);t.exports=function(t,e){var n=1==t,u=2==t,c=3==t,l=4==t,f=6==t,p=5==t||f,h=e||s;return function(e,s,d){for(var v,g,m=o(e),b=i(m),x=r(s,d,3),y=a(b.length),_=0,k=n?h(e,y):u?h(e,0):void 0;y>_;_++)if((p||_ in b)&&(g=x(v=b[_],_,m),t))if(n)k[_]=g;else if(g)switch(t){case 3:return!0;case 5:return v;case 6:return _;case 2:k.push(v)}else if(l)return!1;return f?-1:c||l?l:k}}},function(t,e,n){"use strict";var r=n(15);t.exports=function(t,e){return!!t&&r((function(){e?t.call(null,(function(){}),1):t.call(null)}))}},function(t,e,n){var r=n(13)("unscopables"),i=Array.prototype;null==i[r]&&n(17)(i,r,{}),t.exports=function(t){i[r][t]=!0}},function(t,e,n){var r=n(26),i=n(14),o=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(63)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){t.exports={}},function(t,e,n){var r=n(89);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(68),i=n(44);t.exports=Object.keys||function(t){return r(t,i)}},function(t,e,n){var r=n(27),i=n(29),o=n(93);t.exports=function(t){return function(e,n,a){var s,u=r(e),c=i(u.length),l=o(a,c);if(t&&n!=n){for(;c>l;)if((s=u[l++])!=s)return!0}else for(;c>l;l++)if((t||l in u)&&u[l]===n)return t||l||0;return!t&&-1}}},function(t,e,n){var r=n(36)("keys"),i=n(37);t.exports=function(t){return r[t]||(r[t]=i(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},,,,,function(t,e,n){for(var r=n(85),i=n(41),o=n(24),a=n(14),s=n(17),u=n(39),c=n(13),l=c("iterator"),f=c("toStringTag"),p=u.Array,h={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},d=i(h),v=0;vu;)r(s,n=e[u++])&&(~o(c,n)||c.push(n));return c}},function(t,e,n){var r=n(23).f,i=n(25),o=n(13)("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},function(t,e,n){var r=n(31),i=n(41);n(96)("keys",(function(){return function(t){return i(r(t))}}))},function(t,e,n){var r=n(28);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(19),i=n(28),o=n(13)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[o])?!!e:"RegExp"==i(t))}},function(t,e,n){"use strict";var r=n(18),i=n(29),o=n(74),a=n(75);n(76)("match",1,(function(t,e,n,s){return[function(n){var r=t(this),i=null==n?void 0:n[e];return void 0!==i?i.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=s(n,t,this);if(e.done)return e.value;var u=r(t),c=String(this);if(!u.global)return a(u,c);var l=u.unicode;u.lastIndex=0;for(var f,p=[],h=0;null!==(f=a(u,c));){var d=String(f[0]);p[h]=d,""===d&&(u.lastIndex=o(c,i(u.lastIndex),l)),h++}return 0===h?null:p}]}))},function(t,e,n){"use strict";var r=n(106)(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){"use strict";var r=n(107),i=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var o=n.call(t,e);if("object"!=typeof o)throw new TypeError("RegExp exec method returned something other than an Object or null");return o}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return i.call(t,e)}},function(t,e,n){"use strict";n(108);var r=n(24),i=n(17),o=n(15),a=n(21),s=n(13),u=n(77),c=s("species"),l=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$")})),f=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var p=s(t),h=!o((function(){var e={};return e[p]=function(){return 7},7!=""[t](e)})),d=h?!o((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[c]=function(){return n}),n[p](""),!e})):void 0;if(!h||!d||"replace"===t&&!l||"split"===t&&!f){var v=/./[p],g=n(a,p,""[t],(function(t,e,n,r,i){return e.exec===u?h&&!i?{done:!0,value:v.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),m=g[0],b=g[1];r(String.prototype,t,m),i(RegExp.prototype,p,2==e?function(t,e){return b.call(t,this,e)}:function(t){return b.call(t,this)})}}},function(t,e,n){"use strict";var r,i,o=n(78),a=RegExp.prototype.exec,s=String.prototype.replace,u=a,c=(r=/a/,i=/b*/g,a.call(r,"a"),a.call(i,"a"),0!==r.lastIndex||0!==i.lastIndex),l=void 0!==/()??/.exec("")[1];(c||l)&&(u=function(t){var e,n,r,i,u=this;return l&&(n=new RegExp("^"+u.source+"$(?!\\s)",o.call(u))),c&&(e=u.lastIndex),r=a.call(u,t),c&&r&&(u.lastIndex=u.global?r.index+r[0].length:e),l&&r&&r.length>1&&s.call(r[0],n,(function(){for(i=1;i]*>)/g,h=/\$([$&`']|\d\d?)/g;n(76)("replace",2,(function(t,e,n,d){return[function(r,i){var o=t(this),a=null==r?void 0:r[e];return void 0!==a?a.call(r,o,i):n.call(String(o),r,i)},function(t,e){var i=d(n,t,this,e);if(i.done)return i.value;var f=r(t),p=String(this),h="function"==typeof e;h||(e=String(e));var g=f.global;if(g){var m=f.unicode;f.lastIndex=0}for(var b=[];;){var x=u(f,p);if(null===x)break;if(b.push(x),!g)break;""===String(x[0])&&(f.lastIndex=s(p,o(f.lastIndex),m))}for(var y,_="",k=0,S=0;S=k&&(_+=p.slice(k,L)+E,k=L+C.length)}return _+p.slice(k)}];function v(t,e,r,o,a,s){var u=r+t.length,c=o.length,l=h;return void 0!==a&&(a=i(a),l=p),n.call(s,l,(function(n,i){var s;switch(i.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(u);case"<":s=a[i.slice(1,-1)];break;default:var l=+i;if(0===l)return n;if(l>c){var p=f(l/10);return 0===p?n:p<=c?void 0===o[p-1]?i.charAt(1):o[p-1]+i.charAt(1):n}s=o[l-1]}return void 0===s?"":s}))}}))},function(t,e,n){"use strict";var r=n(12),i=n(33)(1);r(r.P+r.F*!n(34)([].map,!0),"Array",{map:function(t){return i(this,t,arguments[1])}})},function(t,e){t.exports=function(t){return null==t}},function(t,e,n){var r=n(132).Symbol;t.exports=r},function(t,e,n){"use strict";n.r(e);n(32);var r=n(16),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(84).a},beforeCreate:function(){this.$options.components.SidebarLinks=n(83).default},methods:{isActive:r.e}},o=(n(140),n(0)),a=Object(o.a)(i,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("router-link",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,sidebarDepth:t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(80),n(141);function s(t,e,n,r){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}},n)}function u(t,e,n,i,o){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||a>o?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var c=Object(r.e)(i,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[s(t,n+"#"+e.slug,e.title,c),u(t,e.children,n,i,o,a+1)])})))}var c={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,i=n.$page,o=(n.$site,n.$route),a=n.$themeConfig,c=n.$themeLocaleConfig,l=e.props,f=l.item,p=l.sidebarDepth,h=Object(r.e)(o,f.path),d="auto"===f.type?h||f.children.some((function(t){return Object(r.e)(o,f.basePath+"#"+t.slug)})):h,v="external"===f.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,f.path,f.title||f.path):s(t,f.path,f.title||f.path,d),g=[i.frontmatter.sidebarDepth,p,c.sidebarDepth,a.sidebarDepth,1].find((function(t){return void 0!==t})),m=c.displayAllHeaders||a.displayAllHeaders;return"auto"===f.type?[v,u(t,f.children,f.basePath,o,g)]:(d||m)&&f.headers&&!r.d.test(f.path)?[v,u(t,Object(r.c)(f.headers),f.path,o,g)]:v}};n(142);function l(t,e){return"group"===e.type&&e.children.some((function(e){return"group"===e.type?l(t,e):"page"===e.type&&Object(r.e)(t,e.path)}))}var f={name:"SidebarLinks",components:{SidebarGroup:a,SidebarLink:Object(o.a)(c,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth"],data:function(){return{openGroupIndex:0}},created:function(){this.refreshIndex()},watch:{$route:function(){this.refreshIndex()}},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(r.e)(this.$route,t.regularPath)}}},p=Object(o.a)(f,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,r){return n("li",{key:r},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:r===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(r)}}}):n("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},function(t,e,n){"use strict";var r={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},i=(n(124),n(0)),o=Object(i.a)(r,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=o.exports},function(t,e,n){"use strict";var r=n(35),i=n(86),o=n(39),a=n(27);t.exports=n(87)(Array,"Array",(function(t,e){this._t=a(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])}),"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){"use strict";var r=n(63),i=n(12),o=n(24),a=n(17),s=n(39),u=n(90),c=n(69),l=n(95),f=n(13)("iterator"),p=!([].keys&&"next"in[].keys()),h=function(){return this};t.exports=function(t,e,n,d,v,g,m){u(n,e,d);var b,x,y,_=function(t){if(!p&&t in L)return L[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},k=e+" Iterator",S="values"==v,C=!1,L=t.prototype,$=L[f]||L["@@iterator"]||v&&L[v],w=$||_(v),O=v?S?_("entries"):w:void 0,j="Array"==e&&L.entries||$;if(j&&(y=l(j.call(new t)))!==Object.prototype&&y.next&&(c(y,k,!0),r||"function"==typeof y[f]||a(y,f,h)),S&&$&&"values"!==$.name&&(C=!0,w=function(){return $.call(this)}),r&&!m||!p&&!C&&L[f]||a(L,f,w),s[e]=w,s[k]=h,v)if(b={values:S?w:_("values"),keys:g?w:_("keys"),entries:O},m)for(x in b)x in L||o(L,x,b[x]);else i(i.P+i.F*(p||C),e,b);return b}},function(t,e,n){t.exports=n(36)("native-function-to-string",Function.toString)},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){"use strict";var r=n(91),i=n(38),o=n(69),a={};n(17)(a,n(13)("iterator"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(a,{next:i(1,n)}),o(t,e+" Iterator")}},function(t,e,n){var r=n(18),i=n(92),o=n(44),a=n(43)("IE_PROTO"),s=function(){},u=function(){var t,e=n(65)("iframe"),r=o.length;for(e.style.display="none",n(94).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("