@bookklik/senangstart-css 0.1.4 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (524) 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 +621 -15
  5. package/docs/SYNTAX-REFERENCE.md +1555 -0
  6. package/docs/guide/preflight.md +139 -0
  7. package/docs/ms/guide/preflight.md +139 -0
  8. package/docs/ms/reference/colors.md +45 -45
  9. package/docs/ms/reference/layout/align-content.md +35 -0
  10. package/docs/ms/reference/layout/align-items.md +33 -0
  11. package/docs/ms/reference/layout/align-self.md +34 -0
  12. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  13. package/docs/ms/reference/layout/border-collapse.md +30 -0
  14. package/docs/ms/reference/layout/border-spacing.md +39 -0
  15. package/docs/ms/reference/layout/box-sizing.md +30 -0
  16. package/docs/ms/reference/layout/caption-side.md +30 -0
  17. package/docs/ms/reference/layout/columns.md +30 -0
  18. package/docs/ms/reference/layout/container.md +29 -0
  19. package/docs/ms/reference/layout/display.md +60 -0
  20. package/docs/ms/reference/layout/flex-basis.md +38 -0
  21. package/docs/ms/reference/layout/flex-direction.md +33 -0
  22. package/docs/ms/reference/layout/flex-items.md +32 -0
  23. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  24. package/docs/ms/reference/layout/flex.md +40 -0
  25. package/docs/ms/reference/layout/float-clear.md +32 -0
  26. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  27. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  28. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  29. package/docs/ms/reference/layout/grid-columns.md +32 -0
  30. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  31. package/docs/ms/reference/layout/grid-rows.md +31 -0
  32. package/docs/ms/reference/layout/inset.md +44 -0
  33. package/docs/ms/reference/layout/isolation.md +30 -0
  34. package/docs/ms/reference/layout/justify-content.md +36 -0
  35. package/docs/ms/reference/layout/justify-items.md +32 -0
  36. package/docs/ms/reference/layout/justify-self.md +33 -0
  37. package/docs/ms/reference/layout/object-fit.md +33 -0
  38. package/docs/ms/reference/layout/object-position.md +45 -0
  39. package/docs/ms/reference/layout/order.md +32 -0
  40. package/docs/ms/reference/layout/overflow.md +34 -0
  41. package/docs/ms/reference/layout/overscroll.md +31 -0
  42. package/docs/ms/reference/layout/place-content.md +35 -0
  43. package/docs/ms/reference/layout/place-items.md +32 -0
  44. package/docs/ms/reference/layout/place-self.md +33 -0
  45. package/docs/ms/reference/layout/position.md +34 -0
  46. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  47. package/docs/ms/reference/layout/table-layout.md +30 -0
  48. package/docs/ms/reference/layout/visibility.md +30 -0
  49. package/docs/ms/reference/layout/z-index.md +33 -0
  50. package/docs/ms/reference/layout.md +53 -95
  51. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  52. package/docs/ms/reference/space/gap.md +44 -0
  53. package/docs/ms/reference/space/height.md +44 -0
  54. package/docs/ms/reference/space/margin.md +49 -0
  55. package/docs/ms/reference/space/padding.md +49 -0
  56. package/docs/ms/reference/space/scale-reference.md +43 -0
  57. package/docs/ms/reference/space/sizing.md +27 -0
  58. package/docs/ms/reference/space/width.md +45 -0
  59. package/docs/ms/reference/space.md +15 -99
  60. package/docs/ms/reference/spacing.md +22 -8
  61. package/docs/ms/reference/visual/accent-color.md +31 -0
  62. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  63. package/docs/ms/reference/visual/animation-delay.md +41 -0
  64. package/docs/ms/reference/visual/animation-direction.md +32 -0
  65. package/docs/ms/reference/visual/animation-duration.md +43 -0
  66. package/docs/ms/reference/visual/animation-fill.md +32 -0
  67. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  68. package/docs/ms/reference/visual/animation-play.md +30 -0
  69. package/docs/ms/reference/visual/appearance.md +30 -0
  70. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  71. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  72. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  73. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  74. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  75. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  76. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  78. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  79. package/docs/ms/reference/visual/background-attachment.md +31 -0
  80. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  81. package/docs/ms/reference/visual/background-clip.md +32 -0
  82. package/docs/ms/reference/visual/background-color.md +33 -0
  83. package/docs/ms/reference/visual/background-image.md +41 -0
  84. package/docs/ms/reference/visual/background-origin.md +31 -0
  85. package/docs/ms/reference/visual/background-position.md +45 -0
  86. package/docs/ms/reference/visual/background-repeat.md +34 -0
  87. package/docs/ms/reference/visual/background-size.md +39 -0
  88. package/docs/ms/reference/visual/background.md +13 -0
  89. package/docs/ms/reference/visual/blend-modes.md +34 -0
  90. package/docs/ms/reference/visual/border-radius.md +34 -0
  91. package/docs/ms/reference/visual/border-style.md +33 -0
  92. package/docs/ms/reference/visual/border-width.md +44 -0
  93. package/docs/ms/reference/visual/border.md +43 -0
  94. package/docs/ms/reference/visual/box-shadow.md +33 -0
  95. package/docs/ms/reference/visual/caret-color.md +31 -0
  96. package/docs/ms/reference/visual/color-scheme.md +31 -0
  97. package/docs/ms/reference/visual/cursor.md +37 -0
  98. package/docs/ms/reference/visual/field-sizing.md +30 -0
  99. package/docs/ms/reference/visual/fill.md +38 -0
  100. package/docs/ms/reference/visual/filter-blur.md +43 -0
  101. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  102. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  103. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  104. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  105. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  106. package/docs/ms/reference/visual/filter-invert.md +39 -0
  107. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  108. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  109. package/docs/ms/reference/visual/font-family.md +31 -0
  110. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  111. package/docs/ms/reference/visual/font-style.md +30 -0
  112. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  113. package/docs/ms/reference/visual/font-weight.md +31 -0
  114. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  115. package/docs/ms/reference/visual/hyphens.md +31 -0
  116. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  117. package/docs/ms/reference/visual/line-clamp.md +40 -0
  118. package/docs/ms/reference/visual/line-height.md +42 -0
  119. package/docs/ms/reference/visual/list-style.md +34 -0
  120. package/docs/ms/reference/visual/mask.md +39 -0
  121. package/docs/ms/reference/visual/opacity.md +33 -0
  122. package/docs/ms/reference/visual/outline.md +31 -0
  123. package/docs/ms/reference/visual/pointer-events.md +30 -0
  124. package/docs/ms/reference/visual/resize.md +32 -0
  125. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  126. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  127. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  128. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  129. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  130. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  131. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  132. package/docs/ms/reference/visual/stroke-width.md +39 -0
  133. package/docs/ms/reference/visual/stroke.md +38 -0
  134. package/docs/ms/reference/visual/text-alignment.md +32 -0
  135. package/docs/ms/reference/visual/text-color.md +41 -0
  136. package/docs/ms/reference/visual/text-decoration.md +32 -0
  137. package/docs/ms/reference/visual/text-indent.md +37 -0
  138. package/docs/ms/reference/visual/text-overflow.md +31 -0
  139. package/docs/ms/reference/visual/text-shadow.md +40 -0
  140. package/docs/ms/reference/visual/text-size.md +32 -0
  141. package/docs/ms/reference/visual/text-transform.md +32 -0
  142. package/docs/ms/reference/visual/text-wrap.md +32 -0
  143. package/docs/ms/reference/visual/touch-action.md +36 -0
  144. package/docs/ms/reference/visual/transform-backface.md +30 -0
  145. package/docs/ms/reference/visual/transform-origin.md +45 -0
  146. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  147. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  148. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  149. package/docs/ms/reference/visual/transform-scale.md +43 -0
  150. package/docs/ms/reference/visual/transform-skew.md +40 -0
  151. package/docs/ms/reference/visual/transform-style.md +30 -0
  152. package/docs/ms/reference/visual/transform-translate.md +39 -0
  153. package/docs/ms/reference/visual/transition-delay.md +41 -0
  154. package/docs/ms/reference/visual/transition-duration.md +43 -0
  155. package/docs/ms/reference/visual/transition-property.md +34 -0
  156. package/docs/ms/reference/visual/transition-timing.md +40 -0
  157. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  158. package/docs/ms/reference/visual/user-select.md +32 -0
  159. package/docs/ms/reference/visual/vertical-align.md +36 -0
  160. package/docs/ms/reference/visual/whitespace.md +34 -0
  161. package/docs/ms/reference/visual/will-change.md +33 -0
  162. package/docs/ms/reference/visual/word-break.md +32 -0
  163. package/docs/ms/reference/visual.md +145 -148
  164. package/docs/public/assets/senangstart-css.min.js +1545 -0
  165. package/docs/reference/layout/align-content.md +35 -0
  166. package/docs/reference/layout/align-items.md +33 -0
  167. package/docs/reference/layout/align-self.md +34 -0
  168. package/docs/reference/layout/aspect-ratio.md +40 -0
  169. package/docs/reference/layout/border-collapse.md +30 -0
  170. package/docs/reference/layout/border-spacing.md +39 -0
  171. package/docs/reference/layout/box-sizing.md +30 -0
  172. package/docs/reference/layout/caption-side.md +30 -0
  173. package/docs/reference/layout/columns.md +30 -0
  174. package/docs/reference/layout/container.md +29 -0
  175. package/docs/reference/layout/display.md +60 -0
  176. package/docs/reference/layout/flex-basis.md +38 -0
  177. package/docs/reference/layout/flex-direction.md +33 -0
  178. package/docs/reference/layout/flex-items.md +32 -0
  179. package/docs/reference/layout/flex-wrap.md +31 -0
  180. package/docs/reference/layout/flex.md +40 -0
  181. package/docs/reference/layout/float-clear.md +32 -0
  182. package/docs/reference/layout/grid-auto-flow.md +33 -0
  183. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  184. package/docs/reference/layout/grid-column-span.md +31 -0
  185. package/docs/reference/layout/grid-columns.md +32 -0
  186. package/docs/reference/layout/grid-row-span.md +30 -0
  187. package/docs/reference/layout/grid-rows.md +31 -0
  188. package/docs/reference/layout/inset.md +44 -0
  189. package/docs/reference/layout/isolation.md +30 -0
  190. package/docs/reference/layout/justify-content.md +36 -0
  191. package/docs/reference/layout/justify-items.md +32 -0
  192. package/docs/reference/layout/justify-self.md +33 -0
  193. package/docs/reference/layout/object-fit.md +33 -0
  194. package/docs/reference/layout/object-position.md +45 -0
  195. package/docs/reference/layout/order.md +32 -0
  196. package/docs/reference/layout/overflow.md +34 -0
  197. package/docs/reference/layout/overscroll.md +31 -0
  198. package/docs/reference/layout/place-content.md +35 -0
  199. package/docs/reference/layout/place-items.md +32 -0
  200. package/docs/reference/layout/place-self.md +33 -0
  201. package/docs/reference/layout/position.md +34 -0
  202. package/docs/reference/layout/shorthand-alignment.md +34 -0
  203. package/docs/reference/layout/table-layout.md +30 -0
  204. package/docs/reference/layout/visibility.md +30 -0
  205. package/docs/reference/layout/z-index.md +33 -0
  206. package/docs/reference/layout.md +60 -102
  207. package/docs/reference/space/arbitrary-values.md +39 -0
  208. package/docs/reference/space/gap.md +44 -0
  209. package/docs/reference/space/height.md +44 -0
  210. package/docs/reference/space/margin.md +49 -0
  211. package/docs/reference/space/padding.md +49 -0
  212. package/docs/reference/space/scale-reference.md +43 -0
  213. package/docs/reference/space/width.md +45 -0
  214. package/docs/reference/space.md +14 -98
  215. package/docs/reference/spacing.md +22 -8
  216. package/docs/reference/visual/accent-color.md +31 -0
  217. package/docs/reference/visual/animation-builtin.md +41 -0
  218. package/docs/reference/visual/animation-delay.md +41 -0
  219. package/docs/reference/visual/animation-direction.md +32 -0
  220. package/docs/reference/visual/animation-duration.md +43 -0
  221. package/docs/reference/visual/animation-fill.md +32 -0
  222. package/docs/reference/visual/animation-iteration.md +30 -0
  223. package/docs/reference/visual/animation-play.md +30 -0
  224. package/docs/reference/visual/appearance.md +30 -0
  225. package/docs/reference/visual/backdrop-blur.md +43 -0
  226. package/docs/reference/visual/backdrop-brightness.md +41 -0
  227. package/docs/reference/visual/backdrop-contrast.md +41 -0
  228. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  229. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  230. package/docs/reference/visual/backdrop-invert.md +39 -0
  231. package/docs/reference/visual/backdrop-opacity.md +39 -0
  232. package/docs/reference/visual/backdrop-saturate.md +41 -0
  233. package/docs/reference/visual/backdrop-sepia.md +39 -0
  234. package/docs/reference/visual/background-attachment.md +31 -0
  235. package/docs/reference/visual/background-blend-mode.md +34 -0
  236. package/docs/reference/visual/background-clip.md +32 -0
  237. package/docs/reference/visual/background-color.md +33 -0
  238. package/docs/reference/visual/background-image.md +41 -0
  239. package/docs/reference/visual/background-origin.md +31 -0
  240. package/docs/reference/visual/background-position.md +45 -0
  241. package/docs/reference/visual/background-repeat.md +34 -0
  242. package/docs/reference/visual/background-size.md +39 -0
  243. package/docs/reference/visual/blend-modes.md +34 -0
  244. package/docs/reference/visual/border-radius.md +34 -0
  245. package/docs/reference/visual/border-style.md +33 -0
  246. package/docs/reference/visual/border-width.md +44 -0
  247. package/docs/reference/visual/border.md +43 -0
  248. package/docs/reference/visual/box-shadow.md +33 -0
  249. package/docs/reference/visual/caret-color.md +31 -0
  250. package/docs/reference/visual/color-scheme.md +31 -0
  251. package/docs/reference/visual/cursor.md +37 -0
  252. package/docs/reference/visual/field-sizing.md +30 -0
  253. package/docs/reference/visual/fill.md +38 -0
  254. package/docs/reference/visual/filter-blur.md +43 -0
  255. package/docs/reference/visual/filter-brightness.md +41 -0
  256. package/docs/reference/visual/filter-contrast.md +41 -0
  257. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  258. package/docs/reference/visual/filter-grayscale.md +39 -0
  259. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  260. package/docs/reference/visual/filter-invert.md +39 -0
  261. package/docs/reference/visual/filter-saturate.md +41 -0
  262. package/docs/reference/visual/filter-sepia.md +39 -0
  263. package/docs/reference/visual/font-family.md +31 -0
  264. package/docs/reference/visual/font-smoothing.md +30 -0
  265. package/docs/reference/visual/font-style.md +30 -0
  266. package/docs/reference/visual/font-variant-numeric.md +35 -0
  267. package/docs/reference/visual/font-weight.md +31 -0
  268. package/docs/reference/visual/forced-color-adjust.md +30 -0
  269. package/docs/reference/visual/hyphens.md +31 -0
  270. package/docs/reference/visual/letter-spacing.md +42 -0
  271. package/docs/reference/visual/line-clamp.md +40 -0
  272. package/docs/reference/visual/line-height.md +42 -0
  273. package/docs/reference/visual/list-style.md +34 -0
  274. package/docs/reference/visual/mask.md +39 -0
  275. package/docs/reference/visual/opacity.md +33 -0
  276. package/docs/reference/visual/outline.md +31 -0
  277. package/docs/reference/visual/pointer-events.md +30 -0
  278. package/docs/reference/visual/resize.md +32 -0
  279. package/docs/reference/visual/scroll-behavior.md +30 -0
  280. package/docs/reference/visual/scroll-margin.md +41 -0
  281. package/docs/reference/visual/scroll-padding.md +41 -0
  282. package/docs/reference/visual/scroll-snap-align.md +32 -0
  283. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  284. package/docs/reference/visual/scroll-snap-type.md +34 -0
  285. package/docs/reference/visual/state-prefixes.md +37 -0
  286. package/docs/reference/visual/stroke-width.md +39 -0
  287. package/docs/reference/visual/stroke.md +38 -0
  288. package/docs/reference/visual/text-alignment.md +32 -0
  289. package/docs/reference/visual/text-color.md +41 -0
  290. package/docs/reference/visual/text-decoration.md +32 -0
  291. package/docs/reference/visual/text-indent.md +37 -0
  292. package/docs/reference/visual/text-overflow.md +31 -0
  293. package/docs/reference/visual/text-shadow.md +40 -0
  294. package/docs/reference/visual/text-size.md +32 -0
  295. package/docs/reference/visual/text-transform.md +32 -0
  296. package/docs/reference/visual/text-wrap.md +32 -0
  297. package/docs/reference/visual/touch-action.md +36 -0
  298. package/docs/reference/visual/transform-backface.md +30 -0
  299. package/docs/reference/visual/transform-origin.md +45 -0
  300. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  301. package/docs/reference/visual/transform-perspective.md +43 -0
  302. package/docs/reference/visual/transform-rotate.md +40 -0
  303. package/docs/reference/visual/transform-scale.md +43 -0
  304. package/docs/reference/visual/transform-skew.md +40 -0
  305. package/docs/reference/visual/transform-style.md +30 -0
  306. package/docs/reference/visual/transform-translate.md +39 -0
  307. package/docs/reference/visual/transition-delay.md +41 -0
  308. package/docs/reference/visual/transition-duration.md +43 -0
  309. package/docs/reference/visual/transition-property.md +34 -0
  310. package/docs/reference/visual/transition-timing.md +40 -0
  311. package/docs/reference/visual/typography-keywords.md +81 -0
  312. package/docs/reference/visual/user-select.md +32 -0
  313. package/docs/reference/visual/vertical-align.md +36 -0
  314. package/docs/reference/visual/whitespace.md +34 -0
  315. package/docs/reference/visual/will-change.md +33 -0
  316. package/docs/reference/visual/word-break.md +32 -0
  317. package/docs/reference/visual.md +151 -154
  318. package/docs/syntax-reference.json +1973 -0
  319. package/package.json +10 -2
  320. package/playground/index.html +78 -0
  321. package/playground/jit-test.html +384 -0
  322. package/scripts/extract-syntax.js +152 -0
  323. package/scripts/generate-docs.js +352 -0
  324. package/src/cdn/jit.js +1436 -14
  325. package/src/cli/commands/build.js +5 -0
  326. package/src/cli/index.js +2 -0
  327. package/src/compiler/generators/css.js +1537 -25
  328. package/src/compiler/generators/preflight.js +379 -0
  329. package/src/config/defaults.js +19 -1
  330. package/src/definitions/index.js +153 -0
  331. package/src/definitions/layout-alignment.js +257 -0
  332. package/src/definitions/layout-flex.js +209 -0
  333. package/src/definitions/layout-grid.js +150 -0
  334. package/src/definitions/layout-positioning.js +89 -0
  335. package/src/definitions/layout-table.js +98 -0
  336. package/src/definitions/layout-utilities.js +262 -0
  337. package/src/definitions/layout.js +195 -0
  338. package/src/definitions/space.js +164 -0
  339. package/src/definitions/visual-backgrounds.js +423 -0
  340. package/src/definitions/visual-borders.js +111 -0
  341. package/src/definitions/visual-filters.js +204 -0
  342. package/src/definitions/visual-interactivity.js +292 -0
  343. package/src/definitions/visual-svg.js +80 -0
  344. package/src/definitions/visual-transform3d.js +159 -0
  345. package/src/definitions/visual-transforms.js +142 -0
  346. package/src/definitions/visual-transitions.js +277 -0
  347. package/src/definitions/visual-typography.js +386 -0
  348. package/src/definitions/visual.js +542 -0
  349. package/tests/helpers/test-utils.js +144 -0
  350. package/tests/integration/compiler.test.js +247 -0
  351. package/tests/sync/docs-sync.test.js +364 -0
  352. package/tests/unit/compiler/generators/css.test.js +719 -0
  353. package/tests/unit/compiler/parser.test.js +244 -0
  354. package/tests/unit/compiler/tokenizer.test.js +305 -0
  355. package/tests/unit/config/defaults.test.js +168 -0
  356. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  357. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  358. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  359. package/docs/.vitepress/cache/deps/package.json +0 -3
  360. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  361. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  363. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  364. package/docs/.vitepress/cache/deps/vue.js +0 -347
  365. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  366. package/docs/.vitepress/dist/404.html +0 -22
  367. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  368. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  369. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  370. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  371. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  372. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  373. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  374. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  375. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  376. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  377. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  378. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  379. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  380. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  381. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  382. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  383. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  384. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  385. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  386. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  387. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  388. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  389. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  390. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  391. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  392. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  393. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  394. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  395. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  396. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  397. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  398. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  399. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  400. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  401. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  402. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  403. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  404. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  405. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  406. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  407. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  419. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  420. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  421. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  422. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  423. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  424. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  425. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  426. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  427. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  428. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  429. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  430. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  431. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  432. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  433. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  434. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  435. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  436. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  437. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  438. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  439. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  440. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  441. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  442. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  443. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  444. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  445. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  446. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  447. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  448. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  449. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  450. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  451. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  452. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  453. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  454. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  455. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  456. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  457. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  458. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  459. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  460. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  461. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  462. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  463. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  464. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  465. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  466. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  467. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  468. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  469. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  470. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  471. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  472. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  473. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  474. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  475. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  476. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  477. package/docs/.vitepress/dist/examples/cards.html +0 -108
  478. package/docs/.vitepress/dist/examples/forms.html +0 -193
  479. package/docs/.vitepress/dist/examples/hero.html +0 -142
  480. package/docs/.vitepress/dist/examples/index.html +0 -76
  481. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  482. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  483. package/docs/.vitepress/dist/guide/cli.html +0 -68
  484. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  485. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  486. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  487. package/docs/.vitepress/dist/guide/index.html +0 -27
  488. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  489. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  490. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  491. package/docs/.vitepress/dist/guide/states.html +0 -101
  492. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  493. package/docs/.vitepress/dist/hashmap.json +0 -1
  494. package/docs/.vitepress/dist/index.html +0 -31
  495. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  496. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  497. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  498. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  499. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  500. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  501. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  502. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  503. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  504. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  505. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  506. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  507. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  508. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  509. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  510. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  511. package/docs/.vitepress/dist/ms/index.html +0 -31
  512. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  513. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  514. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  515. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  516. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  517. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  518. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  519. package/docs/.vitepress/dist/reference/colors.html +0 -41
  520. package/docs/.vitepress/dist/reference/layout.html +0 -37
  521. package/docs/.vitepress/dist/reference/space.html +0 -48
  522. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  523. package/docs/.vitepress/dist/reference/visual.html +0 -46
  524. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/ms/reference/layout.html DELETED
