1.2.0 • Published 8 years ago
minus-grid v1.2.0
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 */
--viewport-small: calc(var(--column-count) / 2);
/* always 3/4 of its parent */
--viewport-small: calc(var(--column-count) / 4 * 3);
/* change per breakpoint */
--viewport-small: calc(var(--column-count) / 4 * 3);
--viewport-medium: calc(var(--column-count) / 2);
--viewport-large: calc(var(--column-count) / 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:
--viewport-small: 4
--viewport-medium: 8
--viewport-large: 12
Default value:
--viewport-small: 1
--viewport-medium: var(--viewport-small)
--viewport-large: var(--viewport-medium)
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)
```jsx
import 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
}
```