├── .babelrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── util.js ├── webpack.base.config.js ├── webpack.extracss.config.js └── webpack.no.extracss.config.js ├── example └── App.vue ├── package-lock.json ├── package.json └── src ├── components ├── col.vue ├── index.js └── row.vue ├── index.js └── styles └── grid.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=vue 2 | *.css linguist-language=vue 3 | *.html linguist-language=vue 4 | *.vue linguist-language=vue 5 | 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build 2 | example 3 | node_modules 4 | static 5 | .babelrc 6 | .editorconfig 7 | .gitattributes 8 | .gitignore 9 | .postcssrc.js 10 | package-lock.json 11 | .idea 12 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {}, 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 zhoulin 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # simple-grid 2 | > a simple grid layout(Vue Component) 3 | 4 | ## Installation 5 | use npm 6 | ```bash 7 | $ npm i simple-xgrid --save 8 | ``` 9 | ```js 10 | import Grid from 'simple-xgrid' 11 | import 'simple-xgrid/dist/simple-grid.css' 12 | Vue.use(Grid) 13 | 14 | ``` 15 | use script 16 | ```html 17 | 18 | 19 | 20 | 21 | 22 | ``` 23 | due to conflict,use script, you need change to 。 24 | 25 | 26 | 27 | 28 | ## Row Component 29 | ### row props 30 | | param | description | type | default | 31 | | :-: | :-: | :-: | :-: | 32 | | gutter | Grid spacing in pixels, split equally left and right | Number | 0 | 33 | | type | Layout mode. Can optionally make use of flex in a modern browser. | String | | 34 | | align | Vertical alignment of flex layout. You can choose between top, middle, bottom. | String | | 35 | | justify | Horizontal arrangement of flex layout. You can choose between start, end, center, space-around, space-between. | String | | 36 | | type | Layout mode. Can optionally make use of flex in a modern browser. | String | | 37 | ## Col Component 38 | ### col props 39 | | param | description | type | default | 40 | | :-: | :-: | :-: | :-: | 41 | | span | Column span. Value can be between 1 and 24. | Number | | 42 | | order | Grid order when using flex layout. if auto responsive, value can only 1-24. | Number | | 43 | | offset | Number of cells to the left of grid spacing. No cells can be inside the grid spacing. | Number | | 44 | | push | Number of cells to move to the right | Number | | 45 | | pull | Number of cells to move to the left | Number | | 46 | | xs | <768px can be a span value or an object containing props | Number or Object | | 47 | | sm | >768px can be a span value or an object containing props | Number or Object | | 48 | | md | ≥992px can be a span value or an object containing props | Number or Object | | 49 | | lg | ≥1200px can be a span value or an object containing props | Number or Object | | 50 | ## examples 51 | [see live demo](https://jsfiddle.net/anthinkingcoder/04phqm6L) 52 | ```html 53 | 54 | span:4 55 | span:4 56 | span:4 57 | span:4 58 | span:4 59 | span:4 60 | 61 |
62 | 63 | 64 |
gutter:30
65 | 66 | 67 |
gutter:30
68 | 69 | 70 |
gutter:30
71 | 72 | 73 |
74 | 75 | offset:4 76 | span:4 77 | 78 |
79 | 80 | col 81 | push:4 82 | 83 |
84 | 85 | Response-Col 86 | Response-Col 87 | Response-Col 88 | 89 |
90 | 91 | Response-Col 92 | Response-Col 93 | Response-Col 94 | 95 |
96 | 97 | 98 | flex 99 | 100 | 101 | flex 102 | 103 | 104 |
105 | 106 | 107 | flex 108 | 109 | 110 | flex 111 | 112 | 113 |
114 | 115 | 116 | flex 117 | 118 | 119 | flex 120 | 121 | 122 |
123 | 124 | 125 | flex 126 | 127 | 128 | flex 129 | 130 | 131 |
132 | 133 | 134 | order:2 135 | 136 | 137 | order:1 138 | 139 | 140 | order:4 141 | 142 | 143 | order:5 144 | 145 | 146 | order:3 147 | 148 | 149 | 150 | response-order-1 151 | Response-order-2 152 | 153 | ``` 154 | ## result 155 | ![](http://ofn22jfef.bkt.clouddn.com/grid-demo.png) 156 | -------------------------------------------------------------------------------- /build/util.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | function resolve (dir) { 3 | return path.join(__dirname, '..', dir) 4 | } 5 | function assetsPath (_path) { 6 | return path.posix.join('static', _path) 7 | } 8 | 9 | module.exports = { 10 | resolve, 11 | assetsPath 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 4 | const util = require('./util') 5 | const resolve = util.resolve 6 | const assetsPath = util.assetsPath 7 | module.exports = { 8 | mode: 'production', 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | output: { 13 | path: resolve('/dist'), 14 | publicPath: "/dist/", 15 | filename: 'simple-grid.js', 16 | library: "simple-grid", 17 | libraryTarget: "umd", 18 | umdNamedDefine: true 19 | }, 20 | externals: { 21 | vue: { 22 | root: 'Vue', 23 | commonjs: 'vue', 24 | commonjs2: 'vue', 25 | amd: 'vue' 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | use: 'vue-loader', 33 | }, 34 | { 35 | test: /\.js$/, 36 | use:[ 37 | { 38 | loader: 'babel-loader', 39 | options: { 40 | }, 41 | } 42 | ], 43 | exclude: /node_modules/, 44 | } 45 | ], 46 | }, 47 | plugins: [ 48 | new VueLoaderPlugin(), 49 | new UglifyJsPlugin({ 50 | parallel: true, 51 | sourceMap: false, 52 | }) 53 | ] 54 | }; 55 | -------------------------------------------------------------------------------- /build/webpack.extracss.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | const webpackBaseConfig = require('./webpack.base.config.js') 4 | const util = require('./util') 5 | const resolve = util.resolve 6 | const assetsPath = util.assetsPath 7 | module.exports = merge(webpackBaseConfig, { 8 | output: { 9 | path: resolve('/dist'), 10 | publicPath: "/dist/", 11 | filename: 'simple-grid.js', 12 | library: "simple-grid", 13 | libraryTarget: "umd", 14 | umdNamedDefine: true 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.scss$/, 20 | use: [ 21 | { 22 | loader: MiniCssExtractPlugin.loader, 23 | options: { 24 | 25 | } 26 | }, 27 | "css-loader","postcss-loader","sass-loader" 28 | ] 29 | }, 30 | ], 31 | }, 32 | plugins: [ 33 | new MiniCssExtractPlugin({ 34 | // Options similar to the same options in webpackOptions.output 35 | // both options are optional 36 | filename: "simple-grid.css", 37 | chunkFilename: "[id].css" 38 | }) 39 | ] 40 | }) 41 | -------------------------------------------------------------------------------- /build/webpack.no.extracss.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const webpackBaseConfig = require('./webpack.base.config.js'); 5 | const util = require('./util'); 6 | const resolve = util.resolve; 7 | 8 | module.exports = merge(webpackBaseConfig, { 9 | output: { 10 | path: resolve('/dist'), 11 | publicPath: "/dist/", 12 | filename: 'simple-grid.noextra.js', 13 | library: "simple-grid", 14 | libraryTarget: "umd", 15 | umdNamedDefine: true 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.scss$/, 21 | use: [ 22 | { 23 | loader: 'style-loader', 24 | options: { 25 | sourceMap: false, 26 | }, 27 | }, 28 | { 29 | loader: 'css-loader', 30 | options: { 31 | sourceMap: false, 32 | }, 33 | }, 34 | { 35 | loader: 'postcss-loader', 36 | }, 37 | { 38 | loader: 'sass-loader', 39 | options: { 40 | sourceMap: false, 41 | }, 42 | } 43 | ], 44 | }, 45 | ], 46 | } 47 | }) 48 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 116 | 121 | 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-xgrid", 3 | "version": "1.2.4", 4 | "description": "a simple grid layout", 5 | "author": "anthinkingcoder jojo837769723@gmail.com", 6 | "private": false, 7 | "main": "src/index.js", 8 | "scripts": { 9 | "build:extracss": "webpack --config build/webpack.extracss.config.js", 10 | "build": "webpack --config build/webpack.no.extracss.config.js && sass src/styles/grid.scss dist/grid.css" 11 | }, 12 | "dependencies": {}, 13 | "devDependencies": { 14 | "autoprefixer": "^7.1.2", 15 | "autoprefixer-loader": "^3.2.0", 16 | "babel-core": "^6.22.1", 17 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 18 | "babel-loader": "^7.1.1", 19 | "babel-plugin-syntax-jsx": "^6.18.0", 20 | "babel-plugin-transform-runtime": "^6.22.0", 21 | "babel-plugin-transform-vue-jsx": "^3.5.0", 22 | "babel-preset-env": "^1.3.2", 23 | "babel-preset-stage-2": "^6.22.0", 24 | "copy-webpack-plugin": "^4.0.1", 25 | "css-loader": "^0.28.0", 26 | "file-loader": "^1.1.4", 27 | "friendly-errors-webpack-plugin": "^1.6.1", 28 | "html-webpack-plugin": "^2.30.1", 29 | "i": "^0.3.6", 30 | "mini-css-extract-plugin": "^0.4.1", 31 | "node-sass": "^4.9.2", 32 | "postcss-import": "^12.0.0", 33 | "postcss-loader": "^2.0.8", 34 | "postcss-url": "^7.3.2", 35 | "sass": "^1.9.1", 36 | "sass-loader": "^7.0.3", 37 | "style-loader": "^0.21.0", 38 | "uglifyjs-webpack-plugin": "^1.1.1", 39 | "url-loader": "^0.5.8", 40 | "vue": "^2.5.2", 41 | "vue-loader": "^15.3.0", 42 | "vue-router": "^3.0.1", 43 | "vue-style-loader": "^3.0.1", 44 | "vue-template-compiler": "^2.5.2", 45 | "webpack": "^4.16.1", 46 | "webpack-bundle-analyzer": "^2.9.0", 47 | "webpack-cli": "^3.1.0", 48 | "webpack-merge": "^4.1.3" 49 | }, 50 | "engines": { 51 | "node": ">= 6.0.0", 52 | "npm": ">= 3.0.0" 53 | }, 54 | "keywords": [ 55 | "vue", 56 | "grid", 57 | "layout", 58 | "responstive" 59 | ], 60 | "repository": { 61 | "type": "git", 62 | "url": "https://github.com/anthinkingcoder/simple-grid.git" 63 | }, 64 | "browserslist": [ 65 | "> 1%", 66 | "last 2 versions", 67 | "not ie <= 8" 68 | ], 69 | "license": "MIT" 70 | } 71 | -------------------------------------------------------------------------------- /src/components/col.vue: -------------------------------------------------------------------------------- 1 | 6 | 70 | 71 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Col from './col.vue' 2 | import Row from './row.vue' 3 | export {Col, Row}; 4 | 5 | -------------------------------------------------------------------------------- /src/components/row.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 79 | 80 | 82 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {Col, Row} from './components' 2 | const install = function (Vue) { 3 | Vue.component('Col', Col); 4 | Vue.component('Row', Row); 5 | Vue.component('iCol', Col); 6 | }; 7 | if (typeof window !== 'undefined' && window.Vue) { 8 | install(window.Vue); 9 | } 10 | export default { 11 | install, 12 | Col, 13 | Row 14 | }; 15 | -------------------------------------------------------------------------------- /src/styles/grid.scss: -------------------------------------------------------------------------------- 1 | $prefix: '.simple'; 2 | $row-prefix: '#{$prefix}-row'; 3 | $col-prefix: '#{$prefix}-col'; 4 | $flex-row-prefix: '#{$row-prefix}-flex'; 5 | $flex-justifies: ('start', 'end', 'center', 'space-around', 'space-between'); 6 | $flex-aligns: ('top':'flex-start', 'middle':'center', 'bottom':'flex-end'); 7 | $grid-col: 24; 8 | @mixin generate-row { 9 | #{$row-prefix} { 10 | display: block; 11 | position: relative; 12 | margin: 0; 13 | height: auto; 14 | zoom: 1; 15 | overflow: hidden; 16 | } 17 | #{$flex-row-prefix} { 18 | display: flex; 19 | flex-direction: row; 20 | flex-wrap: wrap; 21 | } 22 | #{$col-prefix} { 23 | display: block; 24 | position: relative; 25 | } 26 | #{$flex-row-prefix}, #{$flex-row-prefix}, #{$col-prefix} { 27 | box-sizing: border-box; 28 | } 29 | @each $justify in $flex-justifies { 30 | #{$flex-row-prefix}-#{$justify} { 31 | justify-content: #{$justify}; 32 | } 33 | } 34 | @each $key, $value in $flex-aligns { 35 | #{$flex-row-prefix}-#{$key} { 36 | align-items: #{$value}; 37 | } 38 | } 39 | } 40 | 41 | @mixin generate-float-col($viewport:'') { 42 | $cols: '#{$col-prefix}-span#{$viewport}-1'; 43 | @for $i from 2 through $grid-col { 44 | $cols: '#{$cols},#{$col-prefix}-span#{$viewport}-#{$i},'; 45 | } 46 | #{$cols} { 47 | float: left; 48 | flex: 0 0 auto; 49 | } 50 | } 51 | 52 | @mixin generate-col($viewport: '') { 53 | @for $i from 1 through $grid-col { 54 | #{$col-prefix}-span#{$viewport}-#{$i} { 55 | width: percentage($i / $grid-col); 56 | } 57 | 58 | #{$col-prefix}-push#{$viewport}-#{$i} { 59 | left: percentage($i / $grid-col); 60 | } 61 | 62 | #{$col-prefix}-pull#{$viewport}-#{$i} { 63 | right: percentage($i / $grid-col); 64 | } 65 | 66 | #{$col-prefix}-offset#{$viewport}-#{$i} { 67 | margin-left: percentage($i / $grid-col); 68 | } 69 | 70 | #{$col-prefix}-order#{$viewport}-#{$i} { 71 | order: #{$i}; 72 | } 73 | } 74 | } 75 | 76 | @mixin generate-grid($viewport) { 77 | @include generate-float-col($viewport); 78 | @include generate-col($viewport); 79 | } 80 | 81 | @include generate-row(); 82 | @include generate-grid(''); 83 | @media (max-width: 768px) { 84 | @include generate-grid('-xs'); 85 | } 86 | 87 | @media (min-width: 768px) { 88 | @include generate-grid('-sm'); 89 | } 90 | 91 | @media (min-width: 992px) { 92 | @include generate-grid('-md'); 93 | } 94 | 95 | @media (min-width: 1200px) { 96 | @include generate-grid('-lg'); 97 | } 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | --------------------------------------------------------------------------------