├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── config ├── webpack.config.babel.js └── webpack.prod.config.babel.js ├── example ├── App.js ├── index.html └── index.js ├── package-lock.json ├── package.json └── src ├── Col.js ├── Row.js ├── index.js └── style ├── default.scss ├── index.scss └── mixins.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"], 3 | "plugins": [ 4 | "transform-react-remove-prop-types", 5 | "transform-react-inline-elements", 6 | "transform-class-properties", 7 | "transform-react-constant-elements" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "rules": { 5 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 6 | "comma-dangle": ["error", "only-multiline"], 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | favicon.png 4 | node_modules 5 | coverage 6 | public 7 | lib 8 | umd 9 | *.tgz 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.log 3 | *.tgz 4 | 5 | src/ 6 | example/ 7 | config/webpack.config.babel.js 8 | package-lock.json 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 abraztsov 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 | ReactSimpleFlexGrid 2 | ================= 3 | [![npm version](https://badge.fury.io/js/react-simple-flex-grid.svg)](https://badge.fury.io/js/react-simple-flex-grid) 4 | 5 | 6 | A way to quickly add a Flexbox Grid Layout to your app 🚀 7 | 8 | Layout based on 12 Grids System. 9 | 10 | ![demo](http://i.imgur.com/QCegsAg.gif) 11 | 12 | Basic Usage 13 | ----- 14 | 15 | 1. Install via `npm` and `yarn` 16 | 17 | ``` 18 | npm i -S react-simple-flex-grid 19 | 20 | // or 21 | 22 | yarn add react-simple-flex-grid 23 | ``` 24 | 2. Import `Row`, `Col` and grid styles 25 | 26 | ``` 27 | import { Row, Col } from 'react-simple-flex-grid'; 28 | import "react-simple-flex-grid/lib/main.css"; 29 | ``` 30 | 3. Enjoy 31 | ``` 32 | 33 | Column 34 | Column 35 | 36 | ``` 37 | 38 | ![Imgur](http://i.imgur.com/UpGfkrh.png) 39 | 40 | Customize 41 | ----- 42 | 43 | Basic steps to customize grid. 44 | 45 | ### Gutter 🌟 46 | 47 | You can use the `gutter` (px) property of `Row` as grid spacing. 48 | 49 | ``` 50 | 51 | col-4 52 | col-4 53 | col-4 54 | 55 | ``` 56 | 57 | ![Imgur](http://i.imgur.com/xMjJwku.png) 58 | 59 | ### Column Offset 😃 60 | 61 | `Offset` can set the column to the right side. 62 | 63 | ``` 64 | 65 | col-4 66 | col-4 67 | 68 | ``` 69 | 70 | ![Imgur](http://i.imgur.com/L2ZuRpa.png) 71 | 72 | ### Column Order 🤙 73 | 74 | `Order` property can easily change column order. 75 | 76 | ``` 77 | 78 | 4 col-4 79 | 3 col-4 80 | 2 col-4 81 | 1 col-4 82 | 83 | ``` 84 | 85 | ![Imgur](http://i.imgur.com/7GQVn2D.png) 86 | 87 | ### Column Sort 🤘 88 | 89 | Flexbox params `start`, `center`, `end`, `space-between` and `space-around` can be passed to `Row` and sort columns inside. 90 | 91 | ``` 92 | 93 | col-4 94 | col-4 95 | col-4 96 | 97 | ``` 98 | 99 | ![Imgur](http://i.imgur.com/mk0x5P1.png) 100 | 101 | --- 102 | 103 | ``` 104 | 105 | col-4 106 | col-4 107 | col-4 108 | 109 | ``` 110 | 111 | ![Imgur](http://i.imgur.com/EcsT2MC.png) 112 | 113 | 114 | --- 115 | 116 | ``` 117 | 118 | col-4 119 | col-4 120 | col-4 121 | 122 | ``` 123 | 124 | ![Imgur](http://i.imgur.com/O7lLHrr.png) 125 | 126 | ### Responsive 💫 127 | 128 | Based on Bootstrap media queries here five dimensions: `xs`, `sm`, `md`, `lg`, `xl`. 129 | 130 | ``` 131 | 132 | xl-10 133 | xl-2 134 | 135 | ``` 136 | 137 | ![Imgur](http://i.imgur.com/uzX6yOb.png) 138 | 139 | ### Exotic Responsive 🏝️ 140 | 141 | `Span` and `offset` property can be embedded into `xs`, `sm`, `md`, `lg`, `xl` such as `xl = {{span: 10}}`. 142 | 143 | ``` 144 | 145 | xs-6 146 | col-4 147 | 148 | ``` 149 | 150 | ![Imgur](http://i.imgur.com/kiYepgp.png) 151 | 152 | ## API 153 | 154 | ### Row 155 | 156 | | Property | Description | Type | Default | 157 | |----------|-----------------------------------------------------------------------------------------------------|--------|---------| 158 | | gutter | grid spacing | number | 0 | 159 | | align | the vertical alignment of the layout of flex: `top` `middle` `bottom` `stretch` | string | start | 160 | | justify | horizontal arrangement of the layout of flex: `start` `end` `center` `space-around` `space-between` | string | start | 161 | 162 | ### Col 163 | 164 | | Property | Description | Type | Default | 165 | |----------|----------------------------------------------------------------------------------------|---------------|---------| 166 | | span | the number of cells,0 corresponds to display: none | number | none | 167 | | offset | the number of cells to the left of the grid spacing, no cell in grid spacing | number | 0 | 168 | | order | `col` number in the row | number | none | 169 | | xs | <768px and also default setting, could be a span value or a object contain above props | number/object | - | 170 | | sm | ≥768px, could be a span value or a object contain above props | number/object | - | 171 | | md | ≥992px, could be a span value or a object contain above props | number/object | - | 172 | | lg | ≥1200px, could be a span value or a object contain above props | number/object | - | 173 | | xl | ≥1600px, could be a span value or a object contain above props | number/object | - | 174 | 175 | How to test example locally ? 176 | --- 177 | 1. `git clone https://github.com/abraztsov/ReactSimpleFlexGrid.git` 178 | 2. `cd ReactSimpleFlexGrid` 179 | 3. `npm start` 180 | 4. Go to `localhost:8080` 181 | 182 | Feature Requests / Find Bug ? 183 | --- 184 | 185 | Have an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new! 186 | 187 | 188 | FAQ 189 | ----- 190 | 191 | This component based on [ant design grid]( https://ant.design/components/grid/). Huge thanks them for a such an awesome work. 192 | 193 | ### Updates 194 | 195 | You can see table for update information. 196 | 197 | | No. | Version | Breakdown | Ket. | 198 | | :------------: | :------------: | ------------ | ------------ | 199 | | 1. | 1.0.1 | | First Release | 200 | | 2. | 1.0.2 | - Added autoprefixer | | 201 | | | | - Fixed Safari bug| | 202 | | 3. | 1.0.3 | Removed unnecessary package | | 203 | | 4. | 1.1.0 | Added order parameter | | | 204 | | 5. | 1.3.0 | Added stretch option to align property | | | 205 | -------------------------------------------------------------------------------- /config/webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import HtmlWebpackPlugin from 'html-webpack-plugin'; 3 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 4 | 5 | const sassLoaders = { 6 | fallback: 'style-loader', 7 | use: [{ 8 | loader: 'css-loader', 9 | query: { 10 | modules: true, 11 | localIdentName: '[local]' 12 | } 13 | }, { 14 | loader: 'postcss-loader', 15 | options: { 16 | plugins() { 17 | return [ 18 | require('autoprefixer') 19 | ]; 20 | } 21 | } 22 | }, { 23 | loader: 'sass-loader' 24 | }] 25 | }; 26 | 27 | export default { 28 | entry: ['./example/index.js', './src/index.js'], 29 | devtool: 'source-map', 30 | output: { 31 | path: path.join(__dirname, 'dist'), 32 | filename: 'index.js' 33 | }, 34 | module: { 35 | loaders: [{ 36 | test: /\.js?$/, 37 | exclude: /node_modules/, 38 | loader: 'babel-loader', 39 | }, 40 | { 41 | test: /\.scss$/, 42 | loader: ExtractTextPlugin.extract(sassLoaders) 43 | }], 44 | }, 45 | plugins: [ 46 | new HtmlWebpackPlugin({ 47 | filename: 'index.html', 48 | template: path.resolve('example/index.html'), 49 | }), 50 | new ExtractTextPlugin({ 51 | filename: 'index.css', 52 | allChunks: true 53 | }) 54 | ], 55 | devServer: { 56 | contentBase: path.resolve('dist') 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /config/webpack.prod.config.babel.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack'; 2 | import path from 'path'; 3 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 4 | import CompressionPlugin from 'compression-webpack-plugin'; 5 | 6 | const sassLoaders = { 7 | fallback: 'style-loader', 8 | use: [{ 9 | loader: 'css-loader', 10 | query: { 11 | modules: true, 12 | localIdentName: '[local]' 13 | } 14 | }, { 15 | loader: 'postcss-loader', 16 | options: { 17 | plugins() { 18 | return [ 19 | require('autoprefixer') 20 | ]; 21 | } 22 | } 23 | }, { 24 | loader: 'sass-loader' 25 | }] 26 | }; 27 | 28 | export default { 29 | entry: ['./src/index.js'], 30 | output: { 31 | path: path.join(__dirname, '../lib'), 32 | filename: 'index.js', 33 | libraryTarget: 'umd', 34 | library: 'react-simple-flex-grid' 35 | }, 36 | module: { 37 | loaders: [{ 38 | test: /\.js?$/, 39 | exclude: /node_modules/, 40 | loader: 'babel-loader', 41 | }, 42 | { 43 | test: /\.scss$/, 44 | use: ExtractTextPlugin.extract(sassLoaders) 45 | }], 46 | }, 47 | externals: { 48 | react: { 49 | root: 'React', 50 | commonjs2: 'react', 51 | commonjs: 'react', 52 | amd: 'react' 53 | }, 54 | 'react-dom': { 55 | root: 'ReactDOM', 56 | commonjs2: 'react-dom', 57 | commonjs: 'react-dom', 58 | amd: 'react-dom' 59 | } 60 | }, 61 | resolve: { 62 | extensions: ['*', '.js', '.jsx', '.scss', '.css'], 63 | }, 64 | plugins: [ 65 | new webpack.optimize.OccurrenceOrderPlugin(), 66 | new ExtractTextPlugin({ 67 | filename: '[name].css', 68 | allChunks: true 69 | }), 70 | new webpack.DefinePlugin({ 71 | 'process.env': { 72 | 'NODE_ENV': JSON.stringify('production') 73 | } 74 | }), 75 | new webpack.optimize.AggressiveMergingPlugin(), 76 | new webpack.optimize.UglifyJsPlugin({ 77 | comments: false, // remove comments 78 | compress: { 79 | unused: true, 80 | dead_code: true, // big one--strip code that will never execute 81 | warnings: false, // good for prod apps so users can't peek behind curtain 82 | drop_debugger: true, 83 | conditionals: true, 84 | evaluate: true, 85 | drop_console: true, // strips console statements 86 | sequences: true, 87 | booleans: true, 88 | } 89 | }), 90 | new CompressionPlugin({ 91 | test: /\.css$|\.js$/ 92 | }) 93 | ] 94 | }; 95 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Col from '../src/Col'; 3 | import Row from '../src/Row'; 4 | 5 | export default class App extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | gutterPx: 8, 10 | colCount: 2, 11 | }; 12 | } 13 | onGutterChange = (e) => { 14 | this.setState({ gutterPx: e.target.value }); 15 | } 16 | onColCountChange = (e) => { 17 | this.setState({ colCount: e.target.value }); 18 | } 19 | render() { 20 | const { gutterPx, colCount } = this.state; 21 | const cols = []; 22 | let colCode = ''; 23 | for (let i = 0; i < colCount; i++) { 24 | cols.push( 25 | 26 |
{i+1} col-4
27 | 28 | ); 29 | colCode += ` \n`; 30 | } 31 | cols.push( 32 | 33 |
col-4
34 | 35 | ); 36 | return ( 37 |
38 |
39 | Gutter (px): 40 |
41 | 42 |
43 | Column Count: 44 |
45 | 46 |
47 |
48 | {cols} 49 | 
{`\n${colCode}`}
50 |
51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('react-root') 8 | ); 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-simple-flex-grid", 3 | "version": "1.3.21", 4 | "description": "", 5 | "keywords": [ 6 | "react", 7 | "react-grid", 8 | "grid", 9 | "react simple grid", 10 | "flexbox grid", 11 | "12 grid" 12 | ], 13 | "main": "lib/index", 14 | "scripts": { 15 | "clean:lib": "del lib umd", 16 | "start": "npm i && cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.babel.js", 17 | "build:lib": "cross-env NODE_ENV=production webpack ./src/index.js --config ./config/webpack.prod.config.babel.js", 18 | "build": "npm run clean:lib && npm run build:lib", 19 | "pack": "npm run build && npm pack" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/abraztsov/ReactSimpleFlexGrid.git" 24 | }, 25 | "author": "Nikita Abraztsov (https://github.com/abraztsov)", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/abraztsov/ReactSimpleFlexGrid/issues" 29 | }, 30 | "homepage": "https://github.com/abraztsov/ReactSimpleFlexGrid#readme", 31 | "devDependencies": { 32 | "autoprefixer": "^6.7.7", 33 | "babel-cli": "^6.24.0", 34 | "babel-core": "^6.24.0", 35 | "babel-eslint": "^7.2.1", 36 | "babel-loader": "^6.4.1", 37 | "babel-plugin-add-module-exports": "^0.2.1", 38 | "babel-plugin-transform-class-properties": "^6.23.0", 39 | "babel-plugin-transform-es2015-modules-umd": "^6.24.0", 40 | "babel-plugin-transform-inline-environment-variables": "0.0.2", 41 | "babel-plugin-transform-react-constant-elements": "^6.23.0", 42 | "babel-plugin-transform-react-inline-elements": "^6.22.0", 43 | "babel-plugin-transform-react-remove-prop-types": "^0.3.2", 44 | "babel-plugin-transform-runtime": "^6.23.0", 45 | "babel-polyfill": "^6.23.0", 46 | "babel-preset-es2015": "^6.24.0", 47 | "babel-preset-react": "^6.23.0", 48 | "babel-preset-stage-0": "^6.22.0", 49 | "compression-webpack-plugin": "^0.3.2", 50 | "cross-env": "^4.0.0", 51 | "css-loader": "^0.28.0", 52 | "del-cli": "^0.2.1", 53 | "eslint": "^4.18.2", 54 | "eslint-config-airbnb": "^14.1.0", 55 | "eslint-config-airbnb-base": "^11.1.2", 56 | "eslint-loader": "^1.7.1", 57 | "eslint-plugin-babel": "^4.1.1", 58 | "eslint-plugin-import": "^2.2.0", 59 | "eslint-plugin-jsx-a11y": "^4.0.0", 60 | "eslint-plugin-react": "^6.10.3", 61 | "extract-text-webpack-plugin": "^2.1.0", 62 | "html-webpack-plugin": "^2.28.0", 63 | "node-sass": "^4.9.0", 64 | "path": "^0.12.7", 65 | "postcss-loader": "^1.3.3", 66 | "react": "^15.4.2", 67 | "react-dom": "^15.4.2", 68 | "sass-loader": "^6.0.3", 69 | "style-loader": "^0.16.1", 70 | "webpack": "^2.3.2", 71 | "webpack-cli": "^3.3.10", 72 | "webpack-dev-server": "^2.4.2" 73 | }, 74 | "dependencies": { 75 | "classnames": "^2.2.5", 76 | "prop-types": "^15.6.0" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/Col.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import cx from 'classnames'; 4 | import s from './style/index.scss'; 5 | 6 | const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); 7 | const numberOrObject = PropTypes.oneOfType([PropTypes.number, PropTypes.object]); 8 | 9 | function Col({ span, offset, className, children, prefix = 'rct-grid-col', order, ...others }) { 10 | let sizeClasses = {}; 11 | ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => { 12 | if (others[size]) { 13 | let sizeParams = {}; 14 | if (typeof others[size] === 'number') { 15 | sizeParams.span = others[size]; 16 | } else if (typeof others[size] === 'object') { 17 | sizeParams = others[size] || {}; 18 | } 19 | delete others[size]; // To prevent a "Warning: Unknown props.." 20 | sizeClasses = Object.assign({}, sizeClasses, { 21 | [s[`${prefix}-${size}-${sizeParams.span}`]]: typeof sizeParams.span !== 'undefined', 22 | [s[`${prefix}-${size}-offset-${sizeParams.offset}`]]: sizeParams.offset || sizeParams.offset === 0, 23 | [s[`${prefix}-${size}-order-${sizeParams.order}`]]: sizeParams.order || sizeParams.order === 0 24 | }); 25 | } 26 | }); 27 | const classes = cx({ 28 | [s[`${prefix}-${span}`]]: span !== undefined, 29 | [s[`${prefix}-offset-${offset}`]]: offset, 30 | [s[`${prefix}-order-${order}`]]: order 31 | }, className, sizeClasses); 32 | 33 | return
{children}
; 34 | } 35 | 36 | Col.defaultProps = { 37 | offset: 0 38 | }; 39 | 40 | Col.propTypes = { 41 | className: PropTypes.string, 42 | children: PropTypes.node, 43 | span: stringOrNumber, 44 | xs: numberOrObject, 45 | sm: numberOrObject, 46 | md: numberOrObject, 47 | lg: numberOrObject, 48 | xl: numberOrObject, 49 | offset: stringOrNumber, 50 | prefix: PropTypes.string, 51 | order: stringOrNumber 52 | }; 53 | 54 | export default Col; 55 | -------------------------------------------------------------------------------- /src/Row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import cx from 'classnames'; 4 | import s from './style/index.scss'; 5 | 6 | export default class Row extends React.Component { 7 | static defaultProps = { 8 | gutter: 0, 9 | justify: 'start', 10 | align: 'top' 11 | }; 12 | 13 | static propTypes = { 14 | align: PropTypes.string, 15 | justify: PropTypes.string, 16 | className: PropTypes.string, 17 | children: PropTypes.node, 18 | gutter: PropTypes.number, 19 | prefix: PropTypes.string, 20 | style: PropTypes.object 21 | }; 22 | 23 | render() { 24 | const { justify, align, className, gutter, style, children, 25 | prefix = 'rct-grid-row', ...others } = this.props; 26 | const classes = cx(s[`${prefix}`], { 27 | [s[`${prefix}-${justify}`]]: justify, 28 | [s[`${prefix}-${align}`]]: align, 29 | }, className); 30 | const rowStyle = gutter > 0 ? Object.assign({}, { 31 | marginLeft: gutter / -2, 32 | marginRight: gutter / -2, 33 | }, style) : style; 34 | const cols = React.Children.map(children, (col) => { 35 | if (!col) { 36 | return null; 37 | } 38 | if (col.props && gutter > 0) { 39 | return React.cloneElement(col, { 40 | style: Object.assign({}, { 41 | paddingLeft: gutter / 2, 42 | paddingRight: gutter / 2, 43 | }, col.props.style), 44 | }); 45 | } 46 | return col; 47 | }); 48 | 49 | return
{cols}
; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Col from './Col'; 2 | import Row from './Row'; 3 | 4 | export { Col, Row }; 5 | -------------------------------------------------------------------------------- /src/style/default.scss: -------------------------------------------------------------------------------- 1 | $prefix: 'rct-grid'; 2 | $grid-columns: 12; 3 | 4 | // Extra small screen / phone 5 | $xs: 480px; 6 | // Small screen / tablet 7 | $sm: 768px; 8 | // Medium screen / desktop 9 | $md: 992px; 10 | // Large screen / wide desktop 11 | $lg: 1200px; 12 | // Extra Large screen / full hd 13 | $xl: 1600px; 14 | -------------------------------------------------------------------------------- /src/style/index.scss: -------------------------------------------------------------------------------- 1 | @import "./default.scss"; 2 | @import "./mixins.scss"; 3 | 4 | .#{$prefix}-row { 5 | box-sizing: border-box; 6 | flex-direction: row; 7 | flex-wrap: wrap; 8 | @include border-box(); 9 | } 10 | 11 | .#{$prefix}-row, .#{$prefix}-row:before, .#{$prefix}-row:after { 12 | display: flex; 13 | } 14 | 15 | .#{$prefix}-row-start { 16 | justify-content: flex-start; 17 | } 18 | 19 | .#{$prefix}-row-center { 20 | justify-content: center; 21 | } 22 | 23 | .#{$prefix}-row-end { 24 | justify-content: flex-end; 25 | } 26 | 27 | .#{$prefix}-row-space-between { 28 | justify-content: space-between; 29 | } 30 | 31 | .#{$prefix}-row-space-around { 32 | justify-content: space-around; 33 | } 34 | 35 | .#{$prefix}-row-top { 36 | align-items: flex-start; 37 | } 38 | 39 | .#{$prefix}-row-middle { 40 | align-items: center; 41 | } 42 | 43 | .#{$prefix}-row-bottom { 44 | align-items: flex-end; 45 | } 46 | 47 | .#{$prefix}-row-stretch { 48 | align-items: stretch; 49 | } 50 | 51 | @include create-grid-columns(); 52 | @include create-grid(); 53 | @include create-grid('-xs'); 54 | 55 | @media (min-width: $sm) { 56 | @include create-grid('-sm'); 57 | } 58 | 59 | @media (min-width: $md) { 60 | @include create-grid('-md'); 61 | } 62 | 63 | @media (min-width: $lg) { 64 | @include create-grid('-lg'); 65 | } 66 | 67 | @media (min-width: $xl) { 68 | @include create-grid('-xl'); 69 | } 70 | -------------------------------------------------------------------------------- /src/style/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin border-box() { 2 | *, :after, :before { 3 | box-sizing: border-box; 4 | } 5 | } 6 | 7 | @mixin create-grid-columns() { 8 | @for $i from 1 through $grid-columns { 9 | $items: ".#{$prefix}-col-#{$i}", ".#{$prefix}-col-xs-#{$i}", ".#{$prefix}-col-sm-#{$i}", ".#{$prefix}-col-md-#{$i}", ".#{$prefix}-col-lg-#{$i}"; 10 | @each $item in $items { 11 | #{$item} { 12 | position: relative; 13 | min-height: 1px; 14 | } 15 | } 16 | } 17 | } 18 | 19 | @mixin float-grid-columns($class) { 20 | @for $i from 1 through $grid-columns { 21 | .#{$prefix}-col#{$class}-#{$i} { 22 | float: left; 23 | flex: 0 0 auto; 24 | } 25 | } 26 | } 27 | 28 | @mixin create-grid-options($class) { 29 | @for $i from 0 through $grid-columns { 30 | @if $i == 0 { 31 | .#{$prefix}-col#{$class}-#{$i} { 32 | display: none; 33 | } 34 | .#{$prefix}-col#{$class}-offset-#{$i} { 35 | margin-left: 0; 36 | } 37 | .#{$prefix}-col#{$class}-order-#{$i} { 38 | order: 0; 39 | } 40 | } @else { 41 | .#{$prefix}-col#{$class}-#{$i} { 42 | display: block; 43 | width: percentage($i / $grid-columns); 44 | } 45 | .#{$prefix}-col#{$class}-offset-#{$i} { 46 | margin-left: percentage($i / $grid-columns); 47 | } 48 | .#{$prefix}-col#{$class}-order-#{$i} { 49 | order: $i; 50 | } 51 | } 52 | } 53 | } 54 | 55 | @mixin create-grid($class: "") { 56 | @include float-grid-columns($class); 57 | @include create-grid-options($class); 58 | } 59 | --------------------------------------------------------------------------------