graceful-grids-js

    1.0.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i graceful-grids-js

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • amadoa
    • dalewray
    • codevelopit
    • mastaaaron
    • escasports
    • tbaustin
    • ken85rose