layout-style-css 2.0.0 → 2.1.1

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.
Files changed (62) hide show
  1. package/CHANGELOG.md +79 -50
  2. package/CONTRIBUTING.md +43 -43
  3. package/LICENSE +21 -21
  4. package/README.md +19 -14
  5. package/SECURITY.md +39 -39
  6. package/demo/assets/apple-touch-icon.svg +7 -7
  7. package/demo/assets/favicon.svg +7 -7
  8. package/demo/browserconfig.xml +9 -9
  9. package/demo/demo.js +128 -43
  10. package/demo/index.html +20 -18
  11. package/demo/robots.txt +4 -4
  12. package/demo/site.webmanifest +23 -23
  13. package/demo/sitemap.xml +9 -9
  14. package/dist/integrations/ui-style-kit.css +162 -162
  15. package/dist/layout-style-css.css +147 -104
  16. package/dist/layout-style-css.min.css +1 -1
  17. package/dist/legacy.css +137 -102
  18. package/dist/personalities/bauhaus.css +10 -7
  19. package/dist/personalities/bento.css +15 -12
  20. package/dist/personalities/brutalism.css +8 -5
  21. package/dist/personalities/cyberpunk.css +8 -5
  22. package/dist/personalities/f-pattern.css +14 -11
  23. package/dist/personalities/maximalist.css +17 -14
  24. package/dist/personalities/minimal-saas.css +8 -6
  25. package/dist/personalities/mondrian.css +10 -7
  26. package/dist/personalities/neumorphism.css +2 -2
  27. package/dist/personalities/retro-glass.css +10 -7
  28. package/dist/personalities/retrofuturism.css +8 -5
  29. package/dist/personalities/split-screen.css +1 -1
  30. package/dist/personalities/synthwave.css +2 -2
  31. package/dist/personalities/tactile.css +1 -1
  32. package/dist/personalities/y2k.css +8 -5
  33. package/dist/personalities/z-pattern.css +15 -12
  34. package/dist/recipes.css +10 -2
  35. package/docs/wiki/Demo-And-GitHub-Pages.md +1 -1
  36. package/docs/wiki/Getting-Started.md +1 -1
  37. package/docs/wiki/Home.md +4 -4
  38. package/docs/wiki/Installation-And-CDN.md +8 -9
  39. package/docs/wiki/Layout-Recipes.md +1 -1
  40. package/docs/wiki/Layout-Styles.md +1 -1
  41. package/docs/wiki/Migrating-To-2.0.md +7 -7
  42. package/docs/wiki/Release-And-Publishing.md +10 -8
  43. package/docs/wiki/UI-Style-Kit-Compatibility.md +8 -9
  44. package/package.json +78 -78
  45. package/styles/integrations/ui-style-kit.css +162 -162
  46. package/styles/personalities/bauhaus.css +10 -7
  47. package/styles/personalities/bento.css +15 -12
  48. package/styles/personalities/brutalism.css +8 -5
  49. package/styles/personalities/cyberpunk.css +8 -5
  50. package/styles/personalities/f-pattern.css +14 -11
  51. package/styles/personalities/maximalist.css +17 -14
  52. package/styles/personalities/minimal-saas.css +8 -6
  53. package/styles/personalities/mondrian.css +10 -7
  54. package/styles/personalities/neumorphism.css +2 -2
  55. package/styles/personalities/retro-glass.css +10 -7
  56. package/styles/personalities/retrofuturism.css +8 -5
  57. package/styles/personalities/split-screen.css +1 -1
  58. package/styles/personalities/synthwave.css +2 -2
  59. package/styles/personalities/tactile.css +1 -1
  60. package/styles/personalities/y2k.css +8 -5
  61. package/styles/personalities/z-pattern.css +15 -12
  62. package/styles/recipes.css +10 -2
package/styles/personalities/f-pattern.css CHANGED
@@ -15,14 +15,26 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="f-pattern"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
22
22
  }
23
23
  }
24
24
 
25
- @container ly-personality (min-width: 56rem) {
25
+ @container (min-width: 56rem) {
26
+ :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
27
+ grid-column: span 2;
28
+ }
29
+
30
+ :where(.ly-root[data-ly-layout="f-pattern"])
31
+ :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
32
+ grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
33
+ }
34
+ }
35
+
36
+ /* The three-track shell waits for a locally feasible allocation. */
37
+ @container (min-width: 64rem) {
26
38
  :where(.ly-root[data-ly-layout="f-pattern"])
27
39
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
28
40
  grid-template-areas:
@@ -35,14 +47,5 @@
35
47
  minmax(0, 1.35fr)
36
48
  minmax(min(100%, 18rem), 0.65fr);
37
49
  }
