@bookklik/senangstart-css 0.1.4 → 0.1.8

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 (527) hide show
  1. package/.github/workflows/deploy-docs.yml +7 -1
  2. package/dist/senangstart-css.js +1436 -14
  3. package/dist/senangstart-css.min.js +1159 -10
  4. package/docs/.vitepress/config.js +624 -18
  5. package/docs/.vitepress/theme/custom.css +0 -1
  6. package/docs/SYNTAX-REFERENCE.md +1555 -0
  7. package/docs/guide/preflight.md +139 -0
  8. package/docs/index.md +8 -20
  9. package/docs/ms/guide/preflight.md +139 -0
  10. package/docs/ms/index.md +8 -20
  11. package/docs/ms/reference/colors.md +45 -45
  12. package/docs/ms/reference/layout/align-content.md +35 -0
  13. package/docs/ms/reference/layout/align-items.md +33 -0
  14. package/docs/ms/reference/layout/align-self.md +34 -0
  15. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  16. package/docs/ms/reference/layout/border-collapse.md +30 -0
  17. package/docs/ms/reference/layout/border-spacing.md +39 -0
  18. package/docs/ms/reference/layout/box-sizing.md +30 -0
  19. package/docs/ms/reference/layout/caption-side.md +30 -0
  20. package/docs/ms/reference/layout/columns.md +30 -0
  21. package/docs/ms/reference/layout/container.md +29 -0
  22. package/docs/ms/reference/layout/display.md +60 -0
  23. package/docs/ms/reference/layout/flex-basis.md +38 -0
  24. package/docs/ms/reference/layout/flex-direction.md +33 -0
  25. package/docs/ms/reference/layout/flex-items.md +32 -0
  26. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  27. package/docs/ms/reference/layout/flex.md +40 -0
  28. package/docs/ms/reference/layout/float-clear.md +32 -0
  29. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  30. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  31. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  32. package/docs/ms/reference/layout/grid-columns.md +32 -0
  33. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  34. package/docs/ms/reference/layout/grid-rows.md +31 -0
  35. package/docs/ms/reference/layout/inset.md +44 -0
  36. package/docs/ms/reference/layout/isolation.md +30 -0
  37. package/docs/ms/reference/layout/justify-content.md +36 -0
  38. package/docs/ms/reference/layout/justify-items.md +32 -0
  39. package/docs/ms/reference/layout/justify-self.md +33 -0
  40. package/docs/ms/reference/layout/object-fit.md +33 -0
  41. package/docs/ms/reference/layout/object-position.md +45 -0
  42. package/docs/ms/reference/layout/order.md +32 -0
  43. package/docs/ms/reference/layout/overflow.md +34 -0
  44. package/docs/ms/reference/layout/overscroll.md +31 -0
  45. package/docs/ms/reference/layout/place-content.md +35 -0
  46. package/docs/ms/reference/layout/place-items.md +32 -0
  47. package/docs/ms/reference/layout/place-self.md +33 -0
  48. package/docs/ms/reference/layout/position.md +34 -0
  49. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  50. package/docs/ms/reference/layout/table-layout.md +30 -0
  51. package/docs/ms/reference/layout/visibility.md +30 -0
  52. package/docs/ms/reference/layout/z-index.md +33 -0
  53. package/docs/ms/reference/layout.md +53 -95
  54. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  55. package/docs/ms/reference/space/gap.md +44 -0
  56. package/docs/ms/reference/space/height.md +44 -0
  57. package/docs/ms/reference/space/margin.md +49 -0
  58. package/docs/ms/reference/space/padding.md +49 -0
  59. package/docs/ms/reference/space/scale-reference.md +43 -0
  60. package/docs/ms/reference/space/sizing.md +27 -0
  61. package/docs/ms/reference/space/width.md +45 -0
  62. package/docs/ms/reference/space.md +15 -99
  63. package/docs/ms/reference/spacing.md +22 -8
  64. package/docs/ms/reference/visual/accent-color.md +31 -0
  65. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  66. package/docs/ms/reference/visual/animation-delay.md +41 -0
  67. package/docs/ms/reference/visual/animation-direction.md +32 -0
  68. package/docs/ms/reference/visual/animation-duration.md +43 -0
  69. package/docs/ms/reference/visual/animation-fill.md +32 -0
  70. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  71. package/docs/ms/reference/visual/animation-play.md +30 -0
  72. package/docs/ms/reference/visual/appearance.md +30 -0
  73. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  74. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  75. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  76. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  78. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  79. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  80. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  81. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  82. package/docs/ms/reference/visual/background-attachment.md +31 -0
  83. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  84. package/docs/ms/reference/visual/background-clip.md +32 -0
  85. package/docs/ms/reference/visual/background-color.md +33 -0
  86. package/docs/ms/reference/visual/background-image.md +41 -0
  87. package/docs/ms/reference/visual/background-origin.md +31 -0
  88. package/docs/ms/reference/visual/background-position.md +45 -0
  89. package/docs/ms/reference/visual/background-repeat.md +34 -0
  90. package/docs/ms/reference/visual/background-size.md +39 -0
  91. package/docs/ms/reference/visual/background.md +13 -0
  92. package/docs/ms/reference/visual/blend-modes.md +34 -0
  93. package/docs/ms/reference/visual/border-radius.md +34 -0
  94. package/docs/ms/reference/visual/border-style.md +33 -0
  95. package/docs/ms/reference/visual/border-width.md +44 -0
  96. package/docs/ms/reference/visual/border.md +43 -0
  97. package/docs/ms/reference/visual/box-shadow.md +33 -0
  98. package/docs/ms/reference/visual/caret-color.md +31 -0
  99. package/docs/ms/reference/visual/color-scheme.md +31 -0
  100. package/docs/ms/reference/visual/cursor.md +37 -0
  101. package/docs/ms/reference/visual/field-sizing.md +30 -0
  102. package/docs/ms/reference/visual/fill.md +38 -0
  103. package/docs/ms/reference/visual/filter-blur.md +43 -0
  104. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  105. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  106. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  107. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  108. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  109. package/docs/ms/reference/visual/filter-invert.md +39 -0
  110. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  111. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  112. package/docs/ms/reference/visual/font-family.md +31 -0
  113. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  114. package/docs/ms/reference/visual/font-style.md +30 -0
  115. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  116. package/docs/ms/reference/visual/font-weight.md +31 -0
  117. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  118. package/docs/ms/reference/visual/hyphens.md +31 -0
  119. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  120. package/docs/ms/reference/visual/line-clamp.md +40 -0
  121. package/docs/ms/reference/visual/line-height.md +42 -0
  122. package/docs/ms/reference/visual/list-style.md +34 -0
  123. package/docs/ms/reference/visual/mask.md +39 -0
  124. package/docs/ms/reference/visual/opacity.md +33 -0
  125. package/docs/ms/reference/visual/outline.md +31 -0
  126. package/docs/ms/reference/visual/pointer-events.md +30 -0
  127. package/docs/ms/reference/visual/resize.md +32 -0
  128. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  129. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  130. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  131. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  132. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  133. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  134. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  135. package/docs/ms/reference/visual/stroke-width.md +39 -0
  136. package/docs/ms/reference/visual/stroke.md +38 -0
  137. package/docs/ms/reference/visual/text-alignment.md +32 -0
  138. package/docs/ms/reference/visual/text-color.md +41 -0
  139. package/docs/ms/reference/visual/text-decoration.md +32 -0
  140. package/docs/ms/reference/visual/text-indent.md +37 -0
  141. package/docs/ms/reference/visual/text-overflow.md +31 -0
  142. package/docs/ms/reference/visual/text-shadow.md +40 -0
  143. package/docs/ms/reference/visual/text-size.md +32 -0
  144. package/docs/ms/reference/visual/text-transform.md +32 -0
  145. package/docs/ms/reference/visual/text-wrap.md +32 -0
  146. package/docs/ms/reference/visual/touch-action.md +36 -0
  147. package/docs/ms/reference/visual/transform-backface.md +30 -0
  148. package/docs/ms/reference/visual/transform-origin.md +45 -0
  149. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  150. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  151. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  152. package/docs/ms/reference/visual/transform-scale.md +43 -0
  153. package/docs/ms/reference/visual/transform-skew.md +40 -0
  154. package/docs/ms/reference/visual/transform-style.md +30 -0
  155. package/docs/ms/reference/visual/transform-translate.md +39 -0
  156. package/docs/ms/reference/visual/transition-delay.md +41 -0
  157. package/docs/ms/reference/visual/transition-duration.md +43 -0
  158. package/docs/ms/reference/visual/transition-property.md +34 -0
  159. package/docs/ms/reference/visual/transition-timing.md +40 -0
  160. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  161. package/docs/ms/reference/visual/user-select.md +32 -0
  162. package/docs/ms/reference/visual/vertical-align.md +36 -0
  163. package/docs/ms/reference/visual/whitespace.md +34 -0
  164. package/docs/ms/reference/visual/will-change.md +33 -0
  165. package/docs/ms/reference/visual/word-break.md +32 -0
  166. package/docs/ms/reference/visual.md +145 -148
  167. package/docs/public/assets/senangstart-css.min.js +1545 -0
  168. package/docs/reference/layout/align-content.md +35 -0
  169. package/docs/reference/layout/align-items.md +33 -0
  170. package/docs/reference/layout/align-self.md +34 -0
  171. package/docs/reference/layout/aspect-ratio.md +40 -0
  172. package/docs/reference/layout/border-collapse.md +30 -0
  173. package/docs/reference/layout/border-spacing.md +39 -0
  174. package/docs/reference/layout/box-sizing.md +30 -0
  175. package/docs/reference/layout/caption-side.md +30 -0
  176. package/docs/reference/layout/columns.md +30 -0
  177. package/docs/reference/layout/container.md +29 -0
  178. package/docs/reference/layout/display.md +60 -0
  179. package/docs/reference/layout/flex-basis.md +38 -0
  180. package/docs/reference/layout/flex-direction.md +33 -0
  181. package/docs/reference/layout/flex-items.md +32 -0
  182. package/docs/reference/layout/flex-wrap.md +31 -0
  183. package/docs/reference/layout/flex.md +40 -0
  184. package/docs/reference/layout/float-clear.md +32 -0
  185. package/docs/reference/layout/grid-auto-flow.md +33 -0
  186. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  187. package/docs/reference/layout/grid-column-span.md +31 -0
  188. package/docs/reference/layout/grid-columns.md +32 -0
  189. package/docs/reference/layout/grid-row-span.md +30 -0
  190. package/docs/reference/layout/grid-rows.md +31 -0
  191. package/docs/reference/layout/inset.md +44 -0
  192. package/docs/reference/layout/isolation.md +30 -0
  193. package/docs/reference/layout/justify-content.md +36 -0
  194. package/docs/reference/layout/justify-items.md +32 -0
  195. package/docs/reference/layout/justify-self.md +33 -0
  196. package/docs/reference/layout/object-fit.md +33 -0
  197. package/docs/reference/layout/object-position.md +45 -0
  198. package/docs/reference/layout/order.md +32 -0
  199. package/docs/reference/layout/overflow.md +34 -0
  200. package/docs/reference/layout/overscroll.md +31 -0
  201. package/docs/reference/layout/place-content.md +35 -0
  202. package/docs/reference/layout/place-items.md +32 -0
  203. package/docs/reference/layout/place-self.md +33 -0
  204. package/docs/reference/layout/position.md +34 -0
  205. package/docs/reference/layout/shorthand-alignment.md +34 -0
  206. package/docs/reference/layout/table-layout.md +30 -0
  207. package/docs/reference/layout/visibility.md +30 -0
  208. package/docs/reference/layout/z-index.md +33 -0
  209. package/docs/reference/layout.md +60 -102
  210. package/docs/reference/space/arbitrary-values.md +39 -0
  211. package/docs/reference/space/gap.md +44 -0
  212. package/docs/reference/space/height.md +44 -0
  213. package/docs/reference/space/margin.md +49 -0
  214. package/docs/reference/space/padding.md +49 -0
  215. package/docs/reference/space/scale-reference.md +43 -0
  216. package/docs/reference/space/width.md +45 -0
  217. package/docs/reference/space.md +14 -98
  218. package/docs/reference/spacing.md +22 -8
  219. package/docs/reference/visual/accent-color.md +31 -0
  220. package/docs/reference/visual/animation-builtin.md +41 -0
  221. package/docs/reference/visual/animation-delay.md +41 -0
  222. package/docs/reference/visual/animation-direction.md +32 -0
  223. package/docs/reference/visual/animation-duration.md +43 -0
  224. package/docs/reference/visual/animation-fill.md +32 -0
  225. package/docs/reference/visual/animation-iteration.md +30 -0
  226. package/docs/reference/visual/animation-play.md +30 -0
  227. package/docs/reference/visual/appearance.md +30 -0
  228. package/docs/reference/visual/backdrop-blur.md +43 -0
  229. package/docs/reference/visual/backdrop-brightness.md +41 -0
  230. package/docs/reference/visual/backdrop-contrast.md +41 -0
  231. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  232. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  233. package/docs/reference/visual/backdrop-invert.md +39 -0
  234. package/docs/reference/visual/backdrop-opacity.md +39 -0
  235. package/docs/reference/visual/backdrop-saturate.md +41 -0
  236. package/docs/reference/visual/backdrop-sepia.md +39 -0
  237. package/docs/reference/visual/background-attachment.md +31 -0
  238. package/docs/reference/visual/background-blend-mode.md +34 -0
  239. package/docs/reference/visual/background-clip.md +32 -0
  240. package/docs/reference/visual/background-color.md +33 -0
  241. package/docs/reference/visual/background-image.md +41 -0
  242. package/docs/reference/visual/background-origin.md +31 -0
  243. package/docs/reference/visual/background-position.md +45 -0
  244. package/docs/reference/visual/background-repeat.md +34 -0
  245. package/docs/reference/visual/background-size.md +39 -0
  246. package/docs/reference/visual/blend-modes.md +34 -0
  247. package/docs/reference/visual/border-radius.md +34 -0
  248. package/docs/reference/visual/border-style.md +33 -0
  249. package/docs/reference/visual/border-width.md +44 -0
  250. package/docs/reference/visual/border.md +43 -0
  251. package/docs/reference/visual/box-shadow.md +33 -0
  252. package/docs/reference/visual/caret-color.md +31 -0
  253. package/docs/reference/visual/color-scheme.md +31 -0
  254. package/docs/reference/visual/cursor.md +37 -0
  255. package/docs/reference/visual/field-sizing.md +30 -0
  256. package/docs/reference/visual/fill.md +38 -0
  257. package/docs/reference/visual/filter-blur.md +43 -0
  258. package/docs/reference/visual/filter-brightness.md +41 -0
  259. package/docs/reference/visual/filter-contrast.md +41 -0
  260. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  261. package/docs/reference/visual/filter-grayscale.md +39 -0
  262. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  263. package/docs/reference/visual/filter-invert.md +39 -0
  264. package/docs/reference/visual/filter-saturate.md +41 -0
  265. package/docs/reference/visual/filter-sepia.md +39 -0
  266. package/docs/reference/visual/font-family.md +31 -0
  267. package/docs/reference/visual/font-smoothing.md +30 -0
  268. package/docs/reference/visual/font-style.md +30 -0
  269. package/docs/reference/visual/font-variant-numeric.md +35 -0
  270. package/docs/reference/visual/font-weight.md +31 -0
  271. package/docs/reference/visual/forced-color-adjust.md +30 -0
  272. package/docs/reference/visual/hyphens.md +31 -0
  273. package/docs/reference/visual/letter-spacing.md +42 -0
  274. package/docs/reference/visual/line-clamp.md +40 -0
  275. package/docs/reference/visual/line-height.md +42 -0
  276. package/docs/reference/visual/list-style.md +34 -0
  277. package/docs/reference/visual/mask.md +39 -0
  278. package/docs/reference/visual/opacity.md +33 -0
  279. package/docs/reference/visual/outline.md +31 -0
  280. package/docs/reference/visual/pointer-events.md +30 -0
  281. package/docs/reference/visual/resize.md +32 -0
  282. package/docs/reference/visual/scroll-behavior.md +30 -0
  283. package/docs/reference/visual/scroll-margin.md +41 -0
  284. package/docs/reference/visual/scroll-padding.md +41 -0
  285. package/docs/reference/visual/scroll-snap-align.md +32 -0
  286. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  287. package/docs/reference/visual/scroll-snap-type.md +34 -0
  288. package/docs/reference/visual/state-prefixes.md +37 -0
  289. package/docs/reference/visual/stroke-width.md +39 -0
  290. package/docs/reference/visual/stroke.md +38 -0
  291. package/docs/reference/visual/text-alignment.md +32 -0
  292. package/docs/reference/visual/text-color.md +41 -0
  293. package/docs/reference/visual/text-decoration.md +32 -0
  294. package/docs/reference/visual/text-indent.md +37 -0
  295. package/docs/reference/visual/text-overflow.md +31 -0
  296. package/docs/reference/visual/text-shadow.md +40 -0
  297. package/docs/reference/visual/text-size.md +32 -0
  298. package/docs/reference/visual/text-transform.md +32 -0
  299. package/docs/reference/visual/text-wrap.md +32 -0
  300. package/docs/reference/visual/touch-action.md +36 -0
  301. package/docs/reference/visual/transform-backface.md +30 -0
  302. package/docs/reference/visual/transform-origin.md +45 -0
  303. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  304. package/docs/reference/visual/transform-perspective.md +43 -0
  305. package/docs/reference/visual/transform-rotate.md +40 -0
  306. package/docs/reference/visual/transform-scale.md +43 -0
  307. package/docs/reference/visual/transform-skew.md +40 -0
  308. package/docs/reference/visual/transform-style.md +30 -0
  309. package/docs/reference/visual/transform-translate.md +39 -0
  310. package/docs/reference/visual/transition-delay.md +41 -0
  311. package/docs/reference/visual/transition-duration.md +43 -0
  312. package/docs/reference/visual/transition-property.md +34 -0
  313. package/docs/reference/visual/transition-timing.md +40 -0
  314. package/docs/reference/visual/typography-keywords.md +81 -0
  315. package/docs/reference/visual/user-select.md +32 -0
  316. package/docs/reference/visual/vertical-align.md +36 -0
  317. package/docs/reference/visual/whitespace.md +34 -0
  318. package/docs/reference/visual/will-change.md +33 -0
  319. package/docs/reference/visual/word-break.md +32 -0
  320. package/docs/reference/visual.md +151 -154
  321. package/docs/syntax-reference.json +1973 -0
  322. package/package.json +12 -4
  323. package/playground/index.html +78 -0
  324. package/playground/jit-test.html +384 -0
  325. package/scripts/extract-syntax.js +152 -0
  326. package/scripts/generate-docs.js +352 -0
  327. package/src/cdn/jit.js +1436 -14
  328. package/src/cli/commands/build.js +5 -0
  329. package/src/cli/index.js +2 -0
  330. package/src/compiler/generators/css.js +1537 -25
  331. package/src/compiler/generators/preflight.js +379 -0
  332. package/src/config/defaults.js +19 -1
  333. package/src/definitions/index.js +153 -0
  334. package/src/definitions/layout-alignment.js +257 -0
  335. package/src/definitions/layout-flex.js +209 -0
  336. package/src/definitions/layout-grid.js +150 -0
  337. package/src/definitions/layout-positioning.js +89 -0
  338. package/src/definitions/layout-table.js +98 -0
  339. package/src/definitions/layout-utilities.js +262 -0
  340. package/src/definitions/layout.js +195 -0
  341. package/src/definitions/space.js +164 -0
  342. package/src/definitions/visual-backgrounds.js +423 -0
  343. package/src/definitions/visual-borders.js +111 -0
  344. package/src/definitions/visual-filters.js +204 -0
  345. package/src/definitions/visual-interactivity.js +292 -0
  346. package/src/definitions/visual-svg.js +80 -0
  347. package/src/definitions/visual-transform3d.js +159 -0
  348. package/src/definitions/visual-transforms.js +142 -0
  349. package/src/definitions/visual-transitions.js +277 -0
  350. package/src/definitions/visual-typography.js +386 -0
  351. package/src/definitions/visual.js +542 -0
  352. package/tests/helpers/test-utils.js +144 -0
  353. package/tests/integration/compiler.test.js +247 -0
  354. package/tests/sync/docs-sync.test.js +364 -0
  355. package/tests/unit/compiler/generators/css.test.js +719 -0
  356. package/tests/unit/compiler/parser.test.js +244 -0
  357. package/tests/unit/compiler/tokenizer.test.js +305 -0
  358. package/tests/unit/config/defaults.test.js +168 -0
  359. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  360. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  361. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/package.json +0 -3
  363. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  364. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  365. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  366. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  367. package/docs/.vitepress/cache/deps/vue.js +0 -347
  368. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  369. package/docs/.vitepress/dist/404.html +0 -22
  370. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  371. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  372. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  373. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  374. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  375. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  376. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  377. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  378. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  379. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  380. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  381. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  382. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  383. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  384. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  385. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  386. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  387. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  388. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  389. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  390. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  391. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  392. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  393. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  394. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  395. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  396. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  397. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  398. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  399. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  400. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  401. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  402. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  403. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  404. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  405. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  406. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  407. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  419. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  420. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  421. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  422. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  423. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  424. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  425. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  426. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  427. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  428. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  429. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  430. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  431. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  432. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  433. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  434. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  435. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  436. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  437. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  438. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  439. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  440. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  441. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  442. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  443. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  444. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  445. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  446. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  447. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  448. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  449. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  450. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  451. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  452. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  453. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  454. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  455. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  456. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  457. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  458. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  459. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  460. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  461. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  462. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  463. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  464. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  465. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  466. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  467. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  468. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  469. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  470. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  471. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  472. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  473. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  474. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  475. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  476. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  477. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  478. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  479. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  480. package/docs/.vitepress/dist/examples/cards.html +0 -108
  481. package/docs/.vitepress/dist/examples/forms.html +0 -193
  482. package/docs/.vitepress/dist/examples/hero.html +0 -142
  483. package/docs/.vitepress/dist/examples/index.html +0 -76
  484. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  485. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  486. package/docs/.vitepress/dist/guide/cli.html +0 -68
  487. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  488. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  489. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  490. package/docs/.vitepress/dist/guide/index.html +0 -27
  491. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  492. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  493. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  494. package/docs/.vitepress/dist/guide/states.html +0 -101
  495. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  496. package/docs/.vitepress/dist/hashmap.json +0 -1
  497. package/docs/.vitepress/dist/index.html +0 -31
  498. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  499. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  500. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  501. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  502. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  503. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  504. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  505. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  506. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  507. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  508. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  509. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  510. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  511. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  512. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  513. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  514. package/docs/.vitepress/dist/ms/index.html +0 -31
  515. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  516. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  517. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  518. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  519. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  520. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  521. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  522. package/docs/.vitepress/dist/reference/colors.html +0 -41
  523. package/docs/.vitepress/dist/reference/layout.html +0 -37
  524. package/docs/.vitepress/dist/reference/space.html +0 -48
  525. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  526. package/docs/.vitepress/dist/reference/visual.html +0 -46
  527. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/ms/guide/cli.html DELETED
