├── .npmignore ├── .gitignore ├── src ├── index.js ├── Grid.jsx ├── __tests__ │ ├── Grid.jsx │ ├── Col.jsx │ └── Row.jsx ├── Row.jsx └── Col.js ├── circle.yml ├── .babelrc ├── .editorconfig ├── .eslintrc ├── less ├── variables.less └── flexgrid.less ├── README.md └── package.json /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | .travis.yml 4 | .gitignore 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /lib/ 2 | /node_modules/ 3 | /.idea 4 | *.DS_Store 5 | *.log 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export Grid from './Grid'; 2 | export Row from './Row'; 3 | export Col from './Col'; 4 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 4.1.0 4 | general: 5 | branches: 6 | ignore: 7 | - gh-pages 8 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "transform-export-extensions", 8 | "transform-object-rest-spread" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "es6": true, 7 | "jest": true 8 | }, 9 | "extends": "airbnb", 10 | "rules": { 11 | "no-unused-vars": 0, 12 | "react/require-default-props": 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /less/variables.less: -------------------------------------------------------------------------------- 1 | @gutter-width: 1rem; 2 | @outer-margin: 2rem; 3 | @gutter-compensation: @gutter-width / -2; 4 | @half-gutter-width: @gutter-width / 2; 5 | @screen-xs-min: 30em; 6 | @screen-sm-min: 48em; 7 | @screen-md-min: 62em; 8 | @screen-lg-min: 75em; 9 | @container-sm: 45rem + @gutter-width; 10 | @container-md: 60rem + @gutter-width; 11 | @container-lg: 70rem + @gutter-width; 12 | -------------------------------------------------------------------------------- /src/Grid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Grid = ({ children, fluid, className, ...other }) => { 6 | const containerClass = fluid ? 'container-fluid' : 'container'; 7 | const classes = classNames(className, containerClass); 8 | 9 | return ( 10 |
11 | {children} 12 |
13 | ); 14 | }; 15 | 16 | Grid.propTypes = { 17 | children: PropTypes.node, 18 | className: PropTypes.string, 19 | fluid: PropTypes.bool, 20 | }; 21 | 22 | export default Grid; 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Flexgrid 2 | ============== 3 | 4 | [![Circle CI](https://circleci.com/gh/nkt/react-flexgrid.svg?style=svg)](https://circleci.com/gh/nkt/react-flexgrid) 5 | 6 | Installation 7 | ------------ 8 | 9 | ``` 10 | npm install react-flexgrid 11 | ``` 12 | 13 | Usage 14 | ----- 15 | 16 | Require `lib/flexgrid.css`, or `less/flexgrid.less` into your project. 17 | 18 | ```jsx 19 | const {Grid, Row, Col} = require('react-flexgrid'); 20 | 21 | const App = React.createClass({ 22 | render() { 23 | return ( 24 | 25 | 26 | Hello, world! 27 | 28 | 29 | ); 30 | } 31 | }); 32 | ``` 33 | 34 | License 35 | ------- 36 | MIT 37 | -------------------------------------------------------------------------------- /src/__tests__/Grid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Grid } from '../'; 5 | 6 | describe('Grid', () => { 7 | it('Should add "container" class', () => { 8 | const enzymeWrapper = shallow(); 9 | 10 | expect(enzymeWrapper.hasClass('container')).toBeTruthy(); 11 | }); 12 | 13 | it('Should not replace class', () => { 14 | const enzymeWrapper = shallow(); 15 | 16 | expect(enzymeWrapper.hasClass('foo')).toBeTruthy(); 17 | expect(enzymeWrapper.hasClass('container')).toBeTruthy(); 18 | }); 19 | 20 | it('Should add "container-fluid" class if "fluid" property is true', () => { 21 | const enzymeWrapper = shallow(); 22 | 23 | expect(enzymeWrapper.hasClass('container-fluid')).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/Row.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const modificatorKeys = ['start', 'center', 'end', 'top', 'middle', 'bottom', 'around', 'between']; 6 | 7 | const Row = ({ reverse, className, children, ...other }) => { 8 | const modificators = ['row']; 9 | const passingProps = {}; 10 | Object.keys(other).forEach((key) => { 11 | if (modificatorKeys.includes(key)) { 12 | const value = other[key]; 13 | if (value) { 14 | modificators.push(`${key}-${value}`); 15 | } 16 | } else { 17 | passingProps[key] = other[key]; 18 | } 19 | }); 20 | 21 | if (reverse) { 22 | modificators.push('reverse'); 23 | } 24 | 25 | const classes = classNames(className, modificators); 26 | 27 | return ( 28 |
29 | {children} 30 |
31 | ); 32 | }; 33 | 34 | const ModificatorType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']); 35 | 36 | Row.propTypes = { 37 | children: PropTypes.node, 38 | className: PropTypes.string, 39 | reverse: PropTypes.bool, 40 | start: ModificatorType, 41 | center: ModificatorType, 42 | end: ModificatorType, 43 | top: ModificatorType, 44 | middle: ModificatorType, 45 | bottom: ModificatorType, 46 | around: ModificatorType, 47 | between: ModificatorType, 48 | }; 49 | 50 | export default Row; 51 | -------------------------------------------------------------------------------- /src/__tests__/Col.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Col } from '../'; 5 | 6 | describe('Col', () => { 7 | it('Should add classes equals to props', () => { 8 | const enzymeWrapper = shallow(); 9 | 10 | expect(enzymeWrapper.hasClass('col-xs-12')).toBeTruthy(); 11 | expect(enzymeWrapper.hasClass('col-sm-8')).toBeTruthy(); 12 | expect(enzymeWrapper.hasClass('col-md-6')).toBeTruthy(); 13 | expect(enzymeWrapper.hasClass('col-lg-4')).toBeTruthy(); 14 | expect(enzymeWrapper.hasClass('first-xs')).toBeTruthy(); 15 | expect(enzymeWrapper.hasClass('last-lg')).toBeTruthy(); 16 | }); 17 | 18 | it('Should add "reverse" class if "reverse" property is true', () => { 19 | const enzymeWrapper = shallow(); 20 | 21 | expect(enzymeWrapper.hasClass('reverse')).toBeTruthy(); 22 | }); 23 | 24 | it('Should not replace class', () => { 25 | const enzymeWrapper = shallow(); 26 | 27 | expect(enzymeWrapper.hasClass('foo')).toBeTruthy(); 28 | expect(enzymeWrapper.hasClass('col-md-3')).toBeTruthy(); 29 | }); 30 | 31 | it('Should allow zero offset', () => { 32 | const enzymeWrapper = shallow(); 33 | 34 | expect(enzymeWrapper.hasClass('col-xs-11')).toBeTruthy(); 35 | expect(enzymeWrapper.hasClass('col-sm-offset-0')).toBeTruthy(); 36 | expect(enzymeWrapper.hasClass('col-xs-offset-1')).toBeTruthy(); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /src/Col.js: -------------------------------------------------------------------------------- 1 | import React, { createElement } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const classMap = { 5 | xs: 'col-xs-', 6 | sm: 'col-sm-', 7 | md: 'col-md-', 8 | lg: 'col-lg-', 9 | xsOffset: 'col-xs-offset-', 10 | smOffset: 'col-sm-offset-', 11 | mdOffset: 'col-md-offset-', 12 | lgOffset: 'col-lg-offset-', 13 | first: 'first-', 14 | last: 'last-', 15 | }; 16 | 17 | const Col = ({ children, reverse, className, ...other }) => { 18 | const classes = []; 19 | 20 | if (className) { 21 | classes.push(className); 22 | } 23 | 24 | if (reverse) { 25 | classes.push('reverse'); 26 | } 27 | 28 | const passingProps = {}; 29 | Object.keys(other).forEach((key) => { 30 | if (classMap[key]) { 31 | const value = other[key]; 32 | if (typeof value !== 'undefined') { 33 | classes.push(`${classMap[key]}${value}`); 34 | } 35 | } else { 36 | passingProps[key] = other[key]; 37 | } 38 | }); 39 | 40 | return createElement('div', Object.assign({}, passingProps, { 41 | className: classes.join(' '), 42 | }), children); 43 | }; 44 | 45 | Col.propTypes = { 46 | children: PropTypes.node, 47 | className: PropTypes.string, 48 | xs: PropTypes.number, 49 | sm: PropTypes.number, 50 | md: PropTypes.number, 51 | lg: PropTypes.number, 52 | xsOffset: PropTypes.number, 53 | smOffset: PropTypes.number, 54 | mdOffset: PropTypes.number, 55 | lgOffset: PropTypes.number, 56 | reverse: PropTypes.bool, 57 | first: PropTypes.string, 58 | last: PropTypes.string, 59 | }; 60 | 61 | export default Col; 62 | -------------------------------------------------------------------------------- /src/__tests__/Row.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Row } from '../'; 5 | 6 | describe('Row', () => { 7 | it('Should add "row" class', () => { 8 | const enzymeWrapper = shallow(); 9 | 10 | expect(enzymeWrapper.hasClass('row')).toBeTruthy(); 11 | }); 12 | 13 | it('Should add "reverse" class if "reverse" property is true', () => { 14 | const enzymeWrapper = shallow(); 15 | 16 | expect(enzymeWrapper.hasClass('reverse')).toBeTruthy(); 17 | }); 18 | 19 | it('Should not replace class', () => { 20 | const enzymeWrapper = shallow(); 21 | 22 | expect(enzymeWrapper.hasClass('foo')).toBeTruthy(); 23 | expect(enzymeWrapper.hasClass('row')).toBeTruthy(); 24 | }); 25 | 26 | it('Should add modificators', () => { 27 | const enzymeWrapper = shallow( 28 | ); 38 | 39 | expect(enzymeWrapper.hasClass('row')).toBeTruthy(); 40 | expect(enzymeWrapper.hasClass('start-xs')).toBeTruthy(); 41 | expect(enzymeWrapper.hasClass('center-sm')).toBeTruthy(); 42 | expect(enzymeWrapper.hasClass('end-md')).toBeTruthy(); 43 | expect(enzymeWrapper.hasClass('top-lg')).toBeTruthy(); 44 | expect(enzymeWrapper.hasClass('middle-xs')).toBeTruthy(); 45 | expect(enzymeWrapper.hasClass('bottom-sm')).toBeTruthy(); 46 | expect(enzymeWrapper.hasClass('around-md')).toBeTruthy(); 47 | expect(enzymeWrapper.hasClass('between-lg')).toBeTruthy(); 48 | }); 49 | }); 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-flexgrid", 3 | "version": "1.0.0", 4 | "description": "Flexbox grid for react apps", 5 | "keywords": [ 6 | "browser", 7 | "react", 8 | "react-component", 9 | "flexbox", 10 | "grid", 11 | "css", 12 | "flexboxgrid" 13 | ], 14 | "author": "Nikita Gusakov ", 15 | "license": "MIT", 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/nkt/react-flexgrid.git" 19 | }, 20 | "homepage": "https://github.com/nkt/react-flexgrid", 21 | "bugs": { 22 | "url": "https://github.com/nkt/react-flexgrid/issues" 23 | }, 24 | "main": "lib/index.js", 25 | "peerDependencies": { 26 | "classnames": ">=2.1.2", 27 | "prop-types": "^15.5.8", 28 | "react": ">=0.14.0" 29 | }, 30 | "devDependencies": { 31 | "babel-cli": "^6.24.1", 32 | "babel-core": "^6.24.1", 33 | "babel-eslint": "^7.2.3", 34 | "babel-jest": "^19.0.0", 35 | "babel-plugin-transform-export-extensions": "^6.22.0", 36 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 37 | "babel-preset-es2015": "^6.24.1", 38 | "babel-preset-react": "^6.24.1", 39 | "classnames": ">=2.1.2", 40 | "enzyme": "^2.8.2", 41 | "eslint": "^3.19.0", 42 | "eslint-config-airbnb": "^14.1.0", 43 | "eslint-plugin-import": "^2.2.0", 44 | "eslint-plugin-jsx-a11y": "^4.0.0", 45 | "eslint-plugin-react": "^6.10.3", 46 | "jest": "^19.0.2", 47 | "less": "^2.5.1", 48 | "less-plugin-autoprefix": "^1.4.2", 49 | "prop-types": "^15.5.8", 50 | "react": ">=0.14.0", 51 | "react-dom": "^15.5.4", 52 | "react-test-renderer": "^15.5.4" 53 | }, 54 | "scripts": { 55 | "pretest": "eslint src/", 56 | "test": "jest src/", 57 | "prepublish": "npm run build", 58 | "prebuild": "rm -rf lib", 59 | "build": "npm run build-js && npm run build-css", 60 | "build-js": "babel -d lib/ src/", 61 | "build-css": "lessc less/flexgrid.less --autoprefix > lib/flexgrid.css" 62 | }, 63 | "jest": { 64 | "transform": { 65 | ".*": "/node_modules/babel-jest" 66 | }, 67 | "moduleFileExtensions": [ 68 | "jsx", 69 | "js", 70 | "json" 71 | ] 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /less/flexgrid.less: -------------------------------------------------------------------------------- 1 | // Ported version of flexboxgrid 2 | // https://github.com/kristoferjoseph/flexboxgrid 3 | // 4 | // Copyright 2013 Kristofer Joseph 5 | // 6 | // Licensed under the Apache License, Version 2.0 (the "License"); 7 | // you may not use this file except in compliance with the License. 8 | // You may obtain a copy of the License at 9 | // 10 | // http://www.apache.org/licenses/LICENSE-2.0 11 | // 12 | // Unless required by applicable law or agreed to in writing, software 13 | // distributed under the License is distributed on an "AS IS" BASIS, 14 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | // See the License for the specific language governing permissions and 16 | // limitations under the License. 17 | 18 | @import "variables.less"; 19 | 20 | .container-fluid { 21 | margin-right: auto; 22 | margin-left: auto; 23 | padding-right: @outer-margin; 24 | padding-left: @outer-margin; 25 | } 26 | 27 | .row { 28 | box-sizing: border-box; 29 | display: flex; 30 | flex: 0 1 auto; 31 | flex-direction: row; 32 | flex-wrap: wrap; 33 | margin-right: @gutter-compensation; 34 | margin-left: @gutter-compensation; 35 | } 36 | 37 | .row.reverse { 38 | flex-direction: row-reverse; 39 | } 40 | 41 | .col.reverse { 42 | flex-direction: column-reverse; 43 | } 44 | 45 | .col-xs, 46 | .col-xs-1, 47 | .col-xs-2, 48 | .col-xs-3, 49 | .col-xs-4, 50 | .col-xs-5, 51 | .col-xs-6, 52 | .col-xs-7, 53 | .col-xs-8, 54 | .col-xs-9, 55 | .col-xs-10, 56 | .col-xs-11, 57 | .col-xs-12 { 58 | box-sizing: border-box; 59 | flex: 0 0 auto; 60 | padding-right: @half-gutter-width; 61 | padding-left: @half-gutter-width; 62 | } 63 | 64 | .col-xs { 65 | flex-grow: 1; 66 | flex-basis: 0; 67 | max-width: 100%; 68 | } 69 | 70 | .col-xs-1 { 71 | flex-basis: 8.333%; 72 | max-width: 8.333%; 73 | } 74 | 75 | .col-xs-2 { 76 | flex-basis: 16.667%; 77 | max-width: 16.667%; 78 | } 79 | 80 | .col-xs-3 { 81 | flex-basis: 25%; 82 | max-width: 25%; 83 | } 84 | 85 | .col-xs-4 { 86 | flex-basis: 33.333%; 87 | max-width: 33.333%; 88 | } 89 | 90 | .col-xs-5 { 91 | flex-basis: 41.667%; 92 | max-width: 41.667%; 93 | } 94 | 95 | .col-xs-6 { 96 | flex-basis: 50%; 97 | max-width: 50%; 98 | } 99 | 100 | .col-xs-7 { 101 | flex-basis: 58.333%; 102 | max-width: 58.333%; 103 | } 104 | 105 | .col-xs-8 { 106 | flex-basis: 66.667%; 107 | max-width: 66.667%; 108 | } 109 | 110 | .col-xs-9 { 111 | flex-basis: 75%; 112 | max-width: 75%; 113 | } 114 | 115 | .col-xs-10 { 116 | flex-basis: 83.333%; 117 | max-width: 83.333%; 118 | } 119 | 120 | .col-xs-11 { 121 | flex-basis: 91.667%; 122 | max-width: 91.667%; 123 | } 124 | 125 | .col-xs-12 { 126 | flex-basis: 100%; 127 | max-width: 100%; 128 | } 129 | 130 | .col-xs-offset-1 { 131 | margin-left: 8.333%; 132 | } 133 | 134 | .col-xs-offset-2 { 135 | margin-left: 16.667%; 136 | } 137 | 138 | .col-xs-offset-3 { 139 | margin-left: 25%; 140 | } 141 | 142 | .col-xs-offset-4 { 143 | margin-left: 33.333%; 144 | } 145 | 146 | .col-xs-offset-5 { 147 | margin-left: 41.667%; 148 | } 149 | 150 | .col-xs-offset-6 { 151 | margin-left: 50%; 152 | } 153 | 154 | .col-xs-offset-7 { 155 | margin-left: 58.333%; 156 | } 157 | 158 | .col-xs-offset-8 { 159 | margin-left: 66.667%; 160 | } 161 | 162 | .col-xs-offset-9 { 163 | margin-left: 75%; 164 | } 165 | 166 | .col-xs-offset-10 { 167 | margin-left: 83.333%; 168 | } 169 | 170 | .col-xs-offset-11 { 171 | margin-left: 91.667%; 172 | } 173 | 174 | .start-xs { 175 | justify-content: flex-start; 176 | text-align: start; 177 | } 178 | 179 | .center-xs { 180 | justify-content: center; 181 | text-align: center; 182 | } 183 | 184 | .end-xs { 185 | justify-content: flex-end; 186 | text-align: end; 187 | } 188 | 189 | .top-xs { 190 | align-items: flex-start; 191 | } 192 | 193 | .middle-xs { 194 | align-items: center; 195 | } 196 | 197 | .bottom-xs { 198 | align-items: flex-end; 199 | } 200 | 201 | .around-xs { 202 | justify-content: space-around; 203 | } 204 | 205 | .between-xs { 206 | justify-content: space-between; 207 | } 208 | 209 | .first-xs { 210 | order: -1; 211 | } 212 | 213 | .last-xs { 214 | order: 1; 215 | } 216 | 217 | @media only screen and (min-width: @screen-sm-min) { 218 | .container { 219 | width: @container-sm; 220 | } 221 | 222 | .col-sm, 223 | .col-sm-1, 224 | .col-sm-2, 225 | .col-sm-3, 226 | .col-sm-4, 227 | .col-sm-5, 228 | .col-sm-6, 229 | .col-sm-7, 230 | .col-sm-8, 231 | .col-sm-9, 232 | .col-sm-10, 233 | .col-sm-11, 234 | .col-sm-12 { 235 | box-sizing: border-box; 236 | flex: 0 0 auto; 237 | padding-right: @half-gutter-width; 238 | padding-left: @half-gutter-width; 239 | } 240 | 241 | .col-sm { 242 | flex-grow: 1; 243 | flex-basis: 0; 244 | max-width: 100%; 245 | } 246 | 247 | .col-sm-1 { 248 | flex-basis: 8.333%; 249 | max-width: 8.333%; 250 | } 251 | 252 | .col-sm-2 { 253 | flex-basis: 16.667%; 254 | max-width: 16.667%; 255 | } 256 | 257 | .col-sm-3 { 258 | flex-basis: 25%; 259 | max-width: 25%; 260 | } 261 | 262 | .col-sm-4 { 263 | flex-basis: 33.333%; 264 | max-width: 33.333%; 265 | } 266 | 267 | .col-sm-5 { 268 | flex-basis: 41.667%; 269 | max-width: 41.667%; 270 | } 271 | 272 | .col-sm-6 { 273 | flex-basis: 50%; 274 | max-width: 50%; 275 | } 276 | 277 | .col-sm-7 { 278 | flex-basis: 58.333%; 279 | max-width: 58.333%; 280 | } 281 | 282 | .col-sm-8 { 283 | flex-basis: 66.667%; 284 | max-width: 66.667%; 285 | } 286 | 287 | .col-sm-9 { 288 | flex-basis: 75%; 289 | max-width: 75%; 290 | } 291 | 292 | .col-sm-10 { 293 | flex-basis: 83.333%; 294 | max-width: 83.333%; 295 | } 296 | 297 | .col-sm-11 { 298 | flex-basis: 91.667%; 299 | max-width: 91.667%; 300 | } 301 | 302 | .col-sm-12 { 303 | flex-basis: 100%; 304 | max-width: 100%; 305 | } 306 | 307 | .col-sm-offset-1 { 308 | margin-left: 8.333%; 309 | } 310 | 311 | .col-sm-offset-2 { 312 | margin-left: 16.667%; 313 | } 314 | 315 | .col-sm-offset-3 { 316 | margin-left: 25%; 317 | } 318 | 319 | .col-sm-offset-4 { 320 | margin-left: 33.333%; 321 | } 322 | 323 | .col-sm-offset-5 { 324 | margin-left: 41.667%; 325 | } 326 | 327 | .col-sm-offset-6 { 328 | margin-left: 50%; 329 | } 330 | 331 | .col-sm-offset-7 { 332 | margin-left: 58.333%; 333 | } 334 | 335 | .col-sm-offset-8 { 336 | margin-left: 66.667%; 337 | } 338 | 339 | .col-sm-offset-9 { 340 | margin-left: 75%; 341 | } 342 | 343 | .col-sm-offset-10 { 344 | margin-left: 83.333%; 345 | } 346 | 347 | .col-sm-offset-11 { 348 | margin-left: 91.667%; 349 | } 350 | 351 | .start-sm { 352 | justify-content: flex-start; 353 | text-align: start; 354 | } 355 | 356 | .center-sm { 357 | justify-content: center; 358 | text-align: center; 359 | } 360 | 361 | .end-sm { 362 | justify-content: flex-end; 363 | text-align: end; 364 | } 365 | 366 | .top-sm { 367 | align-items: flex-start; 368 | } 369 | 370 | .middle-sm { 371 | align-items: center; 372 | } 373 | 374 | .bottom-sm { 375 | align-items: flex-end; 376 | } 377 | 378 | .around-sm { 379 | justify-content: space-around; 380 | } 381 | 382 | .between-sm { 383 | justify-content: space-between; 384 | } 385 | 386 | .first-sm { 387 | order: -1; 388 | } 389 | 390 | .last-sm { 391 | order: 1; 392 | } 393 | } 394 | 395 | @media only screen and (min-width: @screen-md-min) { 396 | .container { 397 | width: @container-md; 398 | } 399 | 400 | .col-md, 401 | .col-md-1, 402 | .col-md-2, 403 | .col-md-3, 404 | .col-md-4, 405 | .col-md-5, 406 | .col-md-6, 407 | .col-md-7, 408 | .col-md-8, 409 | .col-md-9, 410 | .col-md-10, 411 | .col-md-11, 412 | .col-md-12 { 413 | box-sizing: border-box; 414 | flex: 0 0 auto; 415 | padding-right: @half-gutter-width; 416 | padding-left: @half-gutter-width; 417 | } 418 | 419 | .col-md { 420 | flex-grow: 1; 421 | flex-basis: 0; 422 | max-width: 100%; 423 | } 424 | 425 | .col-md-1 { 426 | flex-basis: 8.333%; 427 | max-width: 8.333%; 428 | } 429 | 430 | .col-md-2 { 431 | flex-basis: 16.667%; 432 | max-width: 16.667%; 433 | } 434 | 435 | .col-md-3 { 436 | flex-basis: 25%; 437 | max-width: 25%; 438 | } 439 | 440 | .col-md-4 { 441 | flex-basis: 33.333%; 442 | max-width: 33.333%; 443 | } 444 | 445 | .col-md-5 { 446 | flex-basis: 41.667%; 447 | max-width: 41.667%; 448 | } 449 | 450 | .col-md-6 { 451 | flex-basis: 50%; 452 | max-width: 50%; 453 | } 454 | 455 | .col-md-7 { 456 | flex-basis: 58.333%; 457 | max-width: 58.333%; 458 | } 459 | 460 | .col-md-8 { 461 | flex-basis: 66.667%; 462 | max-width: 66.667%; 463 | } 464 | 465 | .col-md-9 { 466 | flex-basis: 75%; 467 | max-width: 75%; 468 | } 469 | 470 | .col-md-10 { 471 | flex-basis: 83.333%; 472 | max-width: 83.333%; 473 | } 474 | 475 | .col-md-11 { 476 | flex-basis: 91.667%; 477 | max-width: 91.667%; 478 | } 479 | 480 | .col-md-12 { 481 | flex-basis: 100%; 482 | max-width: 100%; 483 | } 484 | 485 | .col-md-offset-1 { 486 | margin-left: 8.333%; 487 | } 488 | 489 | .col-md-offset-2 { 490 | margin-left: 16.667%; 491 | } 492 | 493 | .col-md-offset-3 { 494 | margin-left: 25%; 495 | } 496 | 497 | .col-md-offset-4 { 498 | margin-left: 33.333%; 499 | } 500 | 501 | .col-md-offset-5 { 502 | margin-left: 41.667%; 503 | } 504 | 505 | .col-md-offset-6 { 506 | margin-left: 50%; 507 | } 508 | 509 | .col-md-offset-7 { 510 | margin-left: 58.333%; 511 | } 512 | 513 | .col-md-offset-8 { 514 | margin-left: 66.667%; 515 | } 516 | 517 | .col-md-offset-9 { 518 | margin-left: 75%; 519 | } 520 | 521 | .col-md-offset-10 { 522 | margin-left: 83.333%; 523 | } 524 | 525 | .col-md-offset-11 { 526 | margin-left: 91.667%; 527 | } 528 | 529 | .start-md { 530 | justify-content: flex-start; 531 | text-align: start; 532 | } 533 | 534 | .center-md { 535 | justify-content: center; 536 | text-align: center; 537 | } 538 | 539 | .end-md { 540 | justify-content: flex-end; 541 | text-align: end; 542 | } 543 | 544 | .top-md { 545 | align-items: flex-start; 546 | } 547 | 548 | .middle-md { 549 | align-items: center; 550 | } 551 | 552 | .bottom-md { 553 | align-items: flex-end; 554 | } 555 | 556 | .around-md { 557 | justify-content: space-around; 558 | } 559 | 560 | .between-md { 561 | justify-content: space-between; 562 | } 563 | 564 | .first-md { 565 | order: -1; 566 | } 567 | 568 | .last-md { 569 | order: 1; 570 | } 571 | } 572 | 573 | @media only screen and (min-width: @screen-lg-min) { 574 | .container { 575 | width: @container-lg; 576 | } 577 | 578 | .col-lg, 579 | .col-lg-1, 580 | .col-lg-2, 581 | .col-lg-3, 582 | .col-lg-4, 583 | .col-lg-5, 584 | .col-lg-6, 585 | .col-lg-7, 586 | .col-lg-8, 587 | .col-lg-9, 588 | .col-lg-10, 589 | .col-lg-11, 590 | .col-lg-12 { 591 | box-sizing: border-box; 592 | flex: 0 0 auto; 593 | padding-right: @half-gutter-width; 594 | padding-left: @half-gutter-width; 595 | } 596 | 597 | .col-lg { 598 | flex-grow: 1; 599 | flex-basis: 0; 600 | max-width: 100%; 601 | } 602 | 603 | .col-lg-1 { 604 | flex-basis: 8.333%; 605 | max-width: 8.333%; 606 | } 607 | 608 | .col-lg-2 { 609 | flex-basis: 16.667%; 610 | max-width: 16.667%; 611 | } 612 | 613 | .col-lg-3 { 614 | flex-basis: 25%; 615 | max-width: 25%; 616 | } 617 | 618 | .col-lg-4 { 619 | flex-basis: 33.333%; 620 | max-width: 33.333%; 621 | } 622 | 623 | .col-lg-5 { 624 | flex-basis: 41.667%; 625 | max-width: 41.667%; 626 | } 627 | 628 | .col-lg-6 { 629 | flex-basis: 50%; 630 | max-width: 50%; 631 | } 632 | 633 | .col-lg-7 { 634 | flex-basis: 58.333%; 635 | max-width: 58.333%; 636 | } 637 | 638 | .col-lg-8 { 639 | flex-basis: 66.667%; 640 | max-width: 66.667%; 641 | } 642 | 643 | .col-lg-9 { 644 | flex-basis: 75%; 645 | max-width: 75%; 646 | } 647 | 648 | .col-lg-10 { 649 | flex-basis: 83.333%; 650 | max-width: 83.333%; 651 | } 652 | 653 | .col-lg-11 { 654 | flex-basis: 91.667%; 655 | max-width: 91.667%; 656 | } 657 | 658 | .col-lg-12 { 659 | flex-basis: 100%; 660 | max-width: 100%; 661 | } 662 | 663 | .col-lg-offset-1 { 664 | margin-left: 8.333%; 665 | } 666 | 667 | .col-lg-offset-2 { 668 | margin-left: 16.667%; 669 | } 670 | 671 | .col-lg-offset-3 { 672 | margin-left: 25%; 673 | } 674 | 675 | .col-lg-offset-4 { 676 | margin-left: 33.333%; 677 | } 678 | 679 | .col-lg-offset-5 { 680 | margin-left: 41.667%; 681 | } 682 | 683 | .col-lg-offset-6 { 684 | margin-left: 50%; 685 | } 686 | 687 | .col-lg-offset-7 { 688 | margin-left: 58.333%; 689 | } 690 | 691 | .col-lg-offset-8 { 692 | margin-left: 66.667%; 693 | } 694 | 695 | .col-lg-offset-9 { 696 | margin-left: 75%; 697 | } 698 | 699 | .col-lg-offset-10 { 700 | margin-left: 83.333%; 701 | } 702 | 703 | .col-lg-offset-11 { 704 | margin-left: 91.667%; 705 | } 706 | 707 | .start-lg { 708 | justify-content: flex-start; 709 | text-align: start; 710 | } 711 | 712 | .center-lg { 713 | justify-content: center; 714 | text-align: center; 715 | } 716 | 717 | .end-lg { 718 | justify-content: flex-end; 719 | text-align: end; 720 | } 721 | 722 | .top-lg { 723 | align-items: flex-start; 724 | } 725 | 726 | .middle-lg { 727 | align-items: center; 728 | } 729 | 730 | .bottom-lg { 731 | align-items: flex-end; 732 | } 733 | 734 | .around-lg { 735 | justify-content: space-around; 736 | } 737 | 738 | .between-lg { 739 | justify-content: space-between; 740 | } 741 | 742 | .first-lg { 743 | order: -1; 744 | } 745 | 746 | .last-lg { 747 | order: 1; 748 | } 749 | } 750 | --------------------------------------------------------------------------------