Graceful Grids JS

Creates responsive media queries with minimal JavaScript. Great for React components.

Installation

npm

$ npm install --save graceful-grids-js

Yarn

$ yarn add graceful-grids-js

Usage

Examples are in React, but any type of JavaScript application can be used.

Traditional 12 Column Grid

import grid from 'graceful-grids-js'
import React from 'react'
 
 
const styles = grid({
    '400px': '4 8 8 4',
    '800px': '3 3 3 3'
})
 
export default class extends React.Component {
    render(){
        return (
            <div>
                {/* Takes up 4 columns on medium, then 3 on large */}
                <div>Col 1</div>
                {/* Takes up 8 columns on medium, then 3 on large */}
                <div>Col 2</div>
                {/* Takes up 8 columns on medium, then 3 on large */}
                <div>Col 3</div>
                {/* Takes up 4 columns on medium, then 3 on large */}
                <div>Col 4</div>
                <style jsx>{ styles }</style>
            </div>
        )
    }
}

Block Grids

If you want to evenly space all elements in a grid.

import grid from 'graceful-grids-js'
import React from 'react'
 
const styles = grid({
    '400px': 4,
    '800px': 6
})
 
export default class extends React.Component {
    render(){
        return (
            {/* Row will have 1 div per row on small, 4 on medium, and 6 on large & up */}
            <div>
                <div>Col 1</div>
                <div>Col 2</div>
                <div>Col 3</div>
                <div>Col 4</div>
                <div>Col 5</div>
                <div>Col 6</div>
                <div>Col 7</div>
                <div>Col 8</div>
                <style jsx>{ styles }</style>
            </div>
        )
    }
}

Todo

• Options