Skip to content

Commit d914fa4

Browse files
committed
Added examples to README
1 parent fb225ff commit d914fa4

File tree

8 files changed

+285
-112
lines changed

8 files changed

+285
-112
lines changed

README.md

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,11 @@ $ hpm install hyperlayout
1313
```
1414

1515
## Usage
16+
To get started, setup a layout inside of `package.json`.
1617

17-
To run `hyperlayout`
18+
_Alternatively you can define it inside of `.hyperlayout` or `~/.hyperlayout`._
1819

19-
```sh
20-
$ hyperlayout
21-
```
22-
`package.json`
20+
> `package.json`
2321
```json
2422
{
2523
"name": "example-1",
@@ -32,23 +30,83 @@ $ hyperlayout
3230
}
3331
```
3432

35-
![Example 1](assets/example1.svg)
33+
To apply the layout, simply run `hyperlayout` in the same directory.
34+
35+
```sh
36+
$ hyperlayout
37+
```
38+
#### Result
39+
![Demo 1](assets/demo1.svg)
40+
41+
---
3642

37-
`package.json`
43+
### Advanced example
44+
This example shows the capabilities of `hyperlayout`.
45+
46+
> `package.json`
3847
```json
3948
{
40-
"name": "my-example",
49+
"name": "example-2",
4150
"scripts": {
4251
"watch": "gulp watch",
4352
"serve": "nodemon build/index"
4453
},
45-
"hyperlayout": [
46-
[[
47-
"npm run watch",
48-
["npm run serve", "http://localhost:3000"]
49-
]],
50-
"mongod"
51-
]
54+
"hyperlayout": {
55+
"start": [
56+
[[
57+
"npm run watch",
58+
["npm run serve", "http://localhost:3000"]
59+
]],
60+
"mongod"
61+
],
62+
"helloworld": {
63+
"entry": "horizontal",
64+
"layout": [
65+
"echo 'Hello'",
66+
"echo 'World'"
67+
]
68+
}
69+
}
5270
}
5371
```
54-
![Example 2](assets/example2.svg)
72+
73+
Since there are two layouts defined here, you have to tell `hyperlayout` which one you want to use, by suppling it as parameter.
74+
75+
```sh
76+
$ hyperlayout start
77+
```
78+
#### Result
79+
![Demo 2](assets/demo2.svg)
80+
81+
## Examples
82+
![Example 1](assets/example1.svg) **Tabs**
83+
```json
84+
["1", "2"]
85+
```
86+
---
87+
![Example 2](assets/example2.svg) **Horizontal Panes**
88+
```json
89+
[["1", "2"]]
90+
```
91+
or
92+
```json
93+
{
94+
"entry": "horizontal",
95+
"layout": ["1", "2"]
96+
}
97+
```
98+
---
99+
![Example 3](assets/example3.svg) **Vertical Panes**
100+
```json
101+
[[["1", "2"]]]
102+
```
103+
or
104+
```json
105+
{
106+
"entry": "vertical",
107+
"layout": ["1", "2"]
108+
}
109+
```
110+
111+
## License
112+
`hyperlayout` was written by [Timo Lins](https://timo.sh).

art/examples.sketch

-152 KB
Binary file not shown.

art/hyperlayout.sketch

192 KB
Binary file not shown.

assets/demo1.svg

Lines changed: 48 additions & 0 deletions
Loading

assets/demo2.svg

Lines changed: 90 additions & 0 deletions
Loading

assets/example1.svg

Lines changed: 26 additions & 27 deletions
Loading

0 commit comments

Comments
 (0)