Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bchao1/griddy

📐📏 Generate CSS grid layouts FAST.
https://github.com/bchao1/griddy

css flexbox grid-layout html javascript responsive

Last synced: about 1 month ago
JSON representation

📐📏 Generate CSS grid layouts FAST.

Host: GitHub
URL: https://github.com/bchao1/griddy
Owner: bchao1
License: mit
Created: 2019-07-10T16:16:51.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2019-07-11T12:27:14.000Z (over 5 years ago)
Last Synced: 2024-10-08T15:51:31.766Z (about 1 month ago)
Topics: css, flexbox, grid-layout, html, javascript, responsive
Language: Python
Homepage:
Size: 1.29 MB
Stars: 23
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# `griddy`: Generate CSS grid layouts FAST

> 📐📏 Tired of manually splitting `

`'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 `

`'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 `

`s are to be splitted, set the value of the key to be `null`.

#### Sample `layout.json` file
```json
{
"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 `

` 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
```
An `index.html` file and a `styles.css` file will be generated in the current working directory. You can simply plugin the generated grid `

` (top-level `

` 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 `

` blocks|
|**--border**|bool|`

For example,
```
griddy layout.json --border --show
```