@@ -1,37 +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>Rujukan layout | 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_reference_layout.md.NGL6A5SR.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 active" 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/reference/layout.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/reference/layout.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>Atribut</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/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Tema</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/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Jarak</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/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Warna</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/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoint</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_reference_layout" data-v-39a288b8><div><h1 id="rujukan-layout" tabindex="-1">Rujukan layout <a class="header-anchor" href="#rujukan-layout" aria-label="Permalink to &quot;Rujukan layout&quot;">​</a></h1><p>Atribusi <code>layout</code> mengawal struktur, kedudukan, dan aliran.</p><h2 id="paparan" tabindex="-1">Paparan <a class="header-anchor" href="#paparan" aria-label="Permalink to &quot;Paparan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>grid</code></td><td><code>display: grid</code></td></tr><tr><td><code>block</code></td><td><code>display: block</code></td></tr><tr><td><code>inline</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>hidden</code></td><td><code>display: none</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Flexbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Grid&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen tersembunyi&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="arah-flex" tabindex="-1">Arah Flex <a class="header-anchor" href="#arah-flex" aria-label="Permalink to &quot;Arah Flex&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>row</code></td><td><code>flex-direction: row</code></td></tr><tr><td><code>col</code></td><td><code>flex-direction: column</code></td></tr><tr><td><code>row-reverse</code></td><td><code>flex-direction: row-reverse</code></td></tr><tr><td><code>col-reverse</code></td><td><code>flex-direction: column-reverse</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Menegak&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="penjajaran" tabindex="-1">Penjajaran <a class="header-anchor" href="#penjajaran" aria-label="Permalink to &quot;Penjajaran&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>center</code></td><td><code>justify-content: center; align-items: center</code></td></tr><tr><td><code>start</code></td><td><code>justify-content: flex-start; align-items: flex-start</code></td></tr><tr><td><code>end</code></td><td><code>justify-content: flex-end; align-items: flex-end</code></td></tr><tr><td><code>between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>evenly</code></td><td><code>justify-content: space-evenly</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Di tengah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Jarak antara&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="flex-wrap" tabindex="-1">Flex Wrap <a class="header-anchor" href="#flex-wrap" aria-label="Permalink to &quot;Flex Wrap&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>wrap</code></td><td><code>flex-wrap: wrap</code></td></tr><tr><td><code>nowrap</code></td><td><code>flex-wrap: nowrap</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Flex yang melipat&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="kedudukan" tabindex="-1">Kedudukan <a class="header-anchor" href="#kedudukan" aria-label="Permalink to &quot;Kedudukan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>relative</code></td><td><code>position: relative</code></td></tr><tr><td><code>absolute</code></td><td><code>position: absolute</code></td></tr><tr><td><code>fixed</code></td><td><code>position: fixed</code></td></tr><tr><td><code>sticky</code></td><td><code>position: sticky</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Nav fixed&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sticky&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen sticky&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="z-index" tabindex="-1">Z-Index <a class="header-anchor" href="#z-index" aria-label="Permalink to &quot;Z-Index&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>z:base</code></td><td><code>z-index: 0</code></td></tr><tr><td><code>z:low</code></td><td><code>z-index: 10</code></td></tr><tr><td><code>z:mid</code></td><td><code>z-index: 50</code></td></tr><tr><td><code>z:high</code></td><td><code>z-index: 100</code></td></tr><tr><td><code>z:top</code></td><td><code>z-index: 9999</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sentiasa di atas&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute z:high&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Z-index tinggi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="overflow" tabindex="-1">Overflow <a class="header-anchor" href="#overflow" aria-label="Permalink to &quot;Overflow&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>overflow:hidden</code></td><td><code>overflow: hidden</code></td></tr><tr><td><code>overflow:auto</code></td><td><code>overflow: auto</code></td></tr><tr><td><code>overflow:scroll</code></td><td><code>overflow: scroll</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;overflow:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kandungan terpotong&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="menggabungkan-nilai" tabindex="-1">Menggabungkan Nilai <a class="header-anchor" href="#menggabungkan-nilai" aria-label="Permalink to &quot;Menggabungkan Nilai&quot;">​</a></h2><p>Gabungkan pelbagai nilai layout dengan ruang:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Flexbox menegak, di tengah, melipat</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
30
- <span class="line"></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Nav fixed dengan space-between</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/reference/space.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>space</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
34
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"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>
35
-
36
- </body>
37
- </html>
package/docs/.vitepress/dist/ms/reference/space.html DELETED
@@ -1,48 +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>Rujukan space | 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_reference_space.md.BG5YQ-09.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/reference/space.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/reference/space.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>Atribut</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/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Tema</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/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Jarak</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/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Warna</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/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoint</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_reference_space" data-v-39a288b8><div><h1 id="rujukan-space" tabindex="-1">Rujukan space <a class="header-anchor" href="#rujukan-space" aria-label="Permalink to &quot;Rujukan space&quot;">​</a></h1><p>Atribusi <code>space</code> mengawal saiz dan jarak.</p><h2 id="sintaksis" tabindex="-1">Sintaksis <a class="header-anchor" href="#sintaksis" aria-label="Permalink to &quot;Sintaksis&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[breakpoint]:[property]:[scale]</span></span></code></pre></div><p><strong>Titik Henti:</strong> <code>mob:</code>, <code>tab:</code>, <code>lap:</code>, <code>desk:</code></p><p><strong>Nilai skala:</strong> <code>none</code>, <code>tiny</code>, <code>small</code>, <code>medium</code>, <code>big</code>, <code>giant</code>, <code>vast</code></p><h2 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>p</code></td><td><code>padding</code> (semua sisi)</td></tr><tr><td><code>p-t</code></td><td><code>padding-top</code></td></tr><tr><td><code>p-r</code></td><td><code>padding-right</code></td></tr><tr><td><code>p-b</code></td><td><code>padding-bottom</code></td></tr><tr><td><code>p-l</code></td><td><code>padding-left</code></td></tr><tr><td><code>p-x</code></td><td><code>padding-left</code> + <code>padding-right</code></td></tr><tr><td><code>p-y</code></td><td><code>padding-top</code> + <code>padding-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal/menegak&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-t:tiny p-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Atas dan bawah&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="margin" tabindex="-1">Margin <a class="header-anchor" href="#margin" aria-label="Permalink to &quot;Margin&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>m</code></td><td><code>margin</code> (semua sisi)</td></tr><tr><td><code>m-t</code></td><td><code>margin-top</code></td></tr><tr><td><code>m-r</code></td><td><code>margin-right</code></td></tr><tr><td><code>m-b</code></td><td><code>margin-bottom</code></td></tr><tr><td><code>m-l</code></td><td><code>margin-left</code></td></tr><tr><td><code>m-x</code></td><td><code>margin-left</code> + <code>margin-right</code></td></tr><tr><td><code>m-y</code></td><td><code>margin-top</code> + <code>margin-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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;Margin bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tengah secara horizontal&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="gap" tabindex="-1">Gap <a class="header-anchor" href="#gap" aria-label="Permalink to &quot;Gap&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>g</code></td><td><code>gap</code> (flex/grid)</td></tr><tr><td><code>g-x</code></td><td><code>column-gap</code></td></tr><tr><td><code>g-y</code></td><td><code>row-gap</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#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;Gap kecil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#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-x:big g-y:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Gap berbeza&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="saiz" tabindex="-1">Saiz <a class="header-anchor" href="#saiz" aria-label="Permalink to &quot;Saiz&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>w</code></td><td><code>width</code></td></tr><tr><td><code>h</code></td><td><code>height</code></td></tr><tr><td><code>min-w</code></td><td><code>min-width</code></td></tr><tr><td><code>max-w</code></td><td><code>max-width</code></td></tr><tr><td><code>min-h</code></td><td><code>min-height</code></td></tr><tr><td><code>max-h</code></td><td><code>max-height</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] h:[400px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Saiz eksplisit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;max-w:[1200px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena max width&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;min-h:[100vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tinggi penuh viewport&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="nilai-arbitrari-escape-hatch" tabindex="-1">Nilai Arbitrari (Escape Hatch) <a class="header-anchor" href="#nilai-arbitrari-escape-hatch" aria-label="Permalink to &quot;Nilai Arbitrari (Escape Hatch)&quot;">​</a></h2><p>Guna kurungan <code>[value]</code> untuk nilai spesifik:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[350px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;350 piksel&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</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 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;h:[50vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;50% tinggi viewport&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
30
- <span class="line"><span 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:[20px_40px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;20px menegak, 40px horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
- <span class="line"><span 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;m-t:[5rem]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;5rem margin atas&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="contoh-responsif" tabindex="-1">Contoh Responsif <a class="header-anchor" href="#contoh-responsif" aria-label="Permalink to &quot;Contoh Responsif&quot;">​</a></h2><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;!-- Padding progresif --&gt;</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big desk:p:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Membesar dengan saiz skrin</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"></span>
36
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Lebar responsif --&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;">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;w:[100%] tab:w:[50%] lap:w:[33%]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Penuh → separuh → satu pertiga</span></span>
39
- <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>
40
- <span class="line"></span>
41
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Gap responsif --&gt;</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium lap:g:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Gap yang membesar</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="rujukan-skala" tabindex="-1">Rujukan Skala <a class="header-anchor" href="#rujukan-skala" aria-label="Permalink to &quot;Rujukan Skala&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Nilai Lalai</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td></tr><tr><td><code>tiny</code></td><td>4px</td></tr><tr><td><code>small</code></td><td>8px</td></tr><tr><td><code>medium</code></td><td>16px</td></tr><tr><td><code>big</code></td><td>32px</td></tr><tr><td><code>giant</code></td><td>64px</td></tr><tr><td><code>vast</code></td><td>128px</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/ms/reference/layout.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>layout</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/reference/visual.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>visual</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>
45
- <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>
46
-
47
- </body>
48
- </html>
package/docs/.vitepress/dist/ms/reference/spacing.html DELETED
@@ -1,56 +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>Rujukan Jarak | 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_reference_spacing.md.XmXLLPOZ.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/reference/spacing.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/reference/spacing.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>Atribut</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/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/ms/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Tema</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/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Jarak</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/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Warna</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/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoint</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_reference_spacing" data-v-39a288b8><div><h1 id="rujukan-jarak" tabindex="-1">Rujukan Jarak <a class="header-anchor" href="#rujukan-jarak" aria-label="Permalink to &quot;Rujukan Jarak&quot;">​</a></h1><p>Rujukan lengkap untuk skala jarak.</p><h2 id="skala-lalai" tabindex="-1">Skala Lalai <a class="header-anchor" href="#skala-lalai" aria-label="Permalink to &quot;Skala Lalai&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Nilai</th><th>Kes Penggunaan</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td><td>Reset jarak</td></tr><tr><td><code>tiny</code></td><td>4px</td><td>Sempadan, offset kecil</td></tr><tr><td><code>small</code></td><td>8px</td><td>Kumpulkan item berkaitan</td></tr><tr><td><code>medium</code></td><td>16px</td><td>Lalai standard</td></tr><tr><td><code>big</code></td><td>32px</td><td>Pisahkan seksyen</td></tr><tr><td><code>giant</code></td><td>64px</td><td>Bahagian layout</td></tr><tr><td><code>vast</code></td><td>128px</td><td>Seksyen hero</td></tr></tbody></table><h2 id="variable-css" tabindex="-1">Variable CSS <a class="header-anchor" href="#variable-css" aria-label="Permalink to &quot;Variable CSS&quot;">​</a></h2><p>Skala jarak menghasilkan variable CSS ini:</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:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
22
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
23
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-tiny</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
24
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
25
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-medium</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
26
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-big</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
27
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-giant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">64</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
28
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-vast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">128</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="contoh-penggunaan" tabindex="-1">Contoh Penggunaan <a class="header-anchor" href="#contoh-penggunaan" aria-label="Permalink to &quot;Contoh Penggunaan&quot;">​</a></h2><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;!-- Padding --&gt;</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;16px padding semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
- <span class="line"><span 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:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;32px padding horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32
- <span class="line"></span>
33
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Margin --&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;">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;m:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;8px margin semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</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;">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;m-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;64px margin bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <span class="line"></span>
37
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Gap --&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#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;8px gap antara item&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="penyesuaian" tabindex="-1">Penyesuaian <a class="header-anchor" href="#penyesuaian" aria-label="Permalink to &quot;Penyesuaian&quot;">​</a></h2><p>Tindih ganti dalam <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spacing: {</span></span>
41
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tiny&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tindih ganti sedia ada</span></span>
42
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah baru</span></span>
43
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;massive&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;512px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah baru</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></code></pre></div><h2 id="panduan-visual" tabindex="-1">Panduan Visual <a class="header-anchor" href="#panduan-visual" aria-label="Permalink to &quot;Panduan Visual&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>none │ (tiada ruang)</span></span>
47
- <span class="line"><span>tiny │▌ 4px</span></span>
48
- <span class="line"><span>small │██ 8px</span></span>
49
- <span class="line"><span>medium │████ 16px</span></span>
50
- <span class="line"><span>big │████████ 32px</span></span>
51
- <span class="line"><span>giant │████████████████ 64px</span></span>
52
- <span class="line"><span>vast │████████████████████████████████ 128px</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/ms/reference/visual.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>visual</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/reference/colors.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Warna</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>
53
- <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>
54
-
55
- </body>
56
- </html>