38
-
39
- :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
40
- grid-column: span 2;
41
- }
42
-
43
- :where(.ly-root[data-ly-layout="f-pattern"])
44
- :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
45
- grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
46
- }
47
50
  }
48
51
  }
package/styles/personalities/maximalist.css CHANGED
@@ -14,14 +14,29 @@
14
14
  min-inline-size: 0;
15
15
  }
16
16
 
17
- @container ly-personality (min-width: 48rem) {
17
+ @container (min-width: 48rem) {
18
18
  :where(.ly-root[data-ly-layout="maximalist"])
19
19
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
20
20
  grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
21
21
  }
22
22
  }
23
23
 
24
- @container ly-personality (min-width: 56rem) {
24
+ @container (min-width: 56rem) {
25
+ :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
26
+ grid-column: span 3;
27
+ grid-row: span 2;
28
+ }
29
+
30
+ :where(.ly-root[data-ly-layout="maximalist"])
31
+ :where(.ly-gallery, [data-ly-recipe="gallery"])
32
+ > :nth-child(5n + 1) {
33
+ grid-column: span 2;
34
+ grid-row: span 2;
35
+ }
36
+ }
37
+
38
+ /* The four-track shell waits for a locally feasible allocation. */
39
+ @container (min-width: 64rem) {
25
40
  :where(.ly-root[data-ly-layout="maximalist"])
26
41
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
27
42
  grid-template-areas:
@@ -35,17 +50,5 @@
35
50
  minmax(min(100%, 15rem), 0.32fr)
36
51
  minmax(min(100%, 18rem), 0.38fr);
37
52
  }
38
-
39
- :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
40
- grid-column: span 3;
41
- grid-row: span 2;
42
- }
43
-
44
- :where(.ly-root[data-ly-layout="maximalist"])
45
- :where(.ly-gallery, [data-ly-recipe="gallery"])
46
- > :nth-child(5n + 1) {
47
- grid-column: span 2;
48
- grid-row: span 2;
49
- }
50
53
  }
51
54
  }
package/styles/personalities/minimal-saas.css CHANGED
@@ -15,8 +15,14 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- /* Named areas rearrange the shell without changing its mobile DOM or focus order. */
19
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
+ :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
20
+ grid-column: span 2;
21
+ }
22
+ }
23
+
24
+ /* The three-track shell waits for a locally feasible allocation. */
25
+ @container (min-width: 64rem) {
20
26
  :where(.ly-root[data-ly-layout="minimal-saas"])
21
27
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
22
28
  grid-template-areas:
@@ -29,9 +35,5 @@
29
35
  minmax(0, 1fr)
30
36
  minmax(min(100%, 16rem), 0.28fr);
31
37
  }
32
-
33
- :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
34
- grid-column: span 2;
35
- }
36
38
  }
37
39
  }
package/styles/personalities/mondrian.css CHANGED
@@ -15,14 +15,22 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="mondrian"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
22
22
  }
23
23
  }
24
24
 
25
- @container ly-personality (min-width: 52rem) {
25
+ @container (min-width: 52rem) {
26
+ :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) {
27
+ grid-column: span 2;
28
+ grid-row: span 2;
29
+ }
30
+ }
31
+
32
+ /* The three-track shell waits for a locally feasible allocation. */
33
+ @container (min-width: 64rem) {
26
34
  :where(.ly-root[data-ly-layout="mondrian"])
27
35
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
28
36
  grid-template-areas:
@@ -35,10 +43,5 @@
35
43
  minmax(0, 1.45fr)
36
44
  minmax(min(100%, 18rem), 0.55fr);
37
45
  }
38
-
39
- :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) {
40
- grid-column: span 2;
41
- grid-row: span 2;
42
- }
43
46
  }
44
47
  }
package/styles/personalities/neumorphism.css CHANGED
@@ -15,14 +15,14 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="neumorphism"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
22
22
  }
23
23
  }
24
24
 
25
- @container ly-personality (min-width: 52rem) {
25
+ @container (min-width: 52rem) {
26
26
  :where(.ly-root[data-ly-layout="neumorphism"])
27
27
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
28
28
  grid-template-areas:
package/styles/personalities/retro-glass.css CHANGED
@@ -15,14 +15,22 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="retro-glass"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
22
22
  }
23
23
  }
24
24
 
25
- @container ly-personality (min-width: 56rem) {
25
+ @container (min-width: 56rem) {
26
+ :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
27
+ grid-column: span 2;
28
+ grid-row: span 2;
29
+ }
30
+ }
31
+
32
+ /* The three-track shell waits for a locally feasible allocation. */
33
+ @container (min-width: 64rem) {
26
34
  :where(.ly-root[data-ly-layout="retro-glass"])
27
35
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
28
36
  grid-template-areas:
@@ -35,10 +43,5 @@
35
43
  minmax(0, 0.75fr)
36
44
  minmax(min(100%, 18rem), 0.32fr);
37
45
  }
