@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/dark-mode.html DELETED
@@ -1,93 +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>Mod Gelap | 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_dark-mode.md.DWDWvzzv.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/dark-mode.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/dark-mode.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 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>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" 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_dark-mode" data-v-39a288b8><div><h1 id="mod-gelap" tabindex="-1">Mod Gelap <a class="header-anchor" href="#mod-gelap" aria-label="Permalink to &quot;Mod Gelap&quot;">​</a></h1><p>Tambah gaya mod gelap dengan awalan <code>dark:</code>, serupa dengan Tailwind CSS.</p><h2 id="konfigurasi" tabindex="-1">Konfigurasi <a class="header-anchor" href="#konfigurasi" aria-label="Permalink to &quot;Konfigurasi&quot;">​</a></h2><p>Secara lalai, mod gelap menggunakan strategi <code>media</code> berdasarkan keutamaan sistem. Anda boleh mengubah ini dalam konfigurasi:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</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;"> // Pilihan 1: Keutamaan sistem (lalai)</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;media&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
26
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Pilihan 2: Toggle berasaskan kelas</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Guna kelas .dark</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
29
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Pilihan 3: Pemilih kustom</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;[data-theme=&quot;dark&quot;]&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Untuk penggunaan CDN:</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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;darkMode&quot;: &quot;selector&quot;</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="penggunaan-asas" tabindex="-1">Penggunaan Asas <a class="header-anchor" href="#penggunaan-asas" aria-label="Permalink to &quot;Penggunaan Asas&quot;">​</a></h2><p>Tambah gaya mod gelap menggunakan awalan <code>dark:</code>:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white dark:bg:slate-900 text:dark dark:text:white&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;"> Ini menyesuaikan dengan mod gelap</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="perbandingan-strategi" tabindex="-1">Perbandingan Strategi <a class="header-anchor" href="#perbandingan-strategi" aria-label="Permalink to &quot;Perbandingan Strategi&quot;">​</a></h2><h3 id="strategi-media-lalai" tabindex="-1">Strategi Media (Lalai) <a class="header-anchor" href="#strategi-media-lalai" aria-label="Permalink to &quot;Strategi Media (Lalai)&quot;">​</a></h3><p>Mengikuti keutamaan OS pengguna secara automatik:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* CSS yang dijana */</span></span>
38
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (prefers-color-scheme: dark) {</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Tiada JavaScript diperlukan. Menghormati tetapan sistem secara automatik.</p><h3 id="strategi-selector" tabindex="-1">Strategi Selector <a class="header-anchor" href="#strategi-selector" aria-label="Permalink to &quot;Strategi Selector&quot;">​</a></h3><p>Kawalan manual melalui kelas <code>.dark</code>:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* CSS yang dijana */</span></span>
41
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span></code></pre></div><p>Toggle dengan JavaScript:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</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;">document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="corak-biasa" tabindex="-1">Corak Biasa <a class="header-anchor" href="#corak-biasa" aria-label="Permalink to &quot;Corak Biasa&quot;">​</a></h2><h3 id="kad-dengan-mod-gelap" tabindex="-1">Kad dengan Mod Gelap <a class="header-anchor" href="#kad-dengan-mod-gelap" aria-label="Permalink to &quot;Kad dengan Mod Gelap&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
42
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
43
- <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:medium g:small&quot;</span></span>
44
- <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;</span></span>
45
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:white dark:bg:slate-800</span></span>
46
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:big</span></span>
47
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> shadow:medium dark:shadow:none</span></span>
48
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border:gray-200 dark:border:slate-700</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border-w:[1px]</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark dark:text:white font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk Kad&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey dark:text:gray-400&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks penerangan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="butang-dengan-mod-gelap" tabindex="-1">Butang dengan Mod Gelap <a class="header-anchor" href="#butang-dengan-mod-gelap" aria-label="Permalink to &quot;Butang dengan Mod Gelap&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;">button</span></span>
55
- <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-x:big p-y:small&quot;</span></span>
56
- <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;</span></span>
57
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary dark:bg:blue-500</span></span>
58
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white</span></span>
59
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
60
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:blue-700 dark:hover:bg:blue-400</span></span>
61
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
62
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
63
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hantar</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="navigasi" tabindex="-1">Navigasi <a class="header-anchor" href="#navigasi" aria-label="Permalink to &quot;Navigasi&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;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
65
- <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 between&quot;</span></span>
66
- <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:medium&quot;</span></span>
67
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white dark:bg:slate-900&quot;</span></span>
68
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
69
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark dark:text:white hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Laman Utama&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
70
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey dark:text:gray-400 hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tentang&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
71
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="pelaksanaan-toggle" tabindex="-1">Pelaksanaan Toggle <a class="header-anchor" href="#pelaksanaan-toggle" aria-label="Permalink to &quot;Pelaksanaan Toggle&quot;">​</a></h2><p>Untuk strategi selector, laksanakan toggle:</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;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggleDarkMode</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
72
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;🌙&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
73
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden dark:inline&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;☀️&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
74
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
75
- <span class="line"></span>
76
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
77
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toggleDarkMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
78
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
79
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Simpan keutamaan (pilihan)</span></span>
80
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
81
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;</span></span>
82
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</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:#6A737D;--shiki-dark:#6A737D;">// Muat keutamaan tersimpan</span></span>
86
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
87
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="petua" tabindex="-1">Petua <a class="header-anchor" href="#petua" aria-label="Permalink to &quot;Petua&quot;">​</a></h2><ul><li>Gunakan nama warna semantik seperti <code>slate</code>, <code>gray</code>, <code>zinc</code> untuk latar gelap</li><li>Teks gelap pada terang, teks terang pada gelap: <code>text:dark dark:text:white</code></li><li>Kurangkan bayangan dalam mod gelap: <code>shadow:medium dark:shadow:none</code></li><li>Sempadan halus selalunya lebih cantik dalam mod gelap</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/ms/guide/states.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Hover & Keadaan</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/guide/cdn.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>CDN (Tanpa Bina)</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>
90
- <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>
91
-
92
- </body>
93
- </html>
package/docs/.vitepress/dist/ms/guide/getting-started.html DELETED
@@ -1,71 +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>Bermula | 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_getting-started.md.WoQwRhlY.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 active" 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/getting-started.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/getting-started.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 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>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" 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_getting-started" data-v-39a288b8><div><h1 id="bermula" tabindex="-1">Bermula <a class="header-anchor" href="#bermula" aria-label="Permalink to &quot;Bermula&quot;">​</a></h1><p>Mulakan dengan SenangStart CSS dalam beberapa minit.</p><h2 id="cdn-tanpa-bina" tabindex="-1">CDN (Tanpa Bina) <span class="VPBadge tip"><!--[-->Disyorkan untuk prototaip<!--]--></span> <a class="header-anchor" href="#cdn-tanpa-bina" aria-label="Permalink to &quot;CDN (Tanpa Bina) &lt;Badge type=&quot;tip&quot; text=&quot;Disyorkan untuk prototaip&quot; /&gt;&quot;">​</a></h2><p>Cara terpantas untuk cuba SenangStart — tiada langkah bina diperlukan:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Aplikasi Saya&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Hanya tambah skrip ini --&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
30
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
31
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big&quot;</span></span>
32
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:big&quot;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:giant font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello SenangStart!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-t:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tanpa konfigurasi, stail serta-merta.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="bagaimana-cdn-jit-berfungsi" tabindex="-1">Bagaimana CDN JIT Berfungsi <a class="header-anchor" href="#bagaimana-cdn-jit-berfungsi" aria-label="Permalink to &quot;Bagaimana CDN JIT Berfungsi&quot;">​</a></h3><ol><li><strong>Imbas DOM</strong> — Cari semua atribusi <code>layout</code>, <code>space</code>, dan <code>visual</code></li><li><strong>Jana CSS</strong> — Kompil style secara on-the-fly dalam pelayar</li><li><strong>Suntik Styles</strong> — Cipta tag <code>&lt;style&gt;</code> dengan CSS terkompil</li><li><strong>Pantau Perubahan</strong> — Guna MutationObserver untuk kemas kini dinamik</li></ol><h3 id="konfigurasi-cdn-tersuai" tabindex="-1">Konfigurasi CDN Tersuai <a class="header-anchor" href="#konfigurasi-cdn-tersuai" aria-label="Permalink to &quot;Konfigurasi CDN Tersuai&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;theme&quot;: {</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;colors&quot;: {</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;brand&quot;: &quot;#8B5CF6&quot;,</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;accent&quot;: &quot;#EC4899&quot;</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>CDN JIT sesuai untuk prototaip dan pembelajaran. Untuk produksi, guna CLI build untuk prestasi lebih baik.</p></div><h2 id="cli-produksi" tabindex="-1">CLI (Produksi) <span class="VPBadge info"><!--[-->Disyorkan untuk produksi<!--]--></span> <a class="header-anchor" href="#cli-produksi" aria-label="Permalink to &quot;CLI (Produksi) &lt;Badge type=&quot;info&quot; text=&quot;Disyorkan untuk produksi&quot; /&gt;&quot;">​</a></h2><h3 id="pemasangan" tabindex="-1">Pemasangan <a class="header-anchor" href="#pemasangan" aria-label="Permalink to &quot;Pemasangan&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Pasang secara global</span></span>
49
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
50
- <span class="line"></span>
51
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Atau guna npx</span></span>
52
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="mulakan-konfigurasi" tabindex="-1">Mulakan Konfigurasi <a class="header-anchor" href="#mulakan-konfigurasi" aria-label="Permalink to &quot;Mulakan Konfigurasi&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>Ini mencipta <code>senangstart.config.js</code> dalam root projek anda.</p><h3 id="tambah-ke-html" tabindex="-1">Tambah ke HTML <a class="header-anchor" href="#tambah-ke-html" aria-label="Permalink to &quot;Tambah ke HTML&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="mula-pembangunan" tabindex="-1">Mula Pembangunan <a class="header-anchor" href="#mula-pembangunan" aria-label="Permalink to &quot;Mula 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;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>Ini memantau fail anda dan membina semula apabila ada perubahan.</p><h3 id="bina-untuk-produksi" tabindex="-1">Bina untuk Produksi <a class="header-anchor" href="#bina-untuk-produksi" aria-label="Permalink to &quot;Bina untuk Produksi&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span></code></pre></div><h2 id="komponen-pertama-anda" tabindex="-1">Komponen Pertama Anda <a class="header-anchor" href="#komponen-pertama-anda" aria-label="Permalink to &quot;Komponen Pertama Anda&quot;">​</a></h2><p>Mari cipta kad ringkas:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
55
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
56
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[320px] p:medium&quot;</span></span>
57
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium&quot;</span></span>
58
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
59
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
60
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Profil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
61
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Edit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
62
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
63
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Nama Pengguna&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;@senang_dev&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
66
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
67
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Apa yang berlaku:</strong></p><ul><li><code>layout=&quot;flex col&quot;</code> — Flexbox, arah menegak</li><li><code>space=&quot;w:[320px] p:medium&quot;</code> — Lebar 320px, padding medium</li><li><code>visual=&quot;bg:white rounded:big shadow:medium&quot;</code> — Latar putih, sudut bulat, bayang</li></ul><h2 id="langkah-seterusnya" tabindex="-1">Langkah Seterusnya <a class="header-anchor" href="#langkah-seterusnya" aria-label="Permalink to &quot;Langkah Seterusnya&quot;">​</a></h2><ul><li><a href="/senangstart-css/ms/guide/tri-attribute.html">Sintaksis Tri-Atribusi</a> — Selami layout, space, visual</li><li><a href="/senangstart-css/ms/guide/natural-scale.html">Skala Semula Jadi</a> — Fahami falsafah jarak</li><li><a href="/senangstart-css/ms/guide/configuration.html">Konfigurasi</a> — Sesuaikan tema</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/ms/guide/" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Apa itu SenangStart?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/guide/philosophy.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Mengapa Bahasa Semula Jadi?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
68
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"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>
69
-
70
- </body>
71
- </html>
package/docs/.vitepress/dist/ms/guide/index.html DELETED
@@ -1,27 +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>Apa itu SenangStart CSS? | 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_index.md.pHpXZMmU.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/" 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/" 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 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>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" 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_" data-v-39a288b8><div><h1 id="apa-itu-senangstart-css" tabindex="-1">Apa itu SenangStart CSS? <a class="header-anchor" href="#apa-itu-senangstart-css" aria-label="Permalink to &quot;Apa itu SenangStart CSS?&quot;">​</a></h1><p>SenangStart CSS ialah rangka kerja CSS utility-first yang menggantikan konvensyen penamaan abstrak dengan <strong>Adjektif Semula Jadi</strong>.</p><h2 id="masalahnya" tabindex="-1">Masalahnya <a class="header-anchor" href="#masalahnya" aria-label="Permalink to &quot;Masalahnya&quot;">​</a></h2><p>Rangka kerja utiliti tradisional memaksa anda menghafal skala arbitrari:</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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Apa maksud px-4? --&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;px-4 py-8 mt-16 mb-32&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Adakah <code>px-4</code> pixel? Adakah <code>mt-16</code> lebih besar daripada <code>mb-32</code>? Anda perlu sentiasa merujuk dokumentasi.</p><h2 id="penyelesaiannya" tabindex="-1">Penyelesaiannya <a class="header-anchor" href="#penyelesaiannya" aria-label="Permalink to &quot;Penyelesaiannya&quot;">​</a></h2><p>SenangStart menggunakan perkataan yang anda sudah faham:</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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Terus difahami --&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:small p-y:medium m-t:big m-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Tiada kiraan mental. Tiada jadual rujukan. Hanya terangkan apa yang anda mahu.</strong></p><h2 id="prinsip-teras" tabindex="-1">Prinsip Teras <a class="header-anchor" href="#prinsip-teras" aria-label="Permalink to &quot;Prinsip Teras&quot;">​</a></h2><h3 id="_1-bahasa-semula-jadi-dahulu" tabindex="-1">1. Bahasa Semula Jadi Dahulu <a class="header-anchor" href="#_1-bahasa-semula-jadi-dahulu" aria-label="Permalink to &quot;1. Bahasa Semula Jadi Dahulu&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Daripada...</th><th>Guna...</th></tr></thead><tbody><tr><td><code>px-4</code></td><td><code>tiny</code></td></tr><tr><td><code>px-8</code></td><td><code>small</code></td></tr><tr><td><code>px-16</code></td><td><code>medium</code></td></tr><tr><td><code>px-32</code></td><td><code>big</code></td></tr><tr><td><code>px-64</code></td><td><code>giant</code></td></tr><tr><td><code>px-128</code></td><td><code>vast</code></td></tr></tbody></table><h3 id="_2-pengasingan-tanggungjawab" tabindex="-1">2. Pengasingan Tanggungjawab <a class="header-anchor" href="#_2-pengasingan-tanggungjawab" aria-label="Permalink to &quot;2. Pengasingan Tanggungjawab&quot;">​</a></h3><p>Tiga atribusi, tiga tanggungjawab:</p><table tabindex="0"><thead><tr><th>Atribusi</th><th>Tujuan</th><th>Contoh</th></tr></thead><tbody><tr><td><code>layout</code></td><td>Struktur &amp; aliran</td><td><code>layout=&quot;flex col center&quot;</code></td></tr><tr><td><code>space</code></td><td>Jarak &amp; saiz</td><td><code>space=&quot;p:medium g:small&quot;</code></td></tr><tr><td><code>visual</code></td><td>Warna &amp; penampilan</td><td><code>visual=&quot;bg:white rounded:big&quot;</code></td></tr></tbody></table><h3 id="_3-mesra-ai" tabindex="-1">3. Mesra AI <a class="header-anchor" href="#_3-mesra-ai" aria-label="Permalink to &quot;3. Mesra AI&quot;">​</a></h3><p>SenangStart menghasilkan fail konteks yang membantu pembantu AI memahami sistem reka bentuk anda:</p><blockquote><p><strong>Bila pengguna cakap:</strong> &quot;ketatkan&quot;<br><strong>AI tahu untuk:</strong> Kurangkan jarak (medium → small → tiny)</p></blockquote><blockquote><p><strong>Bila pengguna cakap:</strong> &quot;bagi ruang&quot;<br><strong>AI tahu untuk:</strong> Besarkan jarak (medium → big → giant)</p></blockquote><h2 id="langkah-seterusnya" tabindex="-1">Langkah Seterusnya <a class="header-anchor" href="#langkah-seterusnya" aria-label="Permalink to &quot;Langkah Seterusnya&quot;">​</a></h2><ul><li><a href="/senangstart-css/ms/guide/getting-started.html">Bermula</a> — Pasang dan guna SenangStart</li><li><a href="/senangstart-css/ms/guide/natural-scale.html">Skala Semula Jadi</a> — Fahami falsafah jarak</li><li><a href="/senangstart-css/ms/guide/tri-attribute.html">Sintaksis Tri-Atribusi</a> — Pelajari layout, space, dan visual</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/guide/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Bermula</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>
24
- <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>
25
-
26
- </body>
27
- </html>