Skip to content

pixelass/minus-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Minus minus grid

A grid powered by CSS custom properties

npm Coveralls branch bitHound Overall Score Standard Version Commitizen friendly
Travis David David
GitHub license GitHub issues GitHub forks GitHub stars

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
}