layout-style-css 1.0.0 → 1.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 (37) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/CONTRIBUTING.md +50 -0
  3. package/README.md +208 -19
  4. package/SECURITY.md +45 -0
  5. package/demo/assets/social-card.png +0 -0
  6. package/demo/index.html +358 -82
  7. package/dist/layout-all.css +5 -0
  8. package/dist/layout-base.css +67 -0
  9. package/dist/layout-style-css.css +561 -0
  10. package/dist/layout-style-css.min.css +1 -1
  11. package/dist/layout-style-f-pattern.css +76 -0
  12. package/dist/layout-style-mondrian.css +77 -0
  13. package/dist/layout-style-split-screen.css +62 -0
  14. package/dist/layout-style-synthwave.css +88 -0
  15. package/dist/layout-style-z-pattern.css +76 -0
  16. package/dist/layout-ui-style-kit-bridge.css +105 -0
  17. package/docs/wiki/Contributing.md +30 -0
  18. package/docs/wiki/Demo-And-GitHub-Pages.md +39 -0
  19. package/docs/wiki/Getting-Started.md +68 -0
  20. package/docs/wiki/Home.md +48 -0
  21. package/docs/wiki/Installation-And-CDN.md +58 -0
  22. package/docs/wiki/Layout-Primitives.md +57 -0
  23. package/docs/wiki/Layout-Recipes.md +80 -0
  24. package/docs/wiki/Layout-Styles.md +43 -0
  25. package/docs/wiki/Release-And-Publishing.md +69 -0
  26. package/docs/wiki/Security-And-Support.md +34 -0
  27. package/docs/wiki/UI-Style-Kit-Compatibility.md +54 -0
  28. package/docs/wiki/_Sidebar.md +14 -0
  29. package/package.json +12 -2
  30. package/styles/layout-base.css +67 -0
  31. package/styles/layout-style-f-pattern.css +76 -0
  32. package/styles/layout-style-mondrian.css +77 -0
  33. package/styles/layout-style-split-screen.css +62 -0
  34. package/styles/layout-style-synthwave.css +88 -0
  35. package/styles/layout-style-z-pattern.css +76 -0
  36. package/styles/layout-ui-style-kit-bridge.css +105 -0
  37. package/demo/assets/social-card.svg +0 -17
package/styles/layout-ui-style-kit-bridge.css CHANGED
@@ -52,4 +52,109 @@
52
52
  :where(.ly-root[data-ui="retro-glass"], [data-ui="retro-glass"] .ly-root) {
53
53
  --ly-ui-style-kit-bridge-style: retro-glass;
54
54
  }
55
+
56
+ :where(.saas-container, .bento-container, .max-container, .bau-container, .tactile-container, .neo-container, .retro-container, .brutal-container, .cyber-container, .y2k-container, .rg-container) {
57
+ /* UI Style Kit naming can opt into layout sizing without taking over visual paint. */
58
+ width: min(100% - var(--ly-page-padding-inline), var(--ly-container-max));
59
+ margin-inline: auto;
60
+ }
61
+
62
+ :where(.saas-section, .bento-section, .max-section, .bau-section, .tactile-section, .neo-section, .retro-section, .brutal-section, .cyber-section, .y2k-section, .rg-section) {
63
+ padding-block: var(--ly-section-padding-block);
64
+ }
65
+
66
+ :where(.saas-stack, .bento-stack, .max-stack, .bau-stack, .tactile-stack, .neo-stack, .retro-stack, .brutal-stack, .cyber-stack, .y2k-stack, .rg-stack) {
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: var(--ly-stack-gap);
70
+ }
71
+
72
+ :where(.saas-cluster, .bento-cluster, .max-cluster, .bau-cluster, .tactile-cluster, .neo-cluster, .retro-cluster, .brutal-cluster, .cyber-cluster, .y2k-cluster, .rg-cluster) {
73
+ display: flex;
74
+ flex-wrap: wrap;
75
+ align-items: center;
76
+ gap: var(--ly-cluster-gap);
77
+ }
78
+
79
+ :where(.saas-grid, .bento-grid, .max-grid, .bau-grid, .tactile-grid, .neo-grid, .retro-grid, .brutal-grid, .cyber-grid, .y2k-grid, .rg-grid) {
80
+ display: grid;
81
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
82
+ gap: var(--ly-grid-gap);
83
+ }
84
+
85
+ :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
86
+ display: grid;
87
+ grid-template-columns: 1fr;
88
+ gap: var(--ly-gap);
89
+ align-items: var(--ly-split-align, center);
90
+ }
91
+
92
+ :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) > * {
93
+ min-width: 0;
94
+ }
95
+
96
+ :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) {
97
+ display: flex;
98
+ flex-wrap: wrap;
99
+ align-items: center;
100
+ gap: var(--ly-cluster-gap);
101
+ }
102
+
103
+ :where(.saas-button-group, .bento-button-group, .max-button-group, .bau-button-group, .tactile-button-group, .neo-button-group, .retro-button-group, .brutal-button-group, .cyber-button-group, .y2k-button-group, .rg-button-group) > * {
104
+ flex: 0 1 auto;
105
+ min-width: min(100%, var(--ly-button-min, 8rem));
106
+ }
107
+
108
+ :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) {
109
+ display: grid;
110
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
111
+ gap: var(--ly-grid-gap);
112
+ }
113
+
114
+ :where(.saas-card-grid, .bento-card-grid, .max-card-grid, .bau-card-grid, .tactile-card-grid, .neo-card-grid, .retro-card-grid, .brutal-card-grid, .cyber-card-grid, .y2k-card-grid, .rg-card-grid) > * {
115
+ min-width: 0;
116
+ }
117
+
118
+ :where(.saas-card-sm, .bento-card-sm, .max-card-sm, .bau-card-sm, .tactile-card-sm, .neo-card-sm, .retro-card-sm, .brutal-card-sm, .cyber-card-sm, .y2k-card-sm, .rg-card-sm) {
119
+ min-block-size: var(--ly-card-size-sm);
120
+ }
121
+
122
+ :where(.saas-card-md, .bento-card-md, .max-card-md, .bau-card-md, .tactile-card-md, .neo-card-md, .retro-card-md, .brutal-card-md, .cyber-card-md, .y2k-card-md, .rg-card-md) {
123
+ min-block-size: var(--ly-card-size-md);
124
+ }
125
+
126
+ :where(.saas-card-lg, .bento-card-lg, .max-card-lg, .bau-card-lg, .tactile-card-lg, .neo-card-lg, .retro-card-lg, .brutal-card-lg, .cyber-card-lg, .y2k-card-lg, .rg-card-lg) {
127
+ min-block-size: var(--ly-card-size-lg);
128
+ }
129
+
130
+ :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) {
131
+ display: grid;
132
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
133
+ gap: var(--ly-grid-gap);
134
+ }
135
+
136
+ :where(.saas-gallery, .bento-gallery, .max-gallery, .bau-gallery, .tactile-gallery, .neo-gallery, .retro-gallery, .brutal-gallery, .cyber-gallery, .y2k-gallery, .rg-gallery) > * {
137
+ min-width: 0;
138
+ }
139
+
140
+ :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) {
141
+ display: grid;
142
+ grid-auto-flow: column;
143
+ grid-auto-columns: minmax(min(100%, var(--ly-carousel-item-min)), var(--ly-carousel-item-max));
144
+ gap: var(--ly-grid-gap);
145
+ overflow-x: auto;
146
+ overscroll-behavior-inline: contain;
147
+ scroll-snap-type: x proximity;
148
+ }
149
+
150
+ :where(.saas-carousel, .bento-carousel, .max-carousel, .bau-carousel, .tactile-carousel, .neo-carousel, .retro-carousel, .brutal-carousel, .cyber-carousel, .y2k-carousel, .rg-carousel) > * {
151
+ min-width: 0;
152
+ scroll-snap-align: start;
153
+ }
154
+
155
+ @media (min-width: 48rem) {
156
+ :where(.saas-split, .bento-split, .max-split, .bau-split, .tactile-split, .neo-split, .retro-split, .brutal-split, .cyber-split, .y2k-split, .rg-split) {
157
+ grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
158
+ }
159
+ }
55
160
  }
package/demo/assets/social-card.svg DELETED
@@ -1,17 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
2
- <title id="title">layout-style-css social card</title>
3
- <desc id="desc">A shell-first CSS layout card showing independent UI and layout tracks.</desc>
4
- <rect width="1200" height="630" fill="#111827"/>
5
- <rect x="72" y="72" width="210" height="486" rx="36" fill="#7dd3fc"/>
6
- <rect x="330" y="72" width="798" height="180" rx="36" fill="#fbbf24"/>
7
- <rect x="330" y="306" width="360" height="252" rx="36" fill="#f472b6"/>
8
- <rect x="750" y="306" width="378" height="252" rx="36" fill="#a7f3d0"/>
9
- <text x="116" y="154" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Layout</text>
10
- <text x="116" y="204" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Style</text>
11
- <text x="116" y="254" fill="#111827" font-family="Arial, sans-serif" font-size="38" font-weight="700">Library</text>
12
- <text x="378" y="162" fill="#111827" font-family="Arial, sans-serif" font-size="56" font-weight="700">Shells without visual ownership</text>
13
- <text x="378" y="414" fill="#111827" font-family="Arial, sans-serif" font-size="34">UI Style Kit controls</text>
14
- <text x="378" y="462" fill="#111827" font-family="Arial, sans-serif" font-size="34">color, type, borders</text>
15
- <text x="798" y="414" fill="#111827" font-family="Arial, sans-serif" font-size="34">Layout Library controls</text>
16
- <text x="798" y="462" fill="#111827" font-family="Arial, sans-serif" font-size="34">size, shape, position</text>
17
- </svg>