@@ -1,68 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ms" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Bina CLI | SenangStart CSS</title>
7
- <meta name="description" content="Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.D82StYDI.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.DBXoyO4w.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.CaXH1t3X.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.I305HrzY.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/ms_guide_cli.md.DBjxv3-o.lean.js">
17
- <link rel="icon" href="https://senangstart.com/img/ss_icon_accent.svg">
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/ms/" 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><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/ms/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Panduan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Rujukan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Contoh</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.4</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/ms/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Log Perubahan</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="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><span class="vpi-languages option-icon" data-v-cf11d7a2></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-88af2de4><p class="title" data-v-88af2de4>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/guide/cli.html" data-v-35975db6><!--[--><span data-v-35975db6>English</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><!----><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 translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/guide/cli.html" data-v-35975db6><!--[--><span data-v-35975db6>English</span><!--]--></a></div><!--]--></div><!----><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>Pengenalan</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/ms/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Apa itu 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/ms/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Bermula</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/ms/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mengapa Bahasa Semula Jadi?</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>Konsep Teras</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/ms/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Sintaks Tri-Atribut</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/ms/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Skala Semula Jadi</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/ms/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Reka Bentuk Responsif</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/ms/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & Keadaan</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/ms/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mod Gelap</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>Penggunaan</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/ms/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Tanpa Bina)</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/ms/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Bina CLI</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/ms/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Konfigurasi</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_ms_guide_cli" data-v-39a288b8><div><h1 id="bina-cli" tabindex="-1">Bina CLI <a class="header-anchor" href="#bina-cli" aria-label="Permalink to &quot;Bina CLI&quot;">​</a></h1><p>Guna CLI untuk bina sedia produksi dengan output teroptimum.</p><h2 id="pemasangan" tabindex="-1">Pemasangan <a class="header-anchor" href="#pemasangan" aria-label="Permalink to &quot;Pemasangan&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;"># Pasang secara global</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;"># Atau guna npx (tanpa pasang)</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="arahan" tabindex="-1">Arahan <a class="header-anchor" href="#arahan" aria-label="Permalink to &quot;Arahan&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>Cipta fail konfigurasi:</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>Ini mencipta <code>senangstart.config.js</code> dalam root projek anda dengan lalai yang baik.</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>Kompil CSS dari fail sumber anda:</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>Pilihan:</strong></p><table tabindex="0"><thead><tr><th>Pilihan</th><th>Penerangan</th></tr></thead><tbody><tr><td><code>--minify</code></td><td>Minify output CSS</td></tr><tr><td><code>--config &lt;path&gt;</code></td><td>Laluan ke fail config</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;"># Build produksi dengan 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;"># Guna config tersuai</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>Mod watch untuk pembangunan:</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>Ini memantau fail sumber anda dan membina semula secara automatik apabila ada perubahan.</p><h2 id="fail-output" tabindex="-1">Fail Output <a class="header-anchor" href="#fail-output" aria-label="Permalink to &quot;Fail Output&quot;">​</a></h2><p>CLI menghasilkan tiga fail:</p><table tabindex="0"><thead><tr><th>Fail</th><th>Penerangan</th></tr></thead><tbody><tr><td><code>public/senangstart.css</code></td><td>Stylesheet terkompil</td></tr><tr><td><code>.cursorrules</code></td><td>Fail konteks AI untuk LLM</td></tr><tr><td><code>types/senang.d.ts</code></td><td>Definisi TypeScript</td></tr></tbody></table><h2 id="persediaan-projek" tabindex="-1">Persediaan Projek <a class="header-anchor" href="#persediaan-projek" aria-label="Permalink to &quot;Persediaan Projek&quot;">​</a></h2><h3 id="_1-mulakan" tabindex="-1">1. Mulakan <a class="header-anchor" href="#_1-mulakan" aria-label="Permalink to &quot;1. Mulakan&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;"> projek-anda</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-tambah-html" tabindex="-1">2. Tambah HTML <a class="header-anchor" href="#_2-tambah-html" aria-label="Permalink to &quot;2. Tambah 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-bina" tabindex="-1">3. Bina <a class="header-anchor" href="#_3-bina" aria-label="Permalink to &quot;3. Bina&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-pembangunan" tabindex="-1">4. Pembangunan <a class="header-anchor" href="#_4-pembangunan" aria-label="Permalink to &quot;4. Pembangunan&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="skrip-package-json" tabindex="-1">Skrip Package.json <a class="header-anchor" href="#skrip-package-json" aria-label="Permalink to &quot;Skrip Package.json&quot;">​</a></h2><p>Tambah skrip ini ke <code>package.json</code> anda:</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="integrasi-dengan-framework" tabindex="-1">Integrasi dengan Framework <a class="header-anchor" href="#integrasi-dengan-framework" aria-label="Permalink to &quot;Integrasi dengan Framework&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>Tambah ke proses bina anda:</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 CSS yang dijana dalam <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="integrasi-ci-cd" tabindex="-1">Integrasi CI/CD <a class="header-anchor" href="#integrasi-ci-cd" aria-label="Permalink to &quot;Integrasi CI/CD&quot;">​</a></h2><p>Tambah ke pipeline bina anda:</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;"># Contoh GitHub Actions</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="perbandingan-cdn-vs-cli" tabindex="-1">Perbandingan CDN vs CLI <a class="header-anchor" href="#perbandingan-cdn-vs-cli" aria-label="Permalink to &quot;Perbandingan CDN vs CLI&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Ciri</th><th>CDN JIT</th><th>CLI Build</th></tr></thead><tbody><tr><td>Persediaan</td><td>Tanpa config</td><td>Memerlukan npm</td></tr><tr><td>Langkah Bina</td><td>Tiada</td><td>Diperlukan</td></tr><tr><td>Prestasi</td><td>Overhead runtime</td><td>Pra-kompil</td></tr><tr><td>Saiz Fail</td><td>~15KB JS</td><td>Hanya CSS yang digunakan</td></tr><tr><td>Kes Penggunaan</td><td>Prototaip</td><td>Produksi</td></tr><tr><td>Kandungan Dinamik</td><td>✅ Automatik</td><td>Perlu 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/ms/guide/cdn.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>CDN (Tanpa Bina)</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/guide/configuration.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Konfigurasi</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\":\"BCzaqSD6\",\"examples_forms.md\":\"DOjr9LrG\",\"examples_hero.md\":\"CAorji-Y\",\"examples_index.md\":\"BjUNsTob\",\"examples_navigation.md\":\"DvL-Yv_5\",\"guide_cdn.md\":\"Bbb7-icp\",\"guide_cli.md\":\"yLsOZ7NL\",\"guide_configuration.md\":\"DN4FfKw4\",\"guide_dark-mode.md\":\"D6UJvQtM\",\"guide_getting-started.md\":\"K5nA8wXY\",\"guide_index.md\":\"B0lRU150\",\"guide_natural-scale.md\":\"vvauT7U1\",\"guide_philosophy.md\":\"mOb9kp32\",\"guide_responsive.md\":\"C7cF-4cR\",\"guide_states.md\":\"CwtGEGHB\",\"guide_tri-attribute.md\":\"CpjJLEMP\",\"index.md\":\"mYp6_S5X\",\"ms_examples_cards.md\":\"CaE5JNAs\",\"ms_examples_forms.md\":\"VvDzMzxF\",\"ms_examples_hero.md\":\"DC4c3kKW\",\"ms_examples_index.md\":\"C13ShcjA\",\"ms_examples_navigation.md\":\"BPtVjKbk\",\"ms_guide_cdn.md\":\"tZFpEjTS\",\"ms_guide_cli.md\":\"DBjxv3-o\",\"ms_guide_configuration.md\":\"CyYNqREm\",\"ms_guide_dark-mode.md\":\"DWDWvzzv\",\"ms_guide_getting-started.md\":\"WoQwRhlY\",\"ms_guide_index.md\":\"pHpXZMmU\",\"ms_guide_natural-scale.md\":\"BiUfU-TH\",\"ms_guide_philosophy.md\":\"hf3SG2Ts\",\"ms_guide_responsive.md\":\"C4yS3zzM\",\"ms_guide_states.md\":\"DkDEjPdC\",\"ms_guide_tri-attribute.md\":\"C3Es_V5J\",\"ms_index.md\":\"Bmo9il08\",\"ms_reference_breakpoints.md\":\"DR7i_--b\",\"ms_reference_colors.md\":\"06ZYiMcJ\",\"ms_reference_layout.md\":\"NGL6A5SR\",\"ms_reference_space.md\":\"BG5YQ-09\",\"ms_reference_spacing.md\":\"XmXLLPOZ\",\"ms_reference_visual.md\":\"BVOlkEqc\",\"reference_breakpoints.md\":\"BRbG8Fzi\",\"reference_colors.md\":\"C7j7dSO1\",\"reference_layout.md\":\"BWJ5NxSp\",\"reference_space.md\":\"DCsqfTWb\",\"reference_spacing.md\":\"BInFD8gd\",\"reference_visual.md\":\"BRK7S9T1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"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\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.4\",\"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\":\"Dark Mode\",\"link\":\"/guide/dark-mode\"}]},{\"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\"}]}]}}},\"ms\":{\"label\":\"Bahasa Melayu\",\"lang\":\"ms\",\"title\":\"SenangStart CSS\",\"description\":\"Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"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\"},\"nav\":[{\"text\":\"Panduan\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Rujukan\",\"link\":\"/ms/reference/layout\"},{\"text\":\"Contoh\",\"link\":\"/ms/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Log Perubahan\",\"link\":\"/ms/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/ms/guide/\":[{\"text\":\"Pengenalan\",\"items\":[{\"text\":\"Apa itu SenangStart?\",\"link\":\"/ms/guide/\"},{\"text\":\"Bermula\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Mengapa Bahasa Semula Jadi?\",\"link\":\"/ms/guide/philosophy\"}]},{\"text\":\"Konsep Teras\",\"items\":[{\"text\":\"Sintaks Tri-Atribut\",\"link\":\"/ms/guide/tri-attribute\"},{\"text\":\"Skala Semula Jadi\",\"link\":\"/ms/guide/natural-scale\"},{\"text\":\"Reka Bentuk Responsif\",\"link\":\"/ms/guide/responsive\"},{\"text\":\"Hover & Keadaan\",\"link\":\"/ms/guide/states\"},{\"text\":\"Mod Gelap\",\"link\":\"/ms/guide/dark-mode\"}]},{\"text\":\"Penggunaan\",\"items\":[{\"text\":\"CDN (Tanpa Bina)\",\"link\":\"/ms/guide/cdn\"},{\"text\":\"Bina CLI\",\"link\":\"/ms/guide/cli\"},{\"text\":\"Konfigurasi\",\"link\":\"/ms/guide/configuration\"}]}],\"/ms/reference/\":[{\"text\":\"Atribut\",\"items\":[{\"text\":\"layout\",\"link\":\"/ms/reference/layout\"},{\"text\":\"space\",\"link\":\"/ms/reference/space\"},{\"text\":\"visual\",\"link\":\"/ms/reference/visual\"}]},{\"text\":\"Tema\",\"items\":[{\"text\":\"Jarak\",\"link\":\"/ms/reference/spacing\"},{\"text\":\"Warna\",\"link\":\"/ms/reference/colors\"},{\"text\":\"Breakpoint\",\"link\":\"/ms/reference/breakpoints\"}]}],\"/ms/examples/\":[{\"text\":\"Komponen\",\"items\":[{\"text\":\"Gambaran Keseluruhan\",\"link\":\"/ms/examples/\"},{\"text\":\"Kad\",\"link\":\"/ms/examples/cards\"},{\"text\":\"Navigasi\",\"link\":\"/ms/examples/navigation\"},{\"text\":\"Bahagian Hero\",\"link\":\"/ms/examples/hero\"},{\"text\":\"Borang\",\"link\":\"/ms/examples/forms\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
66
-
67
- </body>
68
- </html>
package/docs/.vitepress/dist/ms/guide/configuration.html DELETED
@@ -1,103 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ms" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Konfigurasi | SenangStart CSS</title>
7
- <meta name="description" content="Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.D82StYDI.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.DBXoyO4w.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.CaXH1t3X.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.I305HrzY.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/ms_guide_configuration.md.CyYNqREm.lean.js">
17
- <link rel="icon" href="https://senangstart.com/img/ss_icon_accent.svg">
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/ms/" 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><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/ms/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Panduan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Rujukan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Contoh</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.4</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/ms/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Log Perubahan</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="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><span class="vpi-languages option-icon" data-v-cf11d7a2></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-88af2de4><p class="title" data-v-88af2de4>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/guide/configuration.html" data-v-35975db6><!--[--><span data-v-35975db6>English</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><!----><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 translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/guide/configuration.html" data-v-35975db6><!--[--><span data-v-35975db6>English</span><!--]--></a></div><!--]--></div><!----><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>Pengenalan</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/ms/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Apa itu 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/ms/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Bermula</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/ms/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mengapa Bahasa Semula Jadi?</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>Konsep Teras</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/ms/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Sintaks Tri-Atribut</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/ms/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Skala Semula Jadi</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/ms/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Reka Bentuk Responsif</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/ms/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & Keadaan</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/ms/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Mod Gelap</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>Penggunaan</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/ms/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Tanpa Bina)</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/ms/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Bina CLI</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/ms/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Konfigurasi</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_ms_guide_configuration" data-v-39a288b8><div><h1 id="konfigurasi" tabindex="-1">Konfigurasi <a class="header-anchor" href="#konfigurasi" aria-label="Permalink to &quot;Konfigurasi&quot;">​</a></h1><p>Sesuaikan SenangStart CSS dengan <code>senangstart.config.js</code>.</p><h2 id="mencipta-fail-config" tabindex="-1">Mencipta Fail Config <a class="header-anchor" href="#mencipta-fail-config" aria-label="Permalink to &quot;Mencipta Fail Config&quot;">​</a></h2><p>Jalankan arahan init untuk mencipta fail config:</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>Atau cipta secara manual:</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;"> // Fail untuk diimbas untuk atribusi SenangStart</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;"> // Konfigurasi output</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;"> // Penyesuaian tema</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;"> // Tindih ganti anda di sini</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="corak-kandungan" tabindex="-1">Corak Kandungan <a class="header-anchor" href="#corak-kandungan" aria-label="Permalink to &quot;Corak Kandungan&quot;">​</a></h2><p>Tentukan fail mana untuk diimbas:</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;">// Semua fail HTML</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;">// Komponen React</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;">// Halaman Vue</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="pilihan-output" tabindex="-1">Pilihan Output <a class="header-anchor" href="#pilihan-output" aria-label="Permalink to &quot;Pilihan Output&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Pilihan</th><th>Penerangan</th><th>Lalai</th></tr></thead><tbody><tr><td><code>css</code></td><td>Laluan output CSS</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>Laluan fail konteks AI</td><td><code>./.cursorrules</code></td></tr><tr><td><code>typescript</code></td><td>Laluan definisi TypeScript</td><td><code>./types/senang.d.ts</code></td></tr></tbody></table><h2 id="penyesuaian-tema" tabindex="-1">Penyesuaian Tema <a class="header-anchor" href="#penyesuaian-tema" aria-label="Permalink to &quot;Penyesuaian Tema&quot;">​</a></h2><h3 id="spacing-tersuai" tabindex="-1">Spacing Tersuai <a class="header-anchor" href="#spacing-tersuai" aria-label="Permalink to &quot;Spacing Tersuai&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;">// Tindih ganti sedia ada</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;">// Tambah skala baru</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="warna-tersuai" tabindex="-1">Warna Tersuai <a class="header-anchor" href="#warna-tersuai" aria-label="Permalink to &quot;Warna Tersuai&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="titik-henti-tersuai" tabindex="-1">Titik Henti Tersuai <a class="header-anchor" href="#titik-henti-tersuai" aria-label="Permalink to &quot;Titik Henti Tersuai&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;"> // Tambah breakpoint lebih lebar</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="bayang-tersuai" tabindex="-1">Bayang Tersuai <a class="header-anchor" href="#bayang-tersuai" aria-label="Permalink to &quot;Bayang Tersuai&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="contoh-penuh" tabindex="-1">Contoh Penuh <a class="header-anchor" href="#contoh-penuh" aria-label="Permalink to &quot;Contoh Penuh&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="menggunakan-nilai-tersuai" tabindex="-1">Menggunakan Nilai Tersuai <a class="header-anchor" href="#menggunakan-nilai-tersuai" aria-label="Permalink to &quot;Menggunakan Nilai Tersuai&quot;">​</a></h2><p>Selepas mengkonfigurasi, guna skala tersuai anda:</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;Padding huge tersuai&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;Warna tersuai&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;Titik Henti tersuai&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/ms/guide/cli.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Bina CLI</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\":\"BCzaqSD6\",\"examples_forms.md\":\"DOjr9LrG\",\"examples_hero.md\":\"CAorji-Y\",\"examples_index.md\":\"BjUNsTob\",\"examples_navigation.md\":\"DvL-Yv_5\",\"guide_cdn.md\":\"Bbb7-icp\",\"guide_cli.md\":\"yLsOZ7NL\",\"guide_configuration.md\":\"DN4FfKw4\",\"guide_dark-mode.md\":\"D6UJvQtM\",\"guide_getting-started.md\":\"K5nA8wXY\",\"guide_index.md\":\"B0lRU150\",\"guide_natural-scale.md\":\"vvauT7U1\",\"guide_philosophy.md\":\"mOb9kp32\",\"guide_responsive.md\":\"C7cF-4cR\",\"guide_states.md\":\"CwtGEGHB\",\"guide_tri-attribute.md\":\"CpjJLEMP\",\"index.md\":\"mYp6_S5X\",\"ms_examples_cards.md\":\"CaE5JNAs\",\"ms_examples_forms.md\":\"VvDzMzxF\",\"ms_examples_hero.md\":\"DC4c3kKW\",\"ms_examples_index.md\":\"C13ShcjA\",\"ms_examples_navigation.md\":\"BPtVjKbk\",\"ms_guide_cdn.md\":\"tZFpEjTS\",\"ms_guide_cli.md\":\"DBjxv3-o\",\"ms_guide_configuration.md\":\"CyYNqREm\",\"ms_guide_dark-mode.md\":\"DWDWvzzv\",\"ms_guide_getting-started.md\":\"WoQwRhlY\",\"ms_guide_index.md\":\"pHpXZMmU\",\"ms_guide_natural-scale.md\":\"BiUfU-TH\",\"ms_guide_philosophy.md\":\"hf3SG2Ts\",\"ms_guide_responsive.md\":\"C4yS3zzM\",\"ms_guide_states.md\":\"DkDEjPdC\",\"ms_guide_tri-attribute.md\":\"C3Es_V5J\",\"ms_index.md\":\"Bmo9il08\",\"ms_reference_breakpoints.md\":\"DR7i_--b\",\"ms_reference_colors.md\":\"06ZYiMcJ\",\"ms_reference_layout.md\":\"NGL6A5SR\",\"ms_reference_space.md\":\"BG5YQ-09\",\"ms_reference_spacing.md\":\"XmXLLPOZ\",\"ms_reference_visual.md\":\"BVOlkEqc\",\"reference_breakpoints.md\":\"BRbG8Fzi\",\"reference_colors.md\":\"C7j7dSO1\",\"reference_layout.md\":\"BWJ5NxSp\",\"reference_space.md\":\"DCsqfTWb\",\"reference_spacing.md\":\"BInFD8gd\",\"reference_visual.md\":\"BRK7S9T1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"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\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.4\",\"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\":\"Dark Mode\",\"link\":\"/guide/dark-mode\"}]},{\"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\"}]}]}}},\"ms\":{\"label\":\"Bahasa Melayu\",\"lang\":\"ms\",\"title\":\"SenangStart CSS\",\"description\":\"Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"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\"},\"nav\":[{\"text\":\"Panduan\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Rujukan\",\"link\":\"/ms/reference/layout\"},{\"text\":\"Contoh\",\"link\":\"/ms/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Log Perubahan\",\"link\":\"/ms/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/ms/guide/\":[{\"text\":\"Pengenalan\",\"items\":[{\"text\":\"Apa itu SenangStart?\",\"link\":\"/ms/guide/\"},{\"text\":\"Bermula\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Mengapa Bahasa Semula Jadi?\",\"link\":\"/ms/guide/philosophy\"}]},{\"text\":\"Konsep Teras\",\"items\":[{\"text\":\"Sintaks Tri-Atribut\",\"link\":\"/ms/guide/tri-attribute\"},{\"text\":\"Skala Semula Jadi\",\"link\":\"/ms/guide/natural-scale\"},{\"text\":\"Reka Bentuk Responsif\",\"link\":\"/ms/guide/responsive\"},{\"text\":\"Hover & Keadaan\",\"link\":\"/ms/guide/states\"},{\"text\":\"Mod Gelap\",\"link\":\"/ms/guide/dark-mode\"}]},{\"text\":\"Penggunaan\",\"items\":[{\"text\":\"CDN (Tanpa Bina)\",\"link\":\"/ms/guide/cdn\"},{\"text\":\"Bina CLI\",\"link\":\"/ms/guide/cli\"},{\"text\":\"Konfigurasi\",\"link\":\"/ms/guide/configuration\"}]}],\"/ms/reference/\":[{\"text\":\"Atribut\",\"items\":[{\"text\":\"layout\",\"link\":\"/ms/reference/layout\"},{\"text\":\"space\",\"link\":\"/ms/reference/space\"},{\"text\":\"visual\",\"link\":\"/ms/reference/visual\"}]},{\"text\":\"Tema\",\"items\":[{\"text\":\"Jarak\",\"link\":\"/ms/reference/spacing\"},{\"text\":\"Warna\",\"link\":\"/ms/reference/colors\"},{\"text\":\"Breakpoint\",\"link\":\"/ms/reference/breakpoints\"}]}],\"/ms/examples/\":[{\"text\":\"Komponen\",\"items\":[{\"text\":\"Gambaran Keseluruhan\",\"link\":\"/ms/examples/\"},{\"text\":\"Kad\",\"link\":\"/ms/examples/cards\"},{\"text\":\"Navigasi\",\"link\":\"/ms/examples/navigation\"},{\"text\":\"Bahagian Hero\",\"link\":\"/ms/examples/hero\"},{\"text\":\"Borang\",\"link\":\"/ms/examples/forms\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
101
-
102
- </body>
103
- </html>