`griddy`: Generate CSS grid layouts FAST

📐📏 Tired of manually splitting <div>'s? Try griddy.

Setup

Build from source

git clone https://github.com/Mckinsey666/griddy.git
cd griddy
pip install .

From PyPI

pip install griddy

Usage

Defining a `layout.json` file

A layout .json file should follow the following syntax:

The json file contains one json object.
First level of the json object should have key root.
For (key, value) pairs in other levels, the keys should abide by the following conventions:
- percentage: percentage of the children <div>'s height or width with respect to its parent's.
- layout type: defines a column layout or a row layout (column layouts will be inside a flex container). If r is specified, the percentage is the relative height; if c is specified, the percentage is the relative width.
- id (optional): used to prevent duplicate keys in the json object.

key = percentage + layout type + id

For keys in the same level, their layout types should be the same.
For keys in the same level, it is better that their percentage add up to 100.
If no more <div>s are to be splitted, set the value of the key to be null.

Sample `layout.json` file

{
    "root":{
        "70r":{
            "10c": null,
            "20c": {
                "10r": null,
                "90r": null
            },
            "70c": {
                "50r1": null,
                "50r2": {
                    "20c1": null,
                    "20c2": null,
                    "60c": null
                }
            }
        },
        "30r": {
            "80c": null,
            "20c": null
        }
    }
}

Play with more examples in the examples directory.

Sample `index.html` output

Here <div> blocks are randomly colored for the sake of clarity with the --colored flag specified.

Plain borders surrounding blocks with --border flag specified.

The above picture shows how the json file syntax associates with actual layout generated.

Generate `html` and `css`

griddy <name of the layout file>

An index.html file and a styles.css file will be generated in the current working directory. You can simply plugin the generated grid <div> (top-level <div> of class root with style width: 100%; height:100%) anywhere in your existing code.

Command-line arguments

Arguments	Type	Explanation
--colored	bool	Whether to color the `<div>` blocks
--border	bool	`<div>` blocks comes with borders
--show	bool	Show generated grid in browser

For example,

griddy layout.json --border --show

bchao1/griddy

griddy: Generate CSS grid layouts FAST