38
-
39
- :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
40
- grid-column: span 2;
41
- grid-row: span 2;
42
- }
43
46
  }
44
47
  }
package/styles/personalities/retrofuturism.css CHANGED
@@ -15,7 +15,14 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
+ :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
20
+ grid-column: span 2;
21
+ }
22
+ }
23
+
24
+ /* The three-track shell waits for a locally feasible allocation. */
25
+ @container (min-width: 64rem) {
19
26
  :where(.ly-root[data-ly-layout="retrofuturism"])
20
27
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
28
  grid-template-areas:
@@ -28,9 +35,5 @@
28
35
  minmax(0, 1fr)
29
36
  minmax(min(100%, 17rem), 0.3fr);
30
37
  }
31
-
32
- :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
33
- grid-column: span 2;
34
- }
35
38
  }
36
39
  }
package/styles/personalities/split-screen.css CHANGED
@@ -15,7 +15,7 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="split-screen"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-areas:
package/styles/personalities/synthwave.css CHANGED
@@ -16,14 +16,14 @@
16
16
  min-inline-size: 0;
17
17
  }
18
18
 
19
- @container ly-personality (min-width: 48rem) {
19
+ @container (min-width: 48rem) {
20
20
  :where(.ly-root[data-ly-layout="synthwave"])
21
21
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
22
22
  grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
23
23
  }
24
24
  }
25
25
 
26
- @container ly-personality (min-width: 64rem) {
26
+ @container (min-width: 64rem) {
27
27
  :where(.ly-root[data-ly-layout="synthwave"])
28
28
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
29
29
  grid-template-areas:
package/styles/personalities/tactile.css CHANGED
@@ -15,7 +15,7 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="tactile"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-areas:
package/styles/personalities/y2k.css CHANGED
@@ -15,7 +15,14 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
+ :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
20
+ grid-column: span 3;
21
+ }
22
+ }
23
+
24
+ /* The three-track shell waits for a locally feasible allocation. */
25
+ @container (min-width: 64rem) {
19
26
  :where(.ly-root[data-ly-layout="y2k"])
20
27
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
28
  grid-template-areas:
@@ -28,9 +35,5 @@
28
35
  minmax(0, 1fr)
29
36
  minmax(min(100%, 16rem), 0.28fr);
30
37
  }
31
-
32
- :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
33
- grid-column: span 3;
34
- }
35
38
  }
36
39
  }
package/styles/personalities/z-pattern.css CHANGED
@@ -15,14 +15,27 @@
15
15
  min-inline-size: 0;
16
16
  }
17
17
 
18
- @container ly-personality (min-width: 48rem) {
18
+ @container (min-width: 48rem) {
19
19
  :where(.ly-root[data-ly-layout="z-pattern"])
20
20
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
21
21
  grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
22
22
  }
23
23
  }
24
24
 
25
- @container ly-personality (min-width: 60rem) {
25
+ @container (min-width: 60rem) {
26
+ :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
27
+ grid-column: span 2;
28
+ align-self: end;
29
+ }
30
+
31
+ :where(.ly-root[data-ly-layout="z-pattern"])
32
+ :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
33
+ grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
34
+ }
35
+ }
36
+
37
+ /* The three-track shell waits for a locally feasible allocation. */
38
+ @container (min-width: 64rem) {
26
39
  :where(.ly-root[data-ly-layout="z-pattern"])
27
40
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
28
41
  grid-template-areas:
@@ -35,15 +48,5 @@
35
48
  minmax(min(100%, 19rem), 0.55fr)
36
49
  minmax(min(100%, 17rem), 0.3fr);
37
50
  }
38
-
39
- :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
40
- grid-column: span 2;
41
- align-self: end;
42
- }
43
-
44
- :where(.ly-root[data-ly-layout="z-pattern"])
45
- :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
46
- grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
47
- }
48
51
  }
49
52
  }
package/styles/recipes.css CHANGED
@@ -239,8 +239,7 @@
239
239
  minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
240
240
  }
241
241
 
242
- :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
243
- :where(.ly-docs, [data-ly-recipe="docs"]) {
242
+ :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
244
243
  grid-template-areas:
245
244
  "nav header header"
246
245
  "nav main aside"
@@ -251,6 +250,15 @@
251
250
  minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
252
251
  }
253
252
 
253
+ :where(.ly-docs, [data-ly-recipe="docs"]) {
254
+ grid-template-areas:
255
+ "nav header"
256
+ "nav main"
257
+ "nav aside"
258
+ "nav footer";
259
+ grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
260
+ }
261
+
254
262
  :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
255
263
  grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr);
256
264
  }