Minus minus grid

A grid powered by CSS custom properties

Demo

Documentation
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

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
}