layout-style-css 1.0.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.
Files changed (42) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +447 -0
  3. package/demo/assets/apple-touch-icon.svg +7 -0
  4. package/demo/assets/favicon.svg +7 -0
  5. package/demo/assets/social-card.svg +17 -0
  6. package/demo/browserconfig.xml +9 -0
  7. package/demo/index.html +700 -0
  8. package/demo/robots.txt +4 -0
  9. package/demo/site.webmanifest +23 -0
  10. package/demo/sitemap.xml +9 -0
  11. package/dist/layout-all-with-ui-kit-and-interactive-surface.css +3 -0
  12. package/dist/layout-all-with-ui-kit.css +2 -0
  13. package/dist/layout-all.css +13 -0
  14. package/dist/layout-base.css +472 -0
  15. package/dist/layout-style-bauhaus.css +70 -0
  16. package/dist/layout-style-bento.css +76 -0
  17. package/dist/layout-style-brutalism.css +70 -0
  18. package/dist/layout-style-css.css +1367 -0
  19. package/dist/layout-style-css.min.css +1 -0
  20. package/dist/layout-style-cyberpunk.css +70 -0
  21. package/dist/layout-style-maximalist.css +93 -0
  22. package/dist/layout-style-minimal-saas.css +67 -0
  23. package/dist/layout-style-neumorphism.css +72 -0
  24. package/dist/layout-style-retro-glass.css +82 -0
  25. package/dist/layout-style-retrofuturism.css +71 -0
  26. package/dist/layout-style-tactile.css +70 -0
  27. package/dist/layout-style-y2k.css +72 -0
  28. package/dist/layout-ui-style-kit-bridge.css +55 -0
  29. package/package.json +97 -0
  30. package/styles/layout-base.css +472 -0
  31. package/styles/layout-style-bauhaus.css +70 -0
  32. package/styles/layout-style-bento.css +76 -0
  33. package/styles/layout-style-brutalism.css +70 -0
  34. package/styles/layout-style-cyberpunk.css +70 -0
  35. package/styles/layout-style-maximalist.css +93 -0
  36. package/styles/layout-style-minimal-saas.css +67 -0
  37. package/styles/layout-style-neumorphism.css +72 -0
  38. package/styles/layout-style-retro-glass.css +82 -0
  39. package/styles/layout-style-retrofuturism.css +71 -0
  40. package/styles/layout-style-tactile.css +70 -0
  41. package/styles/layout-style-y2k.css +72 -0
  42. package/styles/layout-ui-style-kit-bridge.css +55 -0
package/dist/layout-style-brutalism.css ADDED
@@ -0,0 +1,70 @@
1
+ /*
2
+ Layout style: brutalism.
3
+ Full-bleed slab shell with abrupt section breaks and compressed rails. Visual
4
+ identity remains owned by ui-style-kit-css.
5
+ */
6
+
7
+ @layer ly.styles.brutalism {
8
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) {
9
+ --ly-container-max: 100vw;
10
+ --ly-page-padding-inline: clamp(0.75rem, 3vw, 3rem);
11
+ --ly-section-padding-block: clamp(2rem, 6vw, 5rem);
12
+ --ly-sidebar-width: clamp(12rem, 15vw, 16rem);
13
+ --ly-grid-min: 12rem;
14
+ --ly-gap: clamp(0.75rem, 2vw, 1.5rem);
15
+ --ly-grid-gap: var(--ly-gap);
16
+ --ly-stack-gap: clamp(0.75rem, 2vw, 1.5rem);
17
+ }
18
+
19
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-main {
20
+ padding-block: 0;
21
+ }
22
+
23
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-container,
24
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-wrapper {
25
+ width: min(100%, var(--ly-container-max));
26
+ }
27
+
28
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-section {
29
+ padding-block: var(--ly-section-padding-block);
30
+ }
31
+
32
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-grid--auto {
33
+ grid-auto-rows: minmax(7rem, auto);
34
+ }
35
+
36
+ @media (min-width: 48rem) {
37
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-shell {
38
+ grid-template-areas:
39
+ "header header"
40
+ "main sidebar";
41
+ grid-template-columns: minmax(0, 1fr) minmax(min(100%, 12rem), 0.22fr);
42
+ }
43
+
44
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-app-sidebar {
45
+ display: block;
46
+ position: sticky;
47
+ top: 0;
48
+ height: 100svh;
49
+ overflow: auto;
50
+ }
51
+
52
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-sidebar-layout {
53
+ grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 12rem), 0.45fr);
54
+ }
55
+
56
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-split {
57
+ grid-template-columns: minmax(0, 1.7fr) minmax(min(100%, 12rem), 0.3fr);
58
+ }
59
+
60
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-panes--two {
61
+ grid-template-columns: minmax(min(100%, 12rem), 0.35fr) minmax(0, 1.65fr);
62
+ }
63
+ }
64
+
65
+ @media (min-width: 80rem) {
66
+ :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-panes--three {
67
+ grid-template-columns: minmax(min(100%, 11rem), 0.28fr) minmax(0, 1.42fr) minmax(min(100%, 14rem), 0.4fr);
68
+ }
69
+ }
70
+ }