graceful-grids-js v1.0.2

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
• Transpile with babel