@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/guide/cli.html DELETED
@@ -1,68 +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>CLI Build | 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/guide_cli.md.zXEKk-bu.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>Introduction</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/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</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/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</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/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</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>Core Concepts</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/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</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/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</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/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</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/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</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>Usage</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/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</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/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</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/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</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_guide_cli" data-v-39a288b8><div><h1 id="cli-build" tabindex="-1">CLI Build <a class="header-anchor" href="#cli-build" aria-label="Permalink to &quot;CLI Build&quot;">​</a></h1><p>Use the CLI for production-ready builds with optimized output.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to &quot;Installation&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;"># Install globally</span></span>
22
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
23
- <span class="line"></span>
24
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Or use npx (no install)</span></span>
25
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h2 id="commands" tabindex="-1">Commands <a class="header-anchor" href="#commands" aria-label="Permalink to &quot;Commands&quot;">​</a></h2><h3 id="senangstart-init" tabindex="-1"><code>senangstart init</code> <a class="header-anchor" href="#senangstart-init" aria-label="Permalink to &quot;`senangstart init`&quot;">​</a></h3><p>Create a configuration file:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>This creates <code>senangstart.config.js</code> in your project root with sensible defaults.</p><h3 id="senangstart-build" tabindex="-1"><code>senangstart build</code> <a class="header-anchor" href="#senangstart-build" aria-label="Permalink to &quot;`senangstart build`&quot;">​</a></h3><p>Compile CSS from your source files:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><p><strong>Options:</strong></p><table tabindex="0"><thead><tr><th>Option</th><th>Description</th></tr></thead><tbody><tr><td><code>--minify</code></td><td>Minify the output CSS</td></tr><tr><td><code>--config &lt;path&gt;</code></td><td>Path to config file</td></tr></tbody></table><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;"># Production build with minification</span></span>
26
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span>
27
- <span class="line"></span>
28
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Use custom config</span></span>
29
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --config</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ./custom.config.js</span></span></code></pre></div><h3 id="senangstart-dev" tabindex="-1"><code>senangstart dev</code> <a class="header-anchor" href="#senangstart-dev" aria-label="Permalink to &quot;`senangstart dev`&quot;">​</a></h3><p>Watch mode for development:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>This watches your source files and rebuilds automatically on changes.</p><h2 id="output-files" tabindex="-1">Output Files <a class="header-anchor" href="#output-files" aria-label="Permalink to &quot;Output Files&quot;">​</a></h2><p>The CLI generates three files:</p><table tabindex="0"><thead><tr><th>File</th><th>Description</th></tr></thead><tbody><tr><td><code>public/senangstart.css</code></td><td>Compiled stylesheet</td></tr><tr><td><code>.cursorrules</code></td><td>AI context file for LLMs</td></tr><tr><td><code>types/senang.d.ts</code></td><td>TypeScript definitions</td></tr></tbody></table><h2 id="project-setup" tabindex="-1">Project Setup <a class="header-anchor" href="#project-setup" aria-label="Permalink to &quot;Project Setup&quot;">​</a></h2><h3 id="_1-initialize" tabindex="-1">1. Initialize <a class="header-anchor" href="#_1-initialize" aria-label="Permalink to &quot;1. Initialize&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> your-project</span></span>
30
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -y</span></span>
31
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
32
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="_2-add-html" tabindex="-1">2. Add HTML <a class="header-anchor" href="#_2-add-html" aria-label="Permalink to &quot;2. Add HTML&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;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
39
- <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;flex col center&quot;</span></span>
40
- <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;p:big&quot;</span></span>
41
- <span class="line"><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:primary text:white rounded:big&quot;</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</span></span>
44
- <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>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-build" tabindex="-1">3. Build <a class="header-anchor" href="#_3-build" aria-label="Permalink to &quot;3. Build&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span></span></code></pre></div><h3 id="_4-develop" tabindex="-1">4. Develop <a class="header-anchor" href="#_4-develop" aria-label="Permalink to &quot;4. Develop&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><h2 id="package-json-scripts" tabindex="-1">Package.json Scripts <a class="header-anchor" href="#package-json-scripts" aria-label="Permalink to &quot;Package.json Scripts&quot;">​</a></h2><p>Add these scripts to your <code>package.json</code>:</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</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;">{</span></span>
47
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
48
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;build:css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart build --minify&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
49
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;dev:css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart dev&quot;</span></span>
50
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="integration-with-frameworks" tabindex="-1">Integration with Frameworks <a class="header-anchor" href="#integration-with-frameworks" aria-label="Permalink to &quot;Integration with Frameworks&quot;">​</a></h2><h3 id="vite-react-vue" tabindex="-1">Vite / React / Vue <a class="header-anchor" href="#vite-react-vue" aria-label="Permalink to &quot;Vite / React / Vue&quot;">​</a></h3><p>Add to your build process:</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</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;">{</span></span>
52
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;scripts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
53
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;dev&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;concurrently </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">vite</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> \&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">senangstart dev</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\&quot;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
54
- <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;build&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart build --minify &amp;&amp; vite build&quot;</span></span>
55
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
56
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="next-js" tabindex="-1">Next.js <a class="header-anchor" href="#next-js" aria-label="Permalink to &quot;Next.js&quot;">​</a></h3><p>Import the generated CSS in <code>_app.js</code>:</p><div class="language-jsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">jsx</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;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;../public/senangstart.css&#39;</span></span>
57
- <span class="line"></span>
58
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pageProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
59
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pageProps} /&gt;</span></span>
60
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
61
- <span class="line"></span>
62
- <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;"> MyApp</span></span></code></pre></div><h2 id="ci-cd-integration" tabindex="-1">CI/CD Integration <a class="header-anchor" href="#ci-cd-integration" aria-label="Permalink to &quot;CI/CD Integration&quot;">​</a></h2><p>Add to your build pipeline:</p><div class="language-yaml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">yaml</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;"># GitHub Actions example</span></span>
63
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">- </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">Build CSS</span></span>
64
- <span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> run</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">npx senangstart build --minify</span></span></code></pre></div><h2 id="cdn-vs-cli-comparison" tabindex="-1">CDN vs CLI Comparison <a class="header-anchor" href="#cdn-vs-cli-comparison" aria-label="Permalink to &quot;CDN vs CLI Comparison&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Feature</th><th>CDN JIT</th><th>CLI Build</th></tr></thead><tbody><tr><td>Setup</td><td>Zero config</td><td>Requires npm</td></tr><tr><td>Build Step</td><td>None</td><td>Required</td></tr><tr><td>Performance</td><td>Runtime overhead</td><td>Pre-compiled</td></tr><tr><td>File Size</td><td>~15KB JS</td><td>Only CSS used</td></tr><tr><td>Use Case</td><td>Prototyping</td><td>Production</td></tr><tr><td>Dynamic Content</td><td>✅ Automatic</td><td>Requires rebuild</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/guide/cdn.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>CDN (Zero Build)</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/configuration.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Configuration</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>
65
- <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>
66
-
67
- </body>
68
- </html>
package/docs/.vitepress/dist/guide/configuration.html DELETED
@@ -1,103 +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>Configuration | 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/guide_configuration.md.D2JZzhKm.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>Introduction</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/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</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/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</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/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</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>Core Concepts</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/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</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/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</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/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</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/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</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>Usage</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/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</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/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</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/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</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_guide_configuration" data-v-39a288b8><div><h1 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to &quot;Configuration&quot;">​</a></h1><p>Customize SenangStart CSS with <code>senangstart.config.js</code>.</p><h2 id="creating-a-config-file" tabindex="-1">Creating a Config File <a class="header-anchor" href="#creating-a-config-file" aria-label="Permalink to &quot;Creating a Config File&quot;">​</a></h2><p>Run the init command to create a config file:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>Or create it manually:</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:#6A737D;--shiki-dark:#6A737D;">// senangstart.config.js</span></span>
22
- <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>
23
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Files to scan for SenangStart attributes</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [</span></span>
25
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./**/*.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
26
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.{html,jsx,tsx,vue,svelte}&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
27
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.{html,jsx,tsx}&#39;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
29
- <span class="line"></span>
30
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Output configuration</span></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> output: {</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> css: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./public/senangstart.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minify: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> aiContext: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./.cursorrules&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> typescript: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./types/senang.d.ts&#39;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
37
- <span class="line"></span>
38
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Theme customization</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
40
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Your overrides here</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="content-patterns" tabindex="-1">Content Patterns <a class="header-anchor" href="#content-patterns" aria-label="Permalink to &quot;Content Patterns&quot;">​</a></h2><p>Specify which files to scan:</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:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
43
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./**/*.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// All HTML files</span></span>
44
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.jsx&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// React components</span></span>
45
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./pages/**/*.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Vue pages</span></span>
46
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.svelte&#39;</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><h2 id="output-options" tabindex="-1">Output Options <a class="header-anchor" href="#output-options" aria-label="Permalink to &quot;Output Options&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Option</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td><code>css</code></td><td>Output CSS path</td><td><code>./public/senangstart.css</code></td></tr><tr><td><code>minify</code></td><td>Minify output</td><td><code>false</code></td></tr><tr><td><code>aiContext</code></td><td>AI context file path</td><td><code>./.cursorrules</code></td></tr><tr><td><code>typescript</code></td><td>TypeScript definitions path</td><td><code>./types/senang.d.ts</code></td></tr></tbody></table><h2 id="theme-customization" tabindex="-1">Theme Customization <a class="header-anchor" href="#theme-customization" aria-label="Permalink to &quot;Theme Customization&quot;">​</a></h2><h3 id="custom-spacing" tabindex="-1">Custom Spacing <a class="header-anchor" href="#custom-spacing" aria-label="Permalink to &quot;Custom Spacing&quot;">​</a></h3><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:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
48
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> spacing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tiny&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Override existing</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add new scale</span></span>
51
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;massive&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;512px&#39;</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><h3 id="custom-colors" tabindex="-1">Custom Colors <a class="header-anchor" href="#custom-colors" aria-label="Permalink to &quot;Custom Colors&quot;">​</a></h3><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:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
54
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
55
- <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>
56
- <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>
57
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;custom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#FF5733&#39;</span></span>
58
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
59
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="custom-breakpoints" tabindex="-1">Custom Breakpoints <a class="header-anchor" href="#custom-breakpoints" aria-label="Permalink to &quot;Custom Breakpoints&quot;">​</a></h3><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:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
60
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> screens</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
61
- <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>
62
- <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>
63
- <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>
64
- <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>
65
- <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:#6A737D;--shiki-dark:#6A737D;"> // Add wider breakpoint</span></span>
66
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
67
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="custom-shadows" tabindex="-1">Custom Shadows <a class="header-anchor" href="#custom-shadows" aria-label="Permalink to &quot;Custom Shadows&quot;">​</a></h3><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:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
68
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
69
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;glow&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0 0 20px rgba(59, 130, 246, 0.5)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
70
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;inset&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;inset 0 2px 4px rgba(0,0,0,0.1)&#39;</span></span>
71
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
72
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="full-example" tabindex="-1">Full Example <a class="header-anchor" href="#full-example" aria-label="Permalink to &quot;Full Example&quot;">​</a></h2><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>
73
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: [</span></span>
74
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./src/**/*.{html,jsx,tsx}&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
75
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./components/**/*.vue&#39;</span></span>
76
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
77
- <span class="line"></span>
78
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> output: {</span></span>
79
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> css: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./dist/styles.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
80
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minify: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
81
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> aiContext: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./.cursorrules&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
82
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> typescript: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./src/types/senang.d.ts&#39;</span></span>
83
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
84
- <span class="line"></span>
85
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
86
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spacing: {</span></span>
87
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span></span>
88
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
89
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
90
- <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>
91
- <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>
92
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
93
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
94
- <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>
95
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
96
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
97
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="using-custom-values" tabindex="-1">Using Custom Values <a class="header-anchor" href="#using-custom-values" aria-label="Permalink to &quot;Using Custom Values&quot;">​</a></h2><p>After configuring, use your custom scales:</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;p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom huge padding&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
98
- <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:brand text:accent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom colors&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
99
- <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;tab:p:big wide:p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom breakpoint&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/guide/cli.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>CLI Build</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>
100
- <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>
101
-
102
- </body>
103
- </html>
package/docs/.vitepress/dist/guide/getting-started.html DELETED
@@ -1,71 +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>Getting Started | 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/guide_getting-started.md.to1dkMR9.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 active" 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 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>Introduction</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/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</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/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</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/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</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>Core Concepts</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/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</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/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</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/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</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/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</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>Usage</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/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</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/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</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/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</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_guide_getting-started" data-v-39a288b8><div><h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><p>Get up and running with SenangStart CSS in minutes.</p><h2 id="cdn-zero-build" tabindex="-1">CDN (Zero Build) <span class="VPBadge tip"><!--[-->Recommended for prototyping<!--]--></span> <a class="header-anchor" href="#cdn-zero-build" aria-label="Permalink to &quot;CDN (Zero Build) &lt;Badge type=&quot;tip&quot; text=&quot;Recommended for prototyping&quot; /&gt;&quot;">​</a></h2><p>The fastest way to try SenangStart — no build step required:</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;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</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;">html</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;">head</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;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;My App&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Just add this single script --&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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</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;">head</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;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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>
30
- <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;flex col center&quot;</span></span>
31
- <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;p:big&quot;</span></span>
32
- <span class="line"><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:primary text:white rounded:big&quot;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
34
- <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:giant font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello SenangStart!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</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;m-t:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Zero config, instant styling.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <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>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="how-cdn-jit-works" tabindex="-1">How CDN JIT Works <a class="header-anchor" href="#how-cdn-jit-works" aria-label="Permalink to &quot;How CDN JIT Works&quot;">​</a></h3><ol><li><strong>Scans DOM</strong> — Finds all <code>layout</code>, <code>space</code>, and <code>visual</code> attributes</li><li><strong>Generates CSS</strong> — Compiles styles on-the-fly in the browser</li><li><strong>Injects Styles</strong> — Creates <code>&lt;style&gt;</code> tags with compiled CSS</li><li><strong>Watches Changes</strong> — Uses MutationObserver for dynamic updates</li></ol><h3 id="custom-cdn-config" tabindex="-1">Custom CDN Config <a class="header-anchor" href="#custom-cdn-config" aria-label="Permalink to &quot;Custom CDN Config&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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;theme&quot;: {</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;colors&quot;: {</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;brand&quot;: &quot;#8B5CF6&quot;,</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;accent&quot;: &quot;#EC4899&quot;</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>CDN JIT is perfect for prototyping and learning. For production, use the CLI build for better performance.</p></div><h2 id="cli-production" tabindex="-1">CLI (Production) <span class="VPBadge info"><!--[-->Recommended for production<!--]--></span> <a class="header-anchor" href="#cli-production" aria-label="Permalink to &quot;CLI (Production) &lt;Badge type=&quot;info&quot; text=&quot;Recommended for production&quot; /&gt;&quot;">​</a></h2><h3 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to &quot;Installation&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;"># Install globally</span></span>
49
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
50
- <span class="line"></span>
51
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Or use npx</span></span>
52
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="initialize-config" tabindex="-1">Initialize Config <a class="header-anchor" href="#initialize-config" aria-label="Permalink to &quot;Initialize Config&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>This creates <code>senangstart.config.js</code> in your project root.</p><h3 id="add-to-html" tabindex="-1">Add to HTML <a class="header-anchor" href="#add-to-html" aria-label="Permalink to &quot;Add to HTML&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;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="start-development" tabindex="-1">Start Development <a class="header-anchor" href="#start-development" aria-label="Permalink to &quot;Start Development&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>This watches your files and rebuilds on changes.</p><h3 id="build-for-production" tabindex="-1">Build for Production <a class="header-anchor" href="#build-for-production" aria-label="Permalink to &quot;Build for Production&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span></code></pre></div><h2 id="your-first-component" tabindex="-1">Your First Component <a class="header-anchor" href="#your-first-component" aria-label="Permalink to &quot;Your First Component&quot;">​</a></h2><p>Let&#39;s create a simple card:</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>
55
- <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;flex col&quot;</span></span>
56
- <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;w:[320px] p:medium&quot;</span></span>
57
- <span class="line"><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:white rounded:big shadow:medium&quot;</span></span>
58
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&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;flex between&quot;</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;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
60
- <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;font:bold text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Profile&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
61
- <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:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Edit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
62
- <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>
63
- <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:#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&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</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:grey text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Username&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <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:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;@senang_dev&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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>
67
- <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><p><strong>What&#39;s happening:</strong></p><ul><li><code>layout=&quot;flex col&quot;</code> — Flexbox, vertical direction</li><li><code>space=&quot;w:[320px] p:medium&quot;</code> — 320px width, medium padding</li><li><code>visual=&quot;bg:white rounded:big shadow:medium&quot;</code> — White background, rounded corners, shadow</li></ul><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;">​</a></h2><ul><li><a href="/senangstart-css/guide/tri-attribute.html">Tri-Attribute Syntax</a> — Deep dive into layout, space, visual</li><li><a href="/senangstart-css/guide/natural-scale.html">The Natural Scale</a> — Understand spacing philosophy</li><li><a href="/senangstart-css/guide/configuration.html">Configuration</a> — Customize the theme</li></ul></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/guide/" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>What is SenangStart?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/philosophy.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Why Natural Language?</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>
68
- <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>
69
-
70
- </body>
71
- </html>