@tobi2409/layout 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -0
- package/package.json +44 -0
- package/src/layout.css +24 -0
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Layout
|
|
2
|
+
|
|
3
|
+
A small Delphi-like layout system based on CSS Grid.
|
|
4
|
+
|
|
5
|
+
The idea: a container with `.frame` defines fixed areas such as `top`, `left`, `client`, or `bottom`. Child elements are assigned to an area through the CSS custom property `--align`.
|
|
6
|
+
|
|
7
|
+
## Goal
|
|
8
|
+
|
|
9
|
+
The system is meant to enable simple, readable user interfaces without scattering many utility classes throughout the HTML.
|
|
10
|
+
|
|
11
|
+
Example:
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<div class="frame">
|
|
15
|
+
<header style="--align: top;">Header</header>
|
|
16
|
+
<nav style="--align: left;">Navigation</nav>
|
|
17
|
+
<main style="--align: client;">Inhalt</main>
|
|
18
|
+
<aside style="--align: right;">Inspector</aside>
|
|
19
|
+
<footer style="--align: bottom;">Footer</footer>
|
|
20
|
+
</div>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Include `layout.css`:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<link rel="stylesheet" href="layout.css">
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Then create a container with `.frame` and place its direct child elements using `--align`.
|
|
32
|
+
|
|
33
|
+
## Supported align values
|
|
34
|
+
|
|
35
|
+
### Horizontal / vertical
|
|
36
|
+
|
|
37
|
+
- `top`
|
|
38
|
+
- `top-2`
|
|
39
|
+
- `top-3`
|
|
40
|
+
- `top-4`
|
|
41
|
+
- `top-5`
|
|
42
|
+
- `left`
|
|
43
|
+
- `left-2`
|
|
44
|
+
- `left-3`
|
|
45
|
+
- `left-4`
|
|
46
|
+
- `left-5`
|
|
47
|
+
- `client`
|
|
48
|
+
- `right`
|
|
49
|
+
- `right-2`
|
|
50
|
+
- `right-3`
|
|
51
|
+
- `right-4`
|
|
52
|
+
- `right-5`
|
|
53
|
+
- `bottom`
|
|
54
|
+
- `bottom-2`
|
|
55
|
+
- `bottom-3`
|
|
56
|
+
- `bottom-4`
|
|
57
|
+
- `bottom-5`
|
|
58
|
+
|
|
59
|
+
`client` is the flexible main area and uses the remaining space.
|
|
60
|
+
|
|
61
|
+
## Basic principle
|
|
62
|
+
|
|
63
|
+
- `top...` and `bottom...` occupy full rows.
|
|
64
|
+
- `left...` and `right...` occupy columns next to the content.
|
|
65
|
+
- `client` is placed in the center.
|
|
66
|
+
- Multiple `.frame` containers can be nested.
|
|
67
|
+
|
|
68
|
+
## Nesting example
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<div class="frame" style="height: 300px;">
|
|
72
|
+
<header style="--align: top;">Header</header>
|
|
73
|
+
|
|
74
|
+
<main class="frame" style="--align: client;">
|
|
75
|
+
<div style="--align: top;">Toolbar</div>
|
|
76
|
+
<section style="--align: client;">Inhalt</section>
|
|
77
|
+
<div style="--align: bottom;">Status</div>
|
|
78
|
+
</main>
|
|
79
|
+
</div>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## When this works well
|
|
83
|
+
|
|
84
|
+
Suitable for:
|
|
85
|
+
|
|
86
|
+
- app layouts
|
|
87
|
+
- admin interfaces
|
|
88
|
+
- classic desktop-like UI structures
|
|
89
|
+
- clearly separated areas such as header, sidebar, content, and footer
|
|
90
|
+
|
|
91
|
+
## When to combine it with something else
|
|
92
|
+
|
|
93
|
+
For dynamic lists or freely flowing rows, `.frame` is not the best level of abstraction. In those cases, a combination is usually better:
|
|
94
|
+
|
|
95
|
+
- `.frame` for the coarse page structure
|
|
96
|
+
- Flexbox for lists, toolbars, or rows
|
|
97
|
+
- `position: absolute` for overlays or freely positioned elements
|
|
98
|
+
|
|
99
|
+
## Possible future direction
|
|
100
|
+
|
|
101
|
+
It might be worth considering a switch from CSS Grid to Flexbox as the underlying model:
|
|
102
|
+
|
|
103
|
+
- `top` / `bottom` → `flex-direction: column` (children stack vertically)
|
|
104
|
+
- `left` / `right` → `flex-direction: row` (children stack horizontally)
|
|
105
|
+
|
|
106
|
+
This would naturally handle multiple children with the same alignment without overlapping, and without needing levels like `top-2` or `left-3`. Dynamic lists and reordering would also become easier. The trade-off is that the current single-class approach with `--align` would need to be rethought, since Flexbox distributes all children at once rather than placing them into named areas.
|
|
107
|
+
|
|
108
|
+
## Limitations
|
|
109
|
+
|
|
110
|
+
- Multiple elements with exactly the same `--align` overlap.
|
|
111
|
+
- That is why there are levels such as `top-2` or `left-3`.
|
|
112
|
+
- The number of levels is currently intentionally limited to 5 per direction.
|
|
113
|
+
|
|
114
|
+
## Files
|
|
115
|
+
|
|
116
|
+
- [layout.css](layout.css): core of the layout system
|
|
117
|
+
- [demo.html](demo.html): simple demo example
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tobi2409/layout",
|
|
3
|
+
"version": "0.5.0",
|
|
4
|
+
"description": "Tiny CSS frame layout using named grid areas and the --align property",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"main": "src/layout.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"src",
|
|
9
|
+
"README.md"
|
|
10
|
+
],
|
|
11
|
+
"style": "src/layout.css",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"css",
|
|
14
|
+
"css-library",
|
|
15
|
+
"layout",
|
|
16
|
+
"grid",
|
|
17
|
+
"css-grid",
|
|
18
|
+
"grid-layout",
|
|
19
|
+
"frame",
|
|
20
|
+
"frame-layout",
|
|
21
|
+
"page-layout",
|
|
22
|
+
"application-layout",
|
|
23
|
+
"dashboard-layout",
|
|
24
|
+
"shell-layout",
|
|
25
|
+
"ui",
|
|
26
|
+
"frontend",
|
|
27
|
+
"responsive",
|
|
28
|
+
"align",
|
|
29
|
+
"grid-area",
|
|
30
|
+
"named-areas",
|
|
31
|
+
"client-area",
|
|
32
|
+
"top",
|
|
33
|
+
"bottom",
|
|
34
|
+
"left",
|
|
35
|
+
"right",
|
|
36
|
+
"utility-css",
|
|
37
|
+
"zero-js",
|
|
38
|
+
"lightweight",
|
|
39
|
+
"minimal"
|
|
40
|
+
],
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
}
|
|
44
|
+
}
|
package/src/layout.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.frame {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-template-rows: auto auto auto auto auto 1fr auto auto auto auto auto; /* top / client / bottom */
|
|
5
|
+
grid-template-columns: auto auto auto auto auto 1fr auto auto auto auto auto; /* left / client / right */
|
|
6
|
+
grid-template-areas:
|
|
7
|
+
"top top top top top top top top top top top"
|
|
8
|
+
"top-2 top-2 top-2 top-2 top-2 top-2 top-2 top-2 top-2 top-2 top-2"
|
|
9
|
+
"top-3 top-3 top-3 top-3 top-3 top-3 top-3 top-3 top-3 top-3 top-3"
|
|
10
|
+
"top-4 top-4 top-4 top-4 top-4 top-4 top-4 top-4 top-4 top-4 top-4"
|
|
11
|
+
"top-5 top-5 top-5 top-5 top-5 top-5 top-5 top-5 top-5 top-5 top-5"
|
|
12
|
+
"left left-2 left-3 left-4 left-5 client right right-2 right-3 right-4 right-5"
|
|
13
|
+
"bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom"
|
|
14
|
+
"bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2 bottom-2"
|
|
15
|
+
"bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3 bottom-3"
|
|
16
|
+
"bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4 bottom-4"
|
|
17
|
+
"bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5 bottom-5";
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.frame > * {
|
|
21
|
+
grid-area: var(--align, auto);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* soll sich Element frei im Parent bewegen, einfach absolute Positionierung */
|