Minus minus grid
A grid powered by CSS custom properties
Demo
Minus minus grid
"minus minus grid" uses the power of css variables a.k.a. custom properties. The results is a lightweight grid with a few lines of boilerplate and full flexibility.
Grid, Row, Column
This grid uses three different CSS selectors.
.grid
.row
.column
Endless nesting, same logic
A grid can be nested endlessly while preserving the column size
Custom naming
Generate a file with your own naming convention, using the SCSS files
Advanced config
Does not work in Safari!
/* always 1/2 of its parent */--) / 2); /* always 3/4 of its parent */--) / 4); /* change per breakpoint */--) / 4);--) / 2);--) / 3);
Set size as css variables
Since the cascade can/will break the logic, the variables are defined as inline styles. This allows a true scope and easy config.
Max values:
--
Default value:
--)--)
CSS context
each row opens a new grid. The column count is the same as the size of the parent column.
Pug (Jade) example
.grid // 12 columns .column(style={'--viewport-small': 4}) .row // 4 columns .column(style={'--viewport-small': 'var(--column-count)'})``` #### Use with React.js While React.js does not support inline CSS variables there is a workaround.You can see a working demo [on Codepen](https://codepen.io/pixelass/pen/bwkOpB) ```jsximport React, {Component, PropTypes} from 'react'import classNames from 'classnames'import styles from 'minus-grid' class Column extends Component { constructor (props) { super(props) } componentDidMount () { this.setProps() } componentDidUpdate () { this.setProps() } setProps () { const {m, l, xl} = this.props this.root.style.setProperty('--viewport-small', m) this.root.style.setProperty('--viewport-medium', l) this.root.style.setProperty('--viewport-large', xl) } render () { return ( <div className={classNames(styles.column, this.props.className)} ref={x => { this.root = x }}> {this.props.children} </div> ) }} Column.propTypes = { m: PropTypes.oneOfType([PropTypes.number,PropTypes.string]), l: PropTypes.oneOfType([PropTypes.number,PropTypes.string]), xl: PropTypes.oneOfType([PropTypes.number,PropTypes.string]), className: PropTypes.string, children: PropTypes.node}```