@bookklik/senangstart-css 0.1.3 → 0.1.7

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 (482) hide show
  1. package/.github/workflows/deploy-docs.yml +7 -1
  2. package/dist/senangstart-css.js +1473 -21
  3. package/dist/senangstart-css.min.js +1182 -12
  4. package/docs/.vitepress/config.js +769 -71
  5. package/docs/SYNTAX-REFERENCE.md +1555 -0
  6. package/docs/guide/dark-mode.md +152 -0
  7. package/docs/guide/preflight.md +139 -0
  8. package/docs/ms/examples/cards.md +116 -0
  9. package/docs/ms/examples/forms.md +207 -0
  10. package/docs/ms/examples/hero.md +150 -0
  11. package/docs/ms/examples/index.md +87 -0
  12. package/docs/ms/examples/navigation.md +144 -0
  13. package/docs/ms/guide/cdn.md +110 -0
  14. package/docs/ms/guide/cli.md +174 -0
  15. package/docs/ms/guide/configuration.md +152 -0
  16. package/docs/ms/guide/dark-mode.md +152 -0
  17. package/docs/ms/guide/getting-started.md +130 -0
  18. package/docs/ms/guide/index.md +64 -0
  19. package/docs/ms/guide/natural-scale.md +123 -0
  20. package/docs/ms/guide/philosophy.md +103 -0
  21. package/docs/ms/guide/preflight.md +139 -0
  22. package/docs/ms/guide/responsive.md +129 -0
  23. package/docs/ms/guide/states.md +162 -0
  24. package/docs/ms/guide/tri-attribute.md +187 -0
  25. package/docs/ms/index.md +64 -0
  26. package/docs/ms/reference/breakpoints.md +131 -0
  27. package/docs/ms/reference/colors.md +126 -0
  28. package/docs/ms/reference/layout/align-content.md +35 -0
  29. package/docs/ms/reference/layout/align-items.md +33 -0
  30. package/docs/ms/reference/layout/align-self.md +34 -0
  31. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  32. package/docs/ms/reference/layout/border-collapse.md +30 -0
  33. package/docs/ms/reference/layout/border-spacing.md +39 -0
  34. package/docs/ms/reference/layout/box-sizing.md +30 -0
  35. package/docs/ms/reference/layout/caption-side.md +30 -0
  36. package/docs/ms/reference/layout/columns.md +30 -0
  37. package/docs/ms/reference/layout/container.md +29 -0
  38. package/docs/ms/reference/layout/display.md +60 -0
  39. package/docs/ms/reference/layout/flex-basis.md +38 -0
  40. package/docs/ms/reference/layout/flex-direction.md +33 -0
  41. package/docs/ms/reference/layout/flex-items.md +32 -0
  42. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  43. package/docs/ms/reference/layout/flex.md +40 -0
  44. package/docs/ms/reference/layout/float-clear.md +32 -0
  45. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  46. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  47. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  48. package/docs/ms/reference/layout/grid-columns.md +32 -0
  49. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  50. package/docs/ms/reference/layout/grid-rows.md +31 -0
  51. package/docs/ms/reference/layout/inset.md +44 -0
  52. package/docs/ms/reference/layout/isolation.md +30 -0
  53. package/docs/ms/reference/layout/justify-content.md +36 -0
  54. package/docs/ms/reference/layout/justify-items.md +32 -0
  55. package/docs/ms/reference/layout/justify-self.md +33 -0
  56. package/docs/ms/reference/layout/object-fit.md +33 -0
  57. package/docs/ms/reference/layout/object-position.md +45 -0
  58. package/docs/ms/reference/layout/order.md +32 -0
  59. package/docs/ms/reference/layout/overflow.md +34 -0
  60. package/docs/ms/reference/layout/overscroll.md +31 -0
  61. package/docs/ms/reference/layout/place-content.md +35 -0
  62. package/docs/ms/reference/layout/place-items.md +32 -0
  63. package/docs/ms/reference/layout/place-self.md +33 -0
  64. package/docs/ms/reference/layout/position.md +34 -0
  65. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  66. package/docs/ms/reference/layout/table-layout.md +30 -0
  67. package/docs/ms/reference/layout/visibility.md +30 -0
  68. package/docs/ms/reference/layout/z-index.md +33 -0
  69. package/docs/ms/reference/layout.md +73 -0
  70. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  71. package/docs/ms/reference/space/gap.md +44 -0
  72. package/docs/ms/reference/space/height.md +44 -0
  73. package/docs/ms/reference/space/margin.md +49 -0
  74. package/docs/ms/reference/space/padding.md +49 -0
  75. package/docs/ms/reference/space/scale-reference.md +43 -0
  76. package/docs/ms/reference/space/sizing.md +27 -0
  77. package/docs/ms/reference/space/width.md +45 -0
  78. package/docs/ms/reference/space.md +37 -0
  79. package/docs/ms/reference/spacing.md +88 -0
  80. package/docs/ms/reference/visual/accent-color.md +31 -0
  81. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  82. package/docs/ms/reference/visual/animation-delay.md +41 -0
  83. package/docs/ms/reference/visual/animation-direction.md +32 -0
  84. package/docs/ms/reference/visual/animation-duration.md +43 -0
  85. package/docs/ms/reference/visual/animation-fill.md +32 -0
  86. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  87. package/docs/ms/reference/visual/animation-play.md +30 -0
  88. package/docs/ms/reference/visual/appearance.md +30 -0
  89. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  90. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  91. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  92. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  93. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  94. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  95. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  96. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  97. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  98. package/docs/ms/reference/visual/background-attachment.md +31 -0
  99. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  100. package/docs/ms/reference/visual/background-clip.md +32 -0
  101. package/docs/ms/reference/visual/background-color.md +33 -0
  102. package/docs/ms/reference/visual/background-image.md +41 -0
  103. package/docs/ms/reference/visual/background-origin.md +31 -0
  104. package/docs/ms/reference/visual/background-position.md +45 -0
  105. package/docs/ms/reference/visual/background-repeat.md +34 -0
  106. package/docs/ms/reference/visual/background-size.md +39 -0
  107. package/docs/ms/reference/visual/background.md +13 -0
  108. package/docs/ms/reference/visual/blend-modes.md +34 -0
  109. package/docs/ms/reference/visual/border-radius.md +34 -0
  110. package/docs/ms/reference/visual/border-style.md +33 -0
  111. package/docs/ms/reference/visual/border-width.md +44 -0
  112. package/docs/ms/reference/visual/border.md +43 -0
  113. package/docs/ms/reference/visual/box-shadow.md +33 -0
  114. package/docs/ms/reference/visual/caret-color.md +31 -0
  115. package/docs/ms/reference/visual/color-scheme.md +31 -0
  116. package/docs/ms/reference/visual/cursor.md +37 -0
  117. package/docs/ms/reference/visual/field-sizing.md +30 -0
  118. package/docs/ms/reference/visual/fill.md +38 -0
  119. package/docs/ms/reference/visual/filter-blur.md +43 -0
  120. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  121. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  122. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  123. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  124. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  125. package/docs/ms/reference/visual/filter-invert.md +39 -0
  126. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  127. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  128. package/docs/ms/reference/visual/font-family.md +31 -0
  129. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  130. package/docs/ms/reference/visual/font-style.md +30 -0
  131. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  132. package/docs/ms/reference/visual/font-weight.md +31 -0
  133. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  134. package/docs/ms/reference/visual/hyphens.md +31 -0
  135. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  136. package/docs/ms/reference/visual/line-clamp.md +40 -0
  137. package/docs/ms/reference/visual/line-height.md +42 -0
  138. package/docs/ms/reference/visual/list-style.md +34 -0
  139. package/docs/ms/reference/visual/mask.md +39 -0
  140. package/docs/ms/reference/visual/opacity.md +33 -0
  141. package/docs/ms/reference/visual/outline.md +31 -0
  142. package/docs/ms/reference/visual/pointer-events.md +30 -0
  143. package/docs/ms/reference/visual/resize.md +32 -0
  144. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  145. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  146. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  147. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  148. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  149. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  150. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  151. package/docs/ms/reference/visual/stroke-width.md +39 -0
  152. package/docs/ms/reference/visual/stroke.md +38 -0
  153. package/docs/ms/reference/visual/text-alignment.md +32 -0
  154. package/docs/ms/reference/visual/text-color.md +41 -0
  155. package/docs/ms/reference/visual/text-decoration.md +32 -0
  156. package/docs/ms/reference/visual/text-indent.md +37 -0
  157. package/docs/ms/reference/visual/text-overflow.md +31 -0
  158. package/docs/ms/reference/visual/text-shadow.md +40 -0
  159. package/docs/ms/reference/visual/text-size.md +32 -0
  160. package/docs/ms/reference/visual/text-transform.md +32 -0
  161. package/docs/ms/reference/visual/text-wrap.md +32 -0
  162. package/docs/ms/reference/visual/touch-action.md +36 -0
  163. package/docs/ms/reference/visual/transform-backface.md +30 -0
  164. package/docs/ms/reference/visual/transform-origin.md +45 -0
  165. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  166. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  167. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  168. package/docs/ms/reference/visual/transform-scale.md +43 -0
  169. package/docs/ms/reference/visual/transform-skew.md +40 -0
  170. package/docs/ms/reference/visual/transform-style.md +30 -0
  171. package/docs/ms/reference/visual/transform-translate.md +39 -0
  172. package/docs/ms/reference/visual/transition-delay.md +41 -0
  173. package/docs/ms/reference/visual/transition-duration.md +43 -0
  174. package/docs/ms/reference/visual/transition-property.md +34 -0
  175. package/docs/ms/reference/visual/transition-timing.md +40 -0
  176. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  177. package/docs/ms/reference/visual/user-select.md +32 -0
  178. package/docs/ms/reference/visual/vertical-align.md +36 -0
  179. package/docs/ms/reference/visual/whitespace.md +34 -0
  180. package/docs/ms/reference/visual/will-change.md +33 -0
  181. package/docs/ms/reference/visual/word-break.md +32 -0
  182. package/docs/ms/reference/visual.md +157 -0
  183. package/docs/public/assets/senangstart-css.min.js +1545 -0
  184. package/docs/reference/layout/align-content.md +35 -0
  185. package/docs/reference/layout/align-items.md +33 -0
  186. package/docs/reference/layout/align-self.md +34 -0
  187. package/docs/reference/layout/aspect-ratio.md +40 -0
  188. package/docs/reference/layout/border-collapse.md +30 -0
  189. package/docs/reference/layout/border-spacing.md +39 -0
  190. package/docs/reference/layout/box-sizing.md +30 -0
  191. package/docs/reference/layout/caption-side.md +30 -0
  192. package/docs/reference/layout/columns.md +30 -0
  193. package/docs/reference/layout/container.md +29 -0
  194. package/docs/reference/layout/display.md +60 -0
  195. package/docs/reference/layout/flex-basis.md +38 -0
  196. package/docs/reference/layout/flex-direction.md +33 -0
  197. package/docs/reference/layout/flex-items.md +32 -0
  198. package/docs/reference/layout/flex-wrap.md +31 -0
  199. package/docs/reference/layout/flex.md +40 -0
  200. package/docs/reference/layout/float-clear.md +32 -0
  201. package/docs/reference/layout/grid-auto-flow.md +33 -0
  202. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  203. package/docs/reference/layout/grid-column-span.md +31 -0
  204. package/docs/reference/layout/grid-columns.md +32 -0
  205. package/docs/reference/layout/grid-row-span.md +30 -0
  206. package/docs/reference/layout/grid-rows.md +31 -0
  207. package/docs/reference/layout/inset.md +44 -0
  208. package/docs/reference/layout/isolation.md +30 -0
  209. package/docs/reference/layout/justify-content.md +36 -0
  210. package/docs/reference/layout/justify-items.md +32 -0
  211. package/docs/reference/layout/justify-self.md +33 -0
  212. package/docs/reference/layout/object-fit.md +33 -0
  213. package/docs/reference/layout/object-position.md +45 -0
  214. package/docs/reference/layout/order.md +32 -0
  215. package/docs/reference/layout/overflow.md +34 -0
  216. package/docs/reference/layout/overscroll.md +31 -0
  217. package/docs/reference/layout/place-content.md +35 -0
  218. package/docs/reference/layout/place-items.md +32 -0
  219. package/docs/reference/layout/place-self.md +33 -0
  220. package/docs/reference/layout/position.md +34 -0
  221. package/docs/reference/layout/shorthand-alignment.md +34 -0
  222. package/docs/reference/layout/table-layout.md +30 -0
  223. package/docs/reference/layout/visibility.md +30 -0
  224. package/docs/reference/layout/z-index.md +33 -0
  225. package/docs/reference/layout.md +60 -102
  226. package/docs/reference/space/arbitrary-values.md +39 -0
  227. package/docs/reference/space/gap.md +44 -0
  228. package/docs/reference/space/height.md +44 -0
  229. package/docs/reference/space/margin.md +49 -0
  230. package/docs/reference/space/padding.md +49 -0
  231. package/docs/reference/space/scale-reference.md +43 -0
  232. package/docs/reference/space/width.md +45 -0
  233. package/docs/reference/space.md +14 -98
  234. package/docs/reference/spacing.md +22 -8
  235. package/docs/reference/visual/accent-color.md +31 -0
  236. package/docs/reference/visual/animation-builtin.md +41 -0
  237. package/docs/reference/visual/animation-delay.md +41 -0
  238. package/docs/reference/visual/animation-direction.md +32 -0
  239. package/docs/reference/visual/animation-duration.md +43 -0
  240. package/docs/reference/visual/animation-fill.md +32 -0
  241. package/docs/reference/visual/animation-iteration.md +30 -0
  242. package/docs/reference/visual/animation-play.md +30 -0
  243. package/docs/reference/visual/appearance.md +30 -0
  244. package/docs/reference/visual/backdrop-blur.md +43 -0
  245. package/docs/reference/visual/backdrop-brightness.md +41 -0
  246. package/docs/reference/visual/backdrop-contrast.md +41 -0
  247. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  248. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  249. package/docs/reference/visual/backdrop-invert.md +39 -0
  250. package/docs/reference/visual/backdrop-opacity.md +39 -0
  251. package/docs/reference/visual/backdrop-saturate.md +41 -0
  252. package/docs/reference/visual/backdrop-sepia.md +39 -0
  253. package/docs/reference/visual/background-attachment.md +31 -0
  254. package/docs/reference/visual/background-blend-mode.md +34 -0
  255. package/docs/reference/visual/background-clip.md +32 -0
  256. package/docs/reference/visual/background-color.md +33 -0
  257. package/docs/reference/visual/background-image.md +41 -0
  258. package/docs/reference/visual/background-origin.md +31 -0
  259. package/docs/reference/visual/background-position.md +45 -0
  260. package/docs/reference/visual/background-repeat.md +34 -0
  261. package/docs/reference/visual/background-size.md +39 -0
  262. package/docs/reference/visual/blend-modes.md +34 -0
  263. package/docs/reference/visual/border-radius.md +34 -0
  264. package/docs/reference/visual/border-style.md +33 -0
  265. package/docs/reference/visual/border-width.md +44 -0
  266. package/docs/reference/visual/border.md +43 -0
  267. package/docs/reference/visual/box-shadow.md +33 -0
  268. package/docs/reference/visual/caret-color.md +31 -0
  269. package/docs/reference/visual/color-scheme.md +31 -0
  270. package/docs/reference/visual/cursor.md +37 -0
  271. package/docs/reference/visual/field-sizing.md +30 -0
  272. package/docs/reference/visual/fill.md +38 -0
  273. package/docs/reference/visual/filter-blur.md +43 -0
  274. package/docs/reference/visual/filter-brightness.md +41 -0
  275. package/docs/reference/visual/filter-contrast.md +41 -0
  276. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  277. package/docs/reference/visual/filter-grayscale.md +39 -0
  278. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  279. package/docs/reference/visual/filter-invert.md +39 -0
  280. package/docs/reference/visual/filter-saturate.md +41 -0
  281. package/docs/reference/visual/filter-sepia.md +39 -0
  282. package/docs/reference/visual/font-family.md +31 -0
  283. package/docs/reference/visual/font-smoothing.md +30 -0
  284. package/docs/reference/visual/font-style.md +30 -0
  285. package/docs/reference/visual/font-variant-numeric.md +35 -0
  286. package/docs/reference/visual/font-weight.md +31 -0
  287. package/docs/reference/visual/forced-color-adjust.md +30 -0
  288. package/docs/reference/visual/hyphens.md +31 -0
  289. package/docs/reference/visual/letter-spacing.md +42 -0
  290. package/docs/reference/visual/line-clamp.md +40 -0
  291. package/docs/reference/visual/line-height.md +42 -0
  292. package/docs/reference/visual/list-style.md +34 -0
  293. package/docs/reference/visual/mask.md +39 -0
  294. package/docs/reference/visual/opacity.md +33 -0
  295. package/docs/reference/visual/outline.md +31 -0
  296. package/docs/reference/visual/pointer-events.md +30 -0
  297. package/docs/reference/visual/resize.md +32 -0
  298. package/docs/reference/visual/scroll-behavior.md +30 -0
  299. package/docs/reference/visual/scroll-margin.md +41 -0
  300. package/docs/reference/visual/scroll-padding.md +41 -0
  301. package/docs/reference/visual/scroll-snap-align.md +32 -0
  302. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  303. package/docs/reference/visual/scroll-snap-type.md +34 -0
  304. package/docs/reference/visual/state-prefixes.md +37 -0
  305. package/docs/reference/visual/stroke-width.md +39 -0
  306. package/docs/reference/visual/stroke.md +38 -0
  307. package/docs/reference/visual/text-alignment.md +32 -0
  308. package/docs/reference/visual/text-color.md +41 -0
  309. package/docs/reference/visual/text-decoration.md +32 -0
  310. package/docs/reference/visual/text-indent.md +37 -0
  311. package/docs/reference/visual/text-overflow.md +31 -0
  312. package/docs/reference/visual/text-shadow.md +40 -0
  313. package/docs/reference/visual/text-size.md +32 -0
  314. package/docs/reference/visual/text-transform.md +32 -0
  315. package/docs/reference/visual/text-wrap.md +32 -0
  316. package/docs/reference/visual/touch-action.md +36 -0
  317. package/docs/reference/visual/transform-backface.md +30 -0
  318. package/docs/reference/visual/transform-origin.md +45 -0
  319. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  320. package/docs/reference/visual/transform-perspective.md +43 -0
  321. package/docs/reference/visual/transform-rotate.md +40 -0
  322. package/docs/reference/visual/transform-scale.md +43 -0
  323. package/docs/reference/visual/transform-skew.md +40 -0
  324. package/docs/reference/visual/transform-style.md +30 -0
  325. package/docs/reference/visual/transform-translate.md +39 -0
  326. package/docs/reference/visual/transition-delay.md +41 -0
  327. package/docs/reference/visual/transition-duration.md +43 -0
  328. package/docs/reference/visual/transition-property.md +34 -0
  329. package/docs/reference/visual/transition-timing.md +40 -0
  330. package/docs/reference/visual/typography-keywords.md +81 -0
  331. package/docs/reference/visual/user-select.md +32 -0
  332. package/docs/reference/visual/vertical-align.md +36 -0
  333. package/docs/reference/visual/whitespace.md +34 -0
  334. package/docs/reference/visual/will-change.md +33 -0
  335. package/docs/reference/visual/word-break.md +32 -0
  336. package/docs/reference/visual.md +151 -154
  337. package/docs/syntax-reference.json +1973 -0
  338. package/package.json +10 -2
  339. package/playground/index.html +78 -0
  340. package/playground/jit-test.html +384 -0
  341. package/scripts/extract-syntax.js +152 -0
  342. package/scripts/generate-docs.js +352 -0
  343. package/src/cdn/jit.js +1473 -21
  344. package/src/cli/commands/build.js +5 -0
  345. package/src/cli/index.js +2 -0
  346. package/src/compiler/generators/css.js +1594 -30
  347. package/src/compiler/generators/preflight.js +379 -0
  348. package/src/compiler/tokenizer.js +1 -1
  349. package/src/config/defaults.js +25 -1
  350. package/src/definitions/index.js +153 -0
  351. package/src/definitions/layout-alignment.js +257 -0
  352. package/src/definitions/layout-flex.js +209 -0
  353. package/src/definitions/layout-grid.js +150 -0
  354. package/src/definitions/layout-positioning.js +89 -0
  355. package/src/definitions/layout-table.js +98 -0
  356. package/src/definitions/layout-utilities.js +262 -0
  357. package/src/definitions/layout.js +195 -0
  358. package/src/definitions/space.js +164 -0
  359. package/src/definitions/visual-backgrounds.js +423 -0
  360. package/src/definitions/visual-borders.js +111 -0
  361. package/src/definitions/visual-filters.js +204 -0
  362. package/src/definitions/visual-interactivity.js +292 -0
  363. package/src/definitions/visual-svg.js +80 -0
  364. package/src/definitions/visual-transform3d.js +159 -0
  365. package/src/definitions/visual-transforms.js +142 -0
  366. package/src/definitions/visual-transitions.js +277 -0
  367. package/src/definitions/visual-typography.js +386 -0
  368. package/src/definitions/visual.js +542 -0
  369. package/tests/helpers/test-utils.js +144 -0
  370. package/tests/integration/compiler.test.js +247 -0
  371. package/tests/sync/docs-sync.test.js +364 -0
  372. package/tests/unit/compiler/generators/css.test.js +719 -0
  373. package/tests/unit/compiler/parser.test.js +244 -0
  374. package/tests/unit/compiler/tokenizer.test.js +305 -0
  375. package/tests/unit/config/defaults.test.js +168 -0
  376. package/docs/.vitepress/cache/deps/_metadata.json +0 -52
  377. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js +0 -9719
  378. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js.map +0 -7
  379. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  380. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  381. package/docs/.vitepress/cache/deps/package.json +0 -3
  382. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  383. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  384. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -583
  385. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  386. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1333
  387. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
  388. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1665
  389. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
  390. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -1813
  391. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
  392. package/docs/.vitepress/cache/deps/vue.js +0 -347
  393. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  394. package/docs/.vitepress/dist/404.html +0 -22
  395. package/docs/.vitepress/dist/assets/app.CwVZm472.js +0 -1
  396. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.BTWwOmXN.js +0 -1
  397. package/docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.B-RMQ_ux.js +0 -9
  398. package/docs/.vitepress/dist/assets/chunks/framework.qISVh_QZ.js +0 -19
  399. package/docs/.vitepress/dist/assets/chunks/theme.B37_rtT6.js +0 -2
  400. package/docs/.vitepress/dist/assets/examples_cards.md.D4i0phvj.js +0 -84
  401. package/docs/.vitepress/dist/assets/examples_cards.md.D4i0phvj.lean.js +0 -1
  402. package/docs/.vitepress/dist/assets/examples_forms.md.BnsjqHST.js +0 -169
  403. package/docs/.vitepress/dist/assets/examples_forms.md.BnsjqHST.lean.js +0 -1
  404. package/docs/.vitepress/dist/assets/examples_hero.md.CCcb2x8Y.js +0 -118
  405. package/docs/.vitepress/dist/assets/examples_hero.md.CCcb2x8Y.lean.js +0 -1
  406. package/docs/.vitepress/dist/assets/examples_index.md.Dj7lqhZt.js +0 -52
  407. package/docs/.vitepress/dist/assets/examples_index.md.Dj7lqhZt.lean.js +0 -1
  408. package/docs/.vitepress/dist/assets/examples_navigation.md.CppyHbnP.js +0 -106
  409. package/docs/.vitepress/dist/assets/examples_navigation.md.CppyHbnP.lean.js +0 -1
  410. package/docs/.vitepress/dist/assets/guide_cdn.md.BzsOep2E.js +0 -30
  411. package/docs/.vitepress/dist/assets/guide_cdn.md.BzsOep2E.lean.js +0 -1
  412. package/docs/.vitepress/dist/assets/guide_cli.md.zXEKk-bu.js +0 -44
  413. package/docs/.vitepress/dist/assets/guide_cli.md.zXEKk-bu.lean.js +0 -1
  414. package/docs/.vitepress/dist/assets/guide_configuration.md.D2JZzhKm.js +0 -79
  415. package/docs/.vitepress/dist/assets/guide_configuration.md.D2JZzhKm.lean.js +0 -1
  416. package/docs/.vitepress/dist/assets/guide_getting-started.md.to1dkMR9.js +0 -47
  417. package/docs/.vitepress/dist/assets/guide_getting-started.md.to1dkMR9.lean.js +0 -1
  418. package/docs/.vitepress/dist/assets/guide_index.md.C1xk2lBl.js +0 -3
  419. package/docs/.vitepress/dist/assets/guide_index.md.C1xk2lBl.lean.js +0 -1
  420. package/docs/.vitepress/dist/assets/guide_natural-scale.md.D1oVRN5V.js +0 -22
  421. package/docs/.vitepress/dist/assets/guide_natural-scale.md.D1oVRN5V.lean.js +0 -1
  422. package/docs/.vitepress/dist/assets/guide_philosophy.md.DPyyMH8d.js +0 -7
  423. package/docs/.vitepress/dist/assets/guide_philosophy.md.DPyyMH8d.lean.js +0 -1
  424. package/docs/.vitepress/dist/assets/guide_responsive.md.wksOAMT5.js +0 -57
  425. package/docs/.vitepress/dist/assets/guide_responsive.md.wksOAMT5.lean.js +0 -1
  426. package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.js +0 -77
  427. package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.lean.js +0 -1
  428. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.js +0 -45
  429. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.lean.js +0 -1
  430. package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.js +0 -7
  431. package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.lean.js +0 -1
  432. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  433. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  434. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  435. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  436. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  437. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  438. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  439. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  440. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  441. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  442. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  443. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  444. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  445. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  446. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.js +0 -48
  447. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.lean.js +0 -1
  448. package/docs/.vitepress/dist/assets/reference_colors.md.o5ltImYJ.js +0 -17
  449. package/docs/.vitepress/dist/assets/reference_colors.md.o5ltImYJ.lean.js +0 -1
  450. package/docs/.vitepress/dist/assets/reference_layout.md.DqSoofMZ.js +0 -13
  451. package/docs/.vitepress/dist/assets/reference_layout.md.DqSoofMZ.lean.js +0 -1
  452. package/docs/.vitepress/dist/assets/reference_space.md.luOYAfQg.js +0 -24
  453. package/docs/.vitepress/dist/assets/reference_space.md.luOYAfQg.lean.js +0 -1
  454. package/docs/.vitepress/dist/assets/reference_spacing.md.DdsDhDhS.js +0 -32
  455. package/docs/.vitepress/dist/assets/reference_spacing.md.DdsDhDhS.lean.js +0 -1
  456. package/docs/.vitepress/dist/assets/reference_visual.md.DZFvxgPk.js +0 -22
  457. package/docs/.vitepress/dist/assets/reference_visual.md.DZFvxgPk.lean.js +0 -1
  458. package/docs/.vitepress/dist/assets/style.BuMqNgkb.css +0 -1
  459. package/docs/.vitepress/dist/examples/cards.html +0 -108
  460. package/docs/.vitepress/dist/examples/forms.html +0 -193
  461. package/docs/.vitepress/dist/examples/hero.html +0 -142
  462. package/docs/.vitepress/dist/examples/index.html +0 -76
  463. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  464. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  465. package/docs/.vitepress/dist/guide/cli.html +0 -68
  466. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  467. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  468. package/docs/.vitepress/dist/guide/index.html +0 -27
  469. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  470. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  471. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  472. package/docs/.vitepress/dist/guide/states.html +0 -101
  473. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  474. package/docs/.vitepress/dist/hashmap.json +0 -1
  475. package/docs/.vitepress/dist/index.html +0 -31
  476. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  477. package/docs/.vitepress/dist/reference/colors.html +0 -41
  478. package/docs/.vitepress/dist/reference/layout.html +0 -37
  479. package/docs/.vitepress/dist/reference/space.html +0 -48
  480. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  481. package/docs/.vitepress/dist/reference/visual.html +0 -46
  482. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/reference/breakpoints.html DELETED
@@ -1,72 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-US" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Breakpoints Reference | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.BuMqNgkb.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.CwVZm472.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.B37_rtT6.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.qISVh_QZ.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/reference_breakpoints.md.BEhuwXBS.lean.js">
17
- <link rel="icon" href="/senangstart-css/favicon.ico">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.2</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Attributes</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Theme</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Spacing</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Colors</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoints</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_reference_breakpoints" data-v-39a288b8><div><h1 id="breakpoints-reference" tabindex="-1">Breakpoints Reference <a class="header-anchor" href="#breakpoints-reference" aria-label="Permalink to &quot;Breakpoints Reference&quot;">​</a></h1><p>Complete reference for responsive breakpoints.</p><h2 id="default-breakpoints" tabindex="-1">Default Breakpoints <a class="header-anchor" href="#default-breakpoints" aria-label="Permalink to &quot;Default Breakpoints&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefix</th><th>Min-Width</th><th>Device Target</th></tr></thead><tbody><tr><td>(none)</td><td>0px</td><td>Mobile (default)</td></tr><tr><td><code>mob:</code></td><td>480px</td><td>Large mobile</td></tr><tr><td><code>tab:</code></td><td>768px</td><td>Tablet</td></tr><tr><td><code>lap:</code></td><td>1024px</td><td>Laptop</td></tr><tr><td><code>desk:</code></td><td>1280px</td><td>Desktop</td></tr></tbody></table><h2 id="css-media-queries" tabindex="-1">CSS Media Queries <a class="header-anchor" href="#css-media-queries" aria-label="Permalink to &quot;CSS Media Queries&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Mobile first - no prefix needed */</span></span>
22
- <span class="line"></span>
23
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">480</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* mob: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
24
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* tab: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
25
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1024</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* lap: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
26
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1280</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* desk: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to &quot;Usage&quot;">​</a></h2><h3 id="responsive-spacing" tabindex="-1">Responsive Spacing <a class="header-anchor" href="#responsive-spacing" aria-label="Permalink to &quot;Responsive Spacing&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Progressive padding</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="responsive-layout" tabindex="-1">Responsive Layout <a class="header-anchor" href="#responsive-layout" aria-label="Permalink to &quot;Responsive Layout&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col tab:row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Column on mobile, row on tablet+</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
- <span class="line"></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hidden on mobile, visible on tablet+</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="responsive-typography" tabindex="-1">Responsive Typography <a class="header-anchor" href="#responsive-typography" aria-label="Permalink to &quot;Responsive Typography&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:big tab:text-size:giant lap:text-size:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Responsive heading</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="mobile-first-approach" tabindex="-1">Mobile-First Approach <a class="header-anchor" href="#mobile-first-approach" aria-label="Permalink to &quot;Mobile-First Approach&quot;">​</a></h2><p>SenangStart uses mobile-first responsive design:</p><ol><li><strong>Base styles</strong> apply to all screen sizes</li><li><strong>Breakpoint prefixes</strong> apply from that breakpoint UP</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- This means: --&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Mobile: small padding --&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Tablet and up: medium padding --&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Laptop and up: big padding --&gt;</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Content</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to &quot;Customization&quot;">​</a></h2><p>Add or modify breakpoints in <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
45
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
46
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
47
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
48
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add wider</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ultra&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1920px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Add ultra-wide</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Use custom breakpoints:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;desk:p:big wide:p:giant ultra:p:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Extra-large screen padding</span></span>
55
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="common-patterns" tabindex="-1">Common Patterns <a class="header-anchor" href="#common-patterns" aria-label="Permalink to &quot;Common Patterns&quot;">​</a></h2><h3 id="show-hide-elements" tabindex="-1">Show/Hide Elements <a class="header-anchor" href="#show-hide-elements" aria-label="Permalink to &quot;Show/Hide Elements&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Mobile only --&gt;</span></span>
56
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block tab:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Mobile menu&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
57
- <span class="line"></span>
58
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Desktop only --&gt;</span></span>
59
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden lap:block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Desktop sidebar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="responsive-grid" tabindex="-1">Responsive Grid <a class="header-anchor" href="#responsive-grid" aria-label="Permalink to &quot;Responsive Grid&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
60
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span></span>
61
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium&quot;</span></span>
62
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid-template-columns: 1fr; </span></span>
63
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }&quot;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cards...</span></span>
66
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="responsive-container" tabindex="-1">Responsive Container <a class="header-anchor" href="#responsive-container" aria-label="Permalink to &quot;Responsive Container&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big max-w:[1200px] m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
67
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Centered container with responsive padding</span></span>
68
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/reference/colors.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Colors</span><!--]--></a></div><div class="pager" data-v-e257564d><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
69
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"D4i0phvj\",\"examples_forms.md\":\"BnsjqHST\",\"examples_hero.md\":\"CCcb2x8Y\",\"examples_index.md\":\"Dj7lqhZt\",\"examples_navigation.md\":\"CppyHbnP\",\"guide_cdn.md\":\"BzsOep2E\",\"guide_cli.md\":\"zXEKk-bu\",\"guide_configuration.md\":\"D2JZzhKm\",\"guide_getting-started.md\":\"to1dkMR9\",\"guide_index.md\":\"C1xk2lBl\",\"guide_natural-scale.md\":\"D1oVRN5V\",\"guide_philosophy.md\":\"DPyyMH8d\",\"guide_responsive.md\":\"wksOAMT5\",\"guide_states.md\":\"DRjYOZDJ\",\"guide_tri-attribute.md\":\"CoFqfmPZ\",\"index.md\":\"CUZJzNzP\",\"reference_breakpoints.md\":\"BEhuwXBS\",\"reference_colors.md\":\"o5ltImYJ\",\"reference_layout.md\":\"DqSoofMZ\",\"reference_space.md\":\"luOYAfQg\",\"reference_spacing.md\":\"DdsDhDhS\",\"reference_visual.md\":\"DZFvxgPk\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.2\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
70
-
71
- </body>
72
- </html>
package/docs/.vitepress/dist/reference/colors.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-US" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Colors Reference | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.BuMqNgkb.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.CwVZm472.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.B37_rtT6.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.qISVh_QZ.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/reference_colors.md.o5ltImYJ.lean.js">
17
- <link rel="icon" href="/senangstart-css/favicon.ico">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.2</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Attributes</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Theme</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Spacing</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Colors</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoints</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_reference_colors" data-v-39a288b8><div><h1 id="colors-reference" tabindex="-1">Colors Reference <a class="header-anchor" href="#colors-reference" aria-label="Permalink to &quot;Colors Reference&quot;">​</a></h1><p>Complete reference for the color palette.</p><h2 id="semantic-colors" tabindex="-1">Semantic Colors <a class="header-anchor" href="#semantic-colors" aria-label="Permalink to &quot;Semantic Colors&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Key</th><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>white</code></td><td>#FFFFFF</td><td>Pure white</td></tr><tr><td><code>black</code></td><td>#000000</td><td>Pure black</td></tr><tr><td><code>grey</code></td><td>#6B7280</td><td>Neutral grey</td></tr><tr><td><code>dark</code></td><td>#3E4A5D</td><td><strong>Brand dark</strong></td></tr><tr><td><code>light</code></td><td>#DBEAFE</td><td><strong>Brand light</strong></td></tr><tr><td><code>primary</code></td><td>#2563EB</td><td><strong>Brand primary</strong></td></tr><tr><td><code>secondary</code></td><td>#DBEAFE</td><td><strong>Brand secondary</strong></td></tr><tr><td><code>success</code></td><td>#10B981</td><td>Positive feedback</td></tr><tr><td><code>warning</code></td><td>#F59E0B</td><td>Cautions</td></tr><tr><td><code>danger</code></td><td>#EF4444</td><td>Errors</td></tr></tbody></table><h2 id="color-palette" tabindex="-1">Color Palette <a class="header-anchor" href="#color-palette" aria-label="Permalink to &quot;Color Palette&quot;">​</a></h2><p>All colors are available in 11 shades: <strong>50</strong>, <strong>100</strong>, <strong>200</strong>, <strong>300</strong>, <strong>400</strong>, <strong>500</strong>, <strong>600</strong>, <strong>700</strong>, <strong>800</strong>, <strong>900</strong>, <strong>950</strong></p><h3 id="chromatic-colors" tabindex="-1">Chromatic Colors <a class="header-anchor" href="#chromatic-colors" aria-label="Permalink to &quot;Chromatic Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Red</strong></td><td><span style="background:#FEF2F2;padding:2px 8px;border-radius:4px;">#FEF2F2</span></td><td><span style="background:#FEE2E2;padding:2px 8px;border-radius:4px;">#FEE2E2</span></td><td><span style="background:#FECACA;padding:2px 8px;border-radius:4px;">#FECACA</span></td><td><span style="background:#FCA5A5;padding:2px 8px;border-radius:4px;">#FCA5A5</span></td><td><span style="background:#F87171;padding:2px 8px;border-radius:4px;">#F87171</span></td><td><span style="background:#EF4444;padding:2px 8px;border-radius:4px;color:white;">#EF4444</span></td><td><span style="background:#DC2626;padding:2px 8px;border-radius:4px;color:white;">#DC2626</span></td><td><span style="background:#B91C1C;padding:2px 8px;border-radius:4px;color:white;">#B91C1C</span></td><td><span style="background:#991B1B;padding:2px 8px;border-radius:4px;color:white;">#991B1B</span></td><td><span style="background:#7F1D1D;padding:2px 8px;border-radius:4px;color:white;">#7F1D1D</span></td><td><span style="background:#450A0A;padding:2px 8px;border-radius:4px;color:white;">#450A0A</span></td></tr><tr><td><strong>Orange</strong></td><td><span style="background:#FFF7ED;padding:2px 8px;border-radius:4px;">#FFF7ED</span></td><td><span style="background:#FFEDD5;padding:2px 8px;border-radius:4px;">#FFEDD5</span></td><td><span style="background:#FED7AA;padding:2px 8px;border-radius:4px;">#FED7AA</span></td><td><span style="background:#FDBA74;padding:2px 8px;border-radius:4px;">#FDBA74</span></td><td><span style="background:#FB923C;padding:2px 8px;border-radius:4px;">#FB923C</span></td><td><span style="background:#F97316;padding:2px 8px;border-radius:4px;color:white;">#F97316</span></td><td><span style="background:#EA580C;padding:2px 8px;border-radius:4px;color:white;">#EA580C</span></td><td><span style="background:#C2410C;padding:2px 8px;border-radius:4px;color:white;">#C2410C</span></td><td><span style="background:#9A3412;padding:2px 8px;border-radius:4px;color:white;">#9A3412</span></td><td><span style="background:#7C2D12;padding:2px 8px;border-radius:4px;color:white;">#7C2D12</span></td><td><span style="background:#431407;padding:2px 8px;border-radius:4px;color:white;">#431407</span></td></tr><tr><td><strong>Amber</strong></td><td><span style="background:#FFFBEB;padding:2px 8px;border-radius:4px;">#FFFBEB</span></td><td><span style="background:#FEF3C7;padding:2px 8px;border-radius:4px;">#FEF3C7</span></td><td><span style="background:#FDE68A;padding:2px 8px;border-radius:4px;">#FDE68A</span></td><td><span style="background:#FCD34D;padding:2px 8px;border-radius:4px;">#FCD34D</span></td><td><span style="background:#FBBF24;padding:2px 8px;border-radius:4px;">#FBBF24</span></td><td><span style="background:#F59E0B;padding:2px 8px;border-radius:4px;">#F59E0B</span></td><td><span style="background:#D97706;padding:2px 8px;border-radius:4px;color:white;">#D97706</span></td><td><span style="background:#B45309;padding:2px 8px;border-radius:4px;color:white;">#B45309</span></td><td><span style="background:#92400E;padding:2px 8px;border-radius:4px;color:white;">#92400E</span></td><td><span style="background:#78350F;padding:2px 8px;border-radius:4px;color:white;">#78350F</span></td><td><span style="background:#451A03;padding:2px 8px;border-radius:4px;color:white;">#451A03</span></td></tr><tr><td><strong>Yellow</strong></td><td><span style="background:#FEFCE8;padding:2px 8px;border-radius:4px;">#FEFCE8</span></td><td><span style="background:#FEF9C3;padding:2px 8px;border-radius:4px;">#FEF9C3</span></td><td><span style="background:#FEF08A;padding:2px 8px;border-radius:4px;">#FEF08A</span></td><td><span style="background:#FDE047;padding:2px 8px;border-radius:4px;">#FDE047</span></td><td><span style="background:#FACC15;padding:2px 8px;border-radius:4px;">#FACC15</span></td><td><span style="background:#EAB308;padding:2px 8px;border-radius:4px;">#EAB308</span></td><td><span style="background:#CA8A04;padding:2px 8px;border-radius:4px;color:white;">#CA8A04</span></td><td><span style="background:#A16207;padding:2px 8px;border-radius:4px;color:white;">#A16207</span></td><td><span style="background:#854D0E;padding:2px 8px;border-radius:4px;color:white;">#854D0E</span></td><td><span style="background:#713F12;padding:2px 8px;border-radius:4px;color:white;">#713F12</span></td><td><span style="background:#422006;padding:2px 8px;border-radius:4px;color:white;">#422006</span></td></tr><tr><td><strong>Lime</strong></td><td><span style="background:#F7FEE7;padding:2px 8px;border-radius:4px;">#F7FEE7</span></td><td><span style="background:#ECFCCB;padding:2px 8px;border-radius:4px;">#ECFCCB</span></td><td><span style="background:#D9F99D;padding:2px 8px;border-radius:4px;">#D9F99D</span></td><td><span style="background:#BEF264;padding:2px 8px;border-radius:4px;">#BEF264</span></td><td><span style="background:#A3E635;padding:2px 8px;border-radius:4px;">#A3E635</span></td><td><span style="background:#84CC16;padding:2px 8px;border-radius:4px;">#84CC16</span></td><td><span style="background:#65A30D;padding:2px 8px;border-radius:4px;color:white;">#65A30D</span></td><td><span style="background:#4D7C0F;padding:2px 8px;border-radius:4px;color:white;">#4D7C0F</span></td><td><span style="background:#3F6212;padding:2px 8px;border-radius:4px;color:white;">#3F6212</span></td><td><span style="background:#365314;padding:2px 8px;border-radius:4px;color:white;">#365314</span></td><td><span style="background:#1A2E05;padding:2px 8px;border-radius:4px;color:white;">#1A2E05</span></td></tr><tr><td><strong>Green</strong></td><td><span style="background:#F0FDF4;padding:2px 8px;border-radius:4px;">#F0FDF4</span></td><td><span style="background:#DCFCE7;padding:2px 8px;border-radius:4px;">#DCFCE7</span></td><td><span style="background:#BBF7D0;padding:2px 8px;border-radius:4px;">#BBF7D0</span></td><td><span style="background:#86EFAC;padding:2px 8px;border-radius:4px;">#86EFAC</span></td><td><span style="background:#4ADE80;padding:2px 8px;border-radius:4px;">#4ADE80</span></td><td><span style="background:#22C55E;padding:2px 8px;border-radius:4px;">#22C55E</span></td><td><span style="background:#16A34A;padding:2px 8px;border-radius:4px;color:white;">#16A34A</span></td><td><span style="background:#15803D;padding:2px 8px;border-radius:4px;color:white;">#15803D</span></td><td><span style="background:#166534;padding:2px 8px;border-radius:4px;color:white;">#166534</span></td><td><span style="background:#14532D;padding:2px 8px;border-radius:4px;color:white;">#14532D</span></td><td><span style="background:#052E16;padding:2px 8px;border-radius:4px;color:white;">#052E16</span></td></tr><tr><td><strong>Emerald</strong></td><td><span style="background:#ECFDF5;padding:2px 8px;border-radius:4px;">#ECFDF5</span></td><td><span style="background:#D1FAE5;padding:2px 8px;border-radius:4px;">#D1FAE5</span></td><td><span style="background:#A7F3D0;padding:2px 8px;border-radius:4px;">#A7F3D0</span></td><td><span style="background:#6EE7B7;padding:2px 8px;border-radius:4px;">#6EE7B7</span></td><td><span style="background:#34D399;padding:2px 8px;border-radius:4px;">#34D399</span></td><td><span style="background:#10B981;padding:2px 8px;border-radius:4px;">#10B981</span></td><td><span style="background:#059669;padding:2px 8px;border-radius:4px;color:white;">#059669</span></td><td><span style="background:#047857;padding:2px 8px;border-radius:4px;color:white;">#047857</span></td><td><span style="background:#065F46;padding:2px 8px;border-radius:4px;color:white;">#065F46</span></td><td><span style="background:#064E3B;padding:2px 8px;border-radius:4px;color:white;">#064E3B</span></td><td><span style="background:#022C22;padding:2px 8px;border-radius:4px;color:white;">#022C22</span></td></tr><tr><td><strong>Teal</strong></td><td><span style="background:#F0FDFA;padding:2px 8px;border-radius:4px;">#F0FDFA</span></td><td><span style="background:#CCFBF1;padding:2px 8px;border-radius:4px;">#CCFBF1</span></td><td><span style="background:#99F6E4;padding:2px 8px;border-radius:4px;">#99F6E4</span></td><td><span style="background:#5EEAD4;padding:2px 8px;border-radius:4px;">#5EEAD4</span></td><td><span style="background:#2DD4BF;padding:2px 8px;border-radius:4px;">#2DD4BF</span></td><td><span style="background:#14B8A6;padding:2px 8px;border-radius:4px;">#14B8A6</span></td><td><span style="background:#0D9488;padding:2px 8px;border-radius:4px;color:white;">#0D9488</span></td><td><span style="background:#0F766E;padding:2px 8px;border-radius:4px;color:white;">#0F766E</span></td><td><span style="background:#115E59;padding:2px 8px;border-radius:4px;color:white;">#115E59</span></td><td><span style="background:#134E4A;padding:2px 8px;border-radius:4px;color:white;">#134E4A</span></td><td><span style="background:#042F2E;padding:2px 8px;border-radius:4px;color:white;">#042F2E</span></td></tr><tr><td><strong>Cyan</strong></td><td><span style="background:#ECFEFF;padding:2px 8px;border-radius:4px;">#ECFEFF</span></td><td><span style="background:#CFFAFE;padding:2px 8px;border-radius:4px;">#CFFAFE</span></td><td><span style="background:#A5F3FC;padding:2px 8px;border-radius:4px;">#A5F3FC</span></td><td><span style="background:#67E8F9;padding:2px 8px;border-radius:4px;">#67E8F9</span></td><td><span style="background:#22D3EE;padding:2px 8px;border-radius:4px;">#22D3EE</span></td><td><span style="background:#06B6D4;padding:2px 8px;border-radius:4px;">#06B6D4</span></td><td><span style="background:#0891B2;padding:2px 8px;border-radius:4px;color:white;">#0891B2</span></td><td><span style="background:#0E7490;padding:2px 8px;border-radius:4px;color:white;">#0E7490</span></td><td><span style="background:#155E75;padding:2px 8px;border-radius:4px;color:white;">#155E75</span></td><td><span style="background:#164E63;padding:2px 8px;border-radius:4px;color:white;">#164E63</span></td><td><span style="background:#083344;padding:2px 8px;border-radius:4px;color:white;">#083344</span></td></tr><tr><td><strong>Sky</strong></td><td><span style="background:#F0F9FF;padding:2px 8px;border-radius:4px;">#F0F9FF</span></td><td><span style="background:#E0F2FE;padding:2px 8px;border-radius:4px;">#E0F2FE</span></td><td><span style="background:#BAE6FD;padding:2px 8px;border-radius:4px;">#BAE6FD</span></td><td><span style="background:#7DD3FC;padding:2px 8px;border-radius:4px;">#7DD3FC</span></td><td><span style="background:#38BDF8;padding:2px 8px;border-radius:4px;">#38BDF8</span></td><td><span style="background:#0EA5E9;padding:2px 8px;border-radius:4px;">#0EA5E9</span></td><td><span style="background:#0284C7;padding:2px 8px;border-radius:4px;color:white;">#0284C7</span></td><td><span style="background:#0369A1;padding:2px 8px;border-radius:4px;color:white;">#0369A1</span></td><td><span style="background:#075985;padding:2px 8px;border-radius:4px;color:white;">#075985</span></td><td><span style="background:#0C4A6E;padding:2px 8px;border-radius:4px;color:white;">#0C4A6E</span></td><td><span style="background:#082F49;padding:2px 8px;border-radius:4px;color:white;">#082F49</span></td></tr><tr><td><strong>Blue</strong></td><td><span style="background:#EFF6FF;padding:2px 8px;border-radius:4px;">#EFF6FF</span></td><td><span style="background:#DBEAFE;padding:2px 8px;border-radius:4px;">#DBEAFE</span></td><td><span style="background:#BFDBFE;padding:2px 8px;border-radius:4px;">#BFDBFE</span></td><td><span style="background:#93C5FD;padding:2px 8px;border-radius:4px;">#93C5FD</span></td><td><span style="background:#60A5FA;padding:2px 8px;border-radius:4px;">#60A5FA</span></td><td><span style="background:#3B82F6;padding:2px 8px;border-radius:4px;color:white;">#3B82F6</span></td><td><span style="background:#2563EB;padding:2px 8px;border-radius:4px;color:white;">#2563EB</span></td><td><span style="background:#1D4ED8;padding:2px 8px;border-radius:4px;color:white;">#1D4ED8</span></td><td><span style="background:#1E40AF;padding:2px 8px;border-radius:4px;color:white;">#1E40AF</span></td><td><span style="background:#1E3A8A;padding:2px 8px;border-radius:4px;color:white;">#1E3A8A</span></td><td><span style="background:#172554;padding:2px 8px;border-radius:4px;color:white;">#172554</span></td></tr><tr><td><strong>Indigo</strong></td><td><span style="background:#EEF2FF;padding:2px 8px;border-radius:4px;">#EEF2FF</span></td><td><span style="background:#E0E7FF;padding:2px 8px;border-radius:4px;">#E0E7FF</span></td><td><span style="background:#C7D2FE;padding:2px 8px;border-radius:4px;">#C7D2FE</span></td><td><span style="background:#A5B4FC;padding:2px 8px;border-radius:4px;">#A5B4FC</span></td><td><span style="background:#818CF8;padding:2px 8px;border-radius:4px;">#818CF8</span></td><td><span style="background:#6366F1;padding:2px 8px;border-radius:4px;color:white;">#6366F1</span></td><td><span style="background:#4F46E5;padding:2px 8px;border-radius:4px;color:white;">#4F46E5</span></td><td><span style="background:#4338CA;padding:2px 8px;border-radius:4px;color:white;">#4338CA</span></td><td><span style="background:#3730A3;padding:2px 8px;border-radius:4px;color:white;">#3730A3</span></td><td><span style="background:#312E81;padding:2px 8px;border-radius:4px;color:white;">#312E81</span></td><td><span style="background:#1E1B4B;padding:2px 8px;border-radius:4px;color:white;">#1E1B4B</span></td></tr><tr><td><strong>Violet</strong></td><td><span style="background:#F5F3FF;padding:2px 8px;border-radius:4px;">#F5F3FF</span></td><td><span style="background:#EDE9FE;padding:2px 8px;border-radius:4px;">#EDE9FE</span></td><td><span style="background:#DDD6FE;padding:2px 8px;border-radius:4px;">#DDD6FE</span></td><td><span style="background:#C4B5FD;padding:2px 8px;border-radius:4px;">#C4B5FD</span></td><td><span style="background:#A78BFA;padding:2px 8px;border-radius:4px;">#A78BFA</span></td><td><span style="background:#8B5CF6;padding:2px 8px;border-radius:4px;color:white;">#8B5CF6</span></td><td><span style="background:#7C3AED;padding:2px 8px;border-radius:4px;color:white;">#7C3AED</span></td><td><span style="background:#6D28D9;padding:2px 8px;border-radius:4px;color:white;">#6D28D9</span></td><td><span style="background:#5B21B6;padding:2px 8px;border-radius:4px;color:white;">#5B21B6</span></td><td><span style="background:#4C1D95;padding:2px 8px;border-radius:4px;color:white;">#4C1D95</span></td><td><span style="background:#2E1065;padding:2px 8px;border-radius:4px;color:white;">#2E1065</span></td></tr><tr><td><strong>Purple</strong></td><td><span style="background:#FAF5FF;padding:2px 8px;border-radius:4px;">#FAF5FF</span></td><td><span style="background:#F3E8FF;padding:2px 8px;border-radius:4px;">#F3E8FF</span></td><td><span style="background:#E9D5FF;padding:2px 8px;border-radius:4px;">#E9D5FF</span></td><td><span style="background:#D8B4FE;padding:2px 8px;border-radius:4px;">#D8B4FE</span></td><td><span style="background:#C084FC;padding:2px 8px;border-radius:4px;">#C084FC</span></td><td><span style="background:#A855F7;padding:2px 8px;border-radius:4px;color:white;">#A855F7</span></td><td><span style="background:#9333EA;padding:2px 8px;border-radius:4px;color:white;">#9333EA</span></td><td><span style="background:#7E22CE;padding:2px 8px;border-radius:4px;color:white;">#7E22CE</span></td><td><span style="background:#6B21A8;padding:2px 8px;border-radius:4px;color:white;">#6B21A8</span></td><td><span style="background:#581C87;padding:2px 8px;border-radius:4px;color:white;">#581C87</span></td><td><span style="background:#3B0764;padding:2px 8px;border-radius:4px;color:white;">#3B0764</span></td></tr><tr><td><strong>Fuchsia</strong></td><td><span style="background:#FDF4FF;padding:2px 8px;border-radius:4px;">#FDF4FF</span></td><td><span style="background:#FAE8FF;padding:2px 8px;border-radius:4px;">#FAE8FF</span></td><td><span style="background:#F5D0FE;padding:2px 8px;border-radius:4px;">#F5D0FE</span></td><td><span style="background:#F0ABFC;padding:2px 8px;border-radius:4px;">#F0ABFC</span></td><td><span style="background:#E879F9;padding:2px 8px;border-radius:4px;">#E879F9</span></td><td><span style="background:#D946EF;padding:2px 8px;border-radius:4px;color:white;">#D946EF</span></td><td><span style="background:#C026D3;padding:2px 8px;border-radius:4px;color:white;">#C026D3</span></td><td><span style="background:#A21CAF;padding:2px 8px;border-radius:4px;color:white;">#A21CAF</span></td><td><span style="background:#86198F;padding:2px 8px;border-radius:4px;color:white;">#86198F</span></td><td><span style="background:#701A75;padding:2px 8px;border-radius:4px;color:white;">#701A75</span></td><td><span style="background:#4A044E;padding:2px 8px;border-radius:4px;color:white;">#4A044E</span></td></tr><tr><td><strong>Pink</strong></td><td><span style="background:#FDF2F8;padding:2px 8px;border-radius:4px;">#FDF2F8</span></td><td><span style="background:#FCE7F3;padding:2px 8px;border-radius:4px;">#FCE7F3</span></td><td><span style="background:#FBCFE8;padding:2px 8px;border-radius:4px;">#FBCFE8</span></td><td><span style="background:#F9A8D4;padding:2px 8px;border-radius:4px;">#F9A8D4</span></td><td><span style="background:#F472B6;padding:2px 8px;border-radius:4px;">#F472B6</span></td><td><span style="background:#EC4899;padding:2px 8px;border-radius:4px;color:white;">#EC4899</span></td><td><span style="background:#DB2777;padding:2px 8px;border-radius:4px;color:white;">#DB2777</span></td><td><span style="background:#BE185D;padding:2px 8px;border-radius:4px;color:white;">#BE185D</span></td><td><span style="background:#9D174D;padding:2px 8px;border-radius:4px;color:white;">#9D174D</span></td><td><span style="background:#831843;padding:2px 8px;border-radius:4px;color:white;">#831843</span></td><td><span style="background:#500724;padding:2px 8px;border-radius:4px;color:white;">#500724</span></td></tr><tr><td><strong>Rose</strong></td><td><span style="background:#FFF1F2;padding:2px 8px;border-radius:4px;">#FFF1F2</span></td><td><span style="background:#FFE4E6;padding:2px 8px;border-radius:4px;">#FFE4E6</span></td><td><span style="background:#FECDD3;padding:2px 8px;border-radius:4px;">#FECDD3</span></td><td><span style="background:#FDA4AF;padding:2px 8px;border-radius:4px;">#FDA4AF</span></td><td><span style="background:#FB7185;padding:2px 8px;border-radius:4px;">#FB7185</span></td><td><span style="background:#F43F5E;padding:2px 8px;border-radius:4px;color:white;">#F43F5E</span></td><td><span style="background:#E11D48;padding:2px 8px;border-radius:4px;color:white;">#E11D48</span></td><td><span style="background:#BE123C;padding:2px 8px;border-radius:4px;color:white;">#BE123C</span></td><td><span style="background:#9F1239;padding:2px 8px;border-radius:4px;color:white;">#9F1239</span></td><td><span style="background:#881337;padding:2px 8px;border-radius:4px;color:white;">#881337</span></td><td><span style="background:#4C0519;padding:2px 8px;border-radius:4px;color:white;">#4C0519</span></td></tr></tbody></table></div><h3 id="neutral-colors" tabindex="-1">Neutral Colors <a class="header-anchor" href="#neutral-colors" aria-label="Permalink to &quot;Neutral Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Slate</strong></td><td><span style="background:#F8FAFC;padding:2px 8px;border-radius:4px;">#F8FAFC</span></td><td><span style="background:#F1F5F9;padding:2px 8px;border-radius:4px;">#F1F5F9</span></td><td><span style="background:#E2E8F0;padding:2px 8px;border-radius:4px;">#E2E8F0</span></td><td><span style="background:#CBD5E1;padding:2px 8px;border-radius:4px;">#CBD5E1</span></td><td><span style="background:#94A3B8;padding:2px 8px;border-radius:4px;">#94A3B8</span></td><td><span style="background:#64748B;padding:2px 8px;border-radius:4px;color:white;">#64748B</span></td><td><span style="background:#475569;padding:2px 8px;border-radius:4px;color:white;">#475569</span></td><td><span style="background:#334155;padding:2px 8px;border-radius:4px;color:white;">#334155</span></td><td><span style="background:#1E293B;padding:2px 8px;border-radius:4px;color:white;">#1E293B</span></td><td><span style="background:#0F172A;padding:2px 8px;border-radius:4px;color:white;">#0F172A</span></td><td><span style="background:#020617;padding:2px 8px;border-radius:4px;color:white;">#020617</span></td></tr><tr><td><strong>Gray</strong></td><td><span style="background:#F9FAFB;padding:2px 8px;border-radius:4px;">#F9FAFB</span></td><td><span style="background:#F3F4F6;padding:2px 8px;border-radius:4px;">#F3F4F6</span></td><td><span style="background:#E5E7EB;padding:2px 8px;border-radius:4px;">#E5E7EB</span></td><td><span style="background:#D1D5DB;padding:2px 8px;border-radius:4px;">#D1D5DB</span></td><td><span style="background:#9CA3AF;padding:2px 8px;border-radius:4px;">#9CA3AF</span></td><td><span style="background:#6B7280;padding:2px 8px;border-radius:4px;color:white;">#6B7280</span></td><td><span style="background:#4B5563;padding:2px 8px;border-radius:4px;color:white;">#4B5563</span></td><td><span style="background:#374151;padding:2px 8px;border-radius:4px;color:white;">#374151</span></td><td><span style="background:#1F2937;padding:2px 8px;border-radius:4px;color:white;">#1F2937</span></td><td><span style="background:#111827;padding:2px 8px;border-radius:4px;color:white;">#111827</span></td><td><span style="background:#030712;padding:2px 8px;border-radius:4px;color:white;">#030712</span></td></tr><tr><td><strong>Zinc</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F4F4F5;padding:2px 8px;border-radius:4px;">#F4F4F5</span></td><td><span style="background:#E4E4E7;padding:2px 8px;border-radius:4px;">#E4E4E7</span></td><td><span style="background:#D4D4D8;padding:2px 8px;border-radius:4px;">#D4D4D8</span></td><td><span style="background:#A1A1AA;padding:2px 8px;border-radius:4px;">#A1A1AA</span></td><td><span style="background:#71717A;padding:2px 8px;border-radius:4px;color:white;">#71717A</span></td><td><span style="background:#52525B;padding:2px 8px;border-radius:4px;color:white;">#52525B</span></td><td><span style="background:#3F3F46;padding:2px 8px;border-radius:4px;color:white;">#3F3F46</span></td><td><span style="background:#27272A;padding:2px 8px;border-radius:4px;color:white;">#27272A</span></td><td><span style="background:#18181B;padding:2px 8px;border-radius:4px;color:white;">#18181B</span></td><td><span style="background:#09090B;padding:2px 8px;border-radius:4px;color:white;">#09090B</span></td></tr><tr><td><strong>Neutral</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F5F5F5;padding:2px 8px;border-radius:4px;">#F5F5F5</span></td><td><span style="background:#E5E5E5;padding:2px 8px;border-radius:4px;">#E5E5E5</span></td><td><span style="background:#D4D4D4;padding:2px 8px;border-radius:4px;">#D4D4D4</span></td><td><span style="background:#A3A3A3;padding:2px 8px;border-radius:4px;">#A3A3A3</span></td><td><span style="background:#737373;padding:2px 8px;border-radius:4px;color:white;">#737373</span></td><td><span style="background:#525252;padding:2px 8px;border-radius:4px;color:white;">#525252</span></td><td><span style="background:#404040;padding:2px 8px;border-radius:4px;color:white;">#404040</span></td><td><span style="background:#262626;padding:2px 8px;border-radius:4px;color:white;">#262626</span></td><td><span style="background:#171717;padding:2px 8px;border-radius:4px;color:white;">#171717</span></td><td><span style="background:#0A0A0A;padding:2px 8px;border-radius:4px;color:white;">#0A0A0A</span></td></tr><tr><td><strong>Stone</strong></td><td><span style="background:#FAFAF9;padding:2px 8px;border-radius:4px;">#FAFAF9</span></td><td><span style="background:#F5F5F4;padding:2px 8px;border-radius:4px;">#F5F5F4</span></td><td><span style="background:#E7E5E4;padding:2px 8px;border-radius:4px;">#E7E5E4</span></td><td><span style="background:#D6D3D1;padding:2px 8px;border-radius:4px;">#D6D3D1</span></td><td><span style="background:#A8A29E;padding:2px 8px;border-radius:4px;">#A8A29E</span></td><td><span style="background:#78716C;padding:2px 8px;border-radius:4px;color:white;">#78716C</span></td><td><span style="background:#57534E;padding:2px 8px;border-radius:4px;color:white;">#57534E</span></td><td><span style="background:#44403C;padding:2px 8px;border-radius:4px;color:white;">#44403C</span></td><td><span style="background:#292524;padding:2px 8px;border-radius:4px;color:white;">#292524</span></td><td><span style="background:#1C1917;padding:2px 8px;border-radius:4px;color:white;">#1C1917</span></td><td><span style="background:#0C0A09;padding:2px 8px;border-radius:4px;color:white;">#0C0A09</span></td></tr></tbody></table></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to &quot;Usage&quot;">​</a></h2><h3 id="background-colors" tabindex="-1">Background Colors <a class="header-anchor" href="#background-colors" aria-label="Permalink to &quot;Background Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:blue-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue 500 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:slate-100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light slate background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:emerald-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Emerald 600 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="text-colors" tabindex="-1">Text Colors <a class="header-anchor" href="#text-colors" aria-label="Permalink to &quot;Text Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:gray-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:blue-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:red-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Error text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="border-colors" tabindex="-1">Border Colors <a class="header-anchor" href="#border-colors" aria-label="Permalink to &quot;Border Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:gray-300 border-w:[1px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:blue-500 border-w:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="arbitrary-colors" tabindex="-1">Arbitrary Colors <a class="header-anchor" href="#arbitrary-colors" aria-label="Permalink to &quot;Arbitrary Colors&quot;">​</a></h3><p>Use brackets for custom hex values:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#8B5CF6]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom purple&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:[#EC4899]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom pink text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[rgba(0,0,0,0.5)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semi-transparent&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to &quot;Customization&quot;">​</a></h2><p>Add custom colors in <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
31
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;brand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#8B5CF6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
32
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;accent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#EC4899&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
33
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;muted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#9CA3AF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
34
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;surface&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#F9FAFB&#39;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="semantic-usage" tabindex="-1">Semantic Usage <a class="header-anchor" href="#semantic-usage" aria-label="Permalink to &quot;Semantic Usage&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Color</th><th>Recommended Use</th></tr></thead><tbody><tr><td><code>primary</code></td><td>Main actions, links, highlights</td></tr><tr><td><code>success</code></td><td>Positive feedback, confirmations</td></tr><tr><td><code>warning</code></td><td>Cautions, important notices</td></tr><tr><td><code>danger</code></td><td>Errors, destructive actions</td></tr><tr><td><code>grey</code></td><td>Secondary text, borders</td></tr><tr><td><code>dark</code></td><td>Primary text, headings</td></tr><tr><td><code>light</code></td><td>Backgrounds, subtle fills</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/reference/spacing.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Spacing</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/reference/breakpoints.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Breakpoints</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
38
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"D4i0phvj\",\"examples_forms.md\":\"BnsjqHST\",\"examples_hero.md\":\"CCcb2x8Y\",\"examples_index.md\":\"Dj7lqhZt\",\"examples_navigation.md\":\"CppyHbnP\",\"guide_cdn.md\":\"BzsOep2E\",\"guide_cli.md\":\"zXEKk-bu\",\"guide_configuration.md\":\"D2JZzhKm\",\"guide_getting-started.md\":\"to1dkMR9\",\"guide_index.md\":\"C1xk2lBl\",\"guide_natural-scale.md\":\"D1oVRN5V\",\"guide_philosophy.md\":\"DPyyMH8d\",\"guide_responsive.md\":\"wksOAMT5\",\"guide_states.md\":\"DRjYOZDJ\",\"guide_tri-attribute.md\":\"CoFqfmPZ\",\"index.md\":\"CUZJzNzP\",\"reference_breakpoints.md\":\"BEhuwXBS\",\"reference_colors.md\":\"o5ltImYJ\",\"reference_layout.md\":\"DqSoofMZ\",\"reference_space.md\":\"luOYAfQg\",\"reference_spacing.md\":\"DdsDhDhS\",\"reference_visual.md\":\"DZFvxgPk\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.2\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
39
-
40
- </body>
41
- </html>
package/docs/.vitepress/dist/reference/layout.html DELETED
@@ -1,37 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-US" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>layout Reference | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.BuMqNgkb.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.CwVZm472.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.B37_rtT6.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.qISVh_QZ.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/reference_layout.md.DqSoofMZ.lean.js">
17
- <link rel="icon" href="/senangstart-css/favicon.ico">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.2</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Attributes</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Theme</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Spacing</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Colors</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoints</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_reference_layout" data-v-39a288b8><div><h1 id="layout-reference" tabindex="-1">layout Reference <a class="header-anchor" href="#layout-reference" aria-label="Permalink to &quot;layout Reference&quot;">​</a></h1><p>The <code>layout</code> attribute controls structure, positioning, and flow.</p><h2 id="display" tabindex="-1">Display <a class="header-anchor" href="#display" aria-label="Permalink to &quot;Display&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>grid</code></td><td><code>display: grid</code></td></tr><tr><td><code>block</code></td><td><code>display: block</code></td></tr><tr><td><code>inline</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>hidden</code></td><td><code>display: none</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Flexbox container&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Grid container&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hidden element&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="flex-direction" tabindex="-1">Flex Direction <a class="header-anchor" href="#flex-direction" aria-label="Permalink to &quot;Flex Direction&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>row</code></td><td><code>flex-direction: row</code></td></tr><tr><td><code>col</code></td><td><code>flex-direction: column</code></td></tr><tr><td><code>row-reverse</code></td><td><code>flex-direction: row-reverse</code></td></tr><tr><td><code>col-reverse</code></td><td><code>flex-direction: column-reverse</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Vertical&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-label="Permalink to &quot;Alignment&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>center</code></td><td><code>justify-content: center; align-items: center</code></td></tr><tr><td><code>start</code></td><td><code>justify-content: flex-start; align-items: flex-start</code></td></tr><tr><td><code>end</code></td><td><code>justify-content: flex-end; align-items: flex-end</code></td></tr><tr><td><code>between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>evenly</code></td><td><code>justify-content: space-evenly</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Centered&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Space between&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="flex-wrap" tabindex="-1">Flex Wrap <a class="header-anchor" href="#flex-wrap" aria-label="Permalink to &quot;Flex Wrap&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>wrap</code></td><td><code>flex-wrap: wrap</code></td></tr><tr><td><code>nowrap</code></td><td><code>flex-wrap: nowrap</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Wrapping flex&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="position" tabindex="-1">Position <a class="header-anchor" href="#position" aria-label="Permalink to &quot;Position&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>relative</code></td><td><code>position: relative</code></td></tr><tr><td><code>absolute</code></td><td><code>position: absolute</code></td></tr><tr><td><code>fixed</code></td><td><code>position: fixed</code></td></tr><tr><td><code>sticky</code></td><td><code>position: sticky</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Fixed nav&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sticky&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sticky element&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="z-index" tabindex="-1">Z-Index <a class="header-anchor" href="#z-index" aria-label="Permalink to &quot;Z-Index&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>z:base</code></td><td><code>z-index: 0</code></td></tr><tr><td><code>z:low</code></td><td><code>z-index: 10</code></td></tr><tr><td><code>z:mid</code></td><td><code>z-index: 50</code></td></tr><tr><td><code>z:high</code></td><td><code>z-index: 100</code></td></tr><tr><td><code>z:top</code></td><td><code>z-index: 9999</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Always on top&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute z:high&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;High z-index&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="overflow" tabindex="-1">Overflow <a class="header-anchor" href="#overflow" aria-label="Permalink to &quot;Overflow&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>overflow:hidden</code></td><td><code>overflow: hidden</code></td></tr><tr><td><code>overflow:auto</code></td><td><code>overflow: auto</code></td></tr><tr><td><code>overflow:scroll</code></td><td><code>overflow: scroll</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;overflow:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Clipped content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="combining-values" tabindex="-1">Combining Values <a class="header-anchor" href="#combining-values" aria-label="Permalink to &quot;Combining Values&quot;">​</a></h2><p>Combine multiple layout values with spaces:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Vertical, centered, wrapping flexbox</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
30
- <span class="line"></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Fixed nav with space-between</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/reference/space.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>space</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
34
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"D4i0phvj\",\"examples_forms.md\":\"BnsjqHST\",\"examples_hero.md\":\"CCcb2x8Y\",\"examples_index.md\":\"Dj7lqhZt\",\"examples_navigation.md\":\"CppyHbnP\",\"guide_cdn.md\":\"BzsOep2E\",\"guide_cli.md\":\"zXEKk-bu\",\"guide_configuration.md\":\"D2JZzhKm\",\"guide_getting-started.md\":\"to1dkMR9\",\"guide_index.md\":\"C1xk2lBl\",\"guide_natural-scale.md\":\"D1oVRN5V\",\"guide_philosophy.md\":\"DPyyMH8d\",\"guide_responsive.md\":\"wksOAMT5\",\"guide_states.md\":\"DRjYOZDJ\",\"guide_tri-attribute.md\":\"CoFqfmPZ\",\"index.md\":\"CUZJzNzP\",\"reference_breakpoints.md\":\"BEhuwXBS\",\"reference_colors.md\":\"o5ltImYJ\",\"reference_layout.md\":\"DqSoofMZ\",\"reference_space.md\":\"luOYAfQg\",\"reference_spacing.md\":\"DdsDhDhS\",\"reference_visual.md\":\"DZFvxgPk\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.2\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
35
-
36
- </body>
37
- </html>