@bookklik/senangstart-css 0.1.4 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (527) hide show
  1. package/.github/workflows/deploy-docs.yml +7 -1
  2. package/dist/senangstart-css.js +1436 -14
  3. package/dist/senangstart-css.min.js +1159 -10
  4. package/docs/.vitepress/config.js +624 -18
  5. package/docs/.vitepress/theme/custom.css +0 -1
  6. package/docs/SYNTAX-REFERENCE.md +1555 -0
  7. package/docs/guide/preflight.md +139 -0
  8. package/docs/index.md +8 -20
  9. package/docs/ms/guide/preflight.md +139 -0
  10. package/docs/ms/index.md +8 -20
  11. package/docs/ms/reference/colors.md +45 -45
  12. package/docs/ms/reference/layout/align-content.md +35 -0
  13. package/docs/ms/reference/layout/align-items.md +33 -0
  14. package/docs/ms/reference/layout/align-self.md +34 -0
  15. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  16. package/docs/ms/reference/layout/border-collapse.md +30 -0
  17. package/docs/ms/reference/layout/border-spacing.md +39 -0
  18. package/docs/ms/reference/layout/box-sizing.md +30 -0
  19. package/docs/ms/reference/layout/caption-side.md +30 -0
  20. package/docs/ms/reference/layout/columns.md +30 -0
  21. package/docs/ms/reference/layout/container.md +29 -0
  22. package/docs/ms/reference/layout/display.md +60 -0
  23. package/docs/ms/reference/layout/flex-basis.md +38 -0
  24. package/docs/ms/reference/layout/flex-direction.md +33 -0
  25. package/docs/ms/reference/layout/flex-items.md +32 -0
  26. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  27. package/docs/ms/reference/layout/flex.md +40 -0
  28. package/docs/ms/reference/layout/float-clear.md +32 -0
  29. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  30. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  31. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  32. package/docs/ms/reference/layout/grid-columns.md +32 -0
  33. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  34. package/docs/ms/reference/layout/grid-rows.md +31 -0
  35. package/docs/ms/reference/layout/inset.md +44 -0
  36. package/docs/ms/reference/layout/isolation.md +30 -0
  37. package/docs/ms/reference/layout/justify-content.md +36 -0
  38. package/docs/ms/reference/layout/justify-items.md +32 -0
  39. package/docs/ms/reference/layout/justify-self.md +33 -0
  40. package/docs/ms/reference/layout/object-fit.md +33 -0
  41. package/docs/ms/reference/layout/object-position.md +45 -0
  42. package/docs/ms/reference/layout/order.md +32 -0
  43. package/docs/ms/reference/layout/overflow.md +34 -0
  44. package/docs/ms/reference/layout/overscroll.md +31 -0
  45. package/docs/ms/reference/layout/place-content.md +35 -0
  46. package/docs/ms/reference/layout/place-items.md +32 -0
  47. package/docs/ms/reference/layout/place-self.md +33 -0
  48. package/docs/ms/reference/layout/position.md +34 -0
  49. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  50. package/docs/ms/reference/layout/table-layout.md +30 -0
  51. package/docs/ms/reference/layout/visibility.md +30 -0
  52. package/docs/ms/reference/layout/z-index.md +33 -0
  53. package/docs/ms/reference/layout.md +53 -95
  54. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  55. package/docs/ms/reference/space/gap.md +44 -0
  56. package/docs/ms/reference/space/height.md +44 -0
  57. package/docs/ms/reference/space/margin.md +49 -0
  58. package/docs/ms/reference/space/padding.md +49 -0
  59. package/docs/ms/reference/space/scale-reference.md +43 -0
  60. package/docs/ms/reference/space/sizing.md +27 -0
  61. package/docs/ms/reference/space/width.md +45 -0
  62. package/docs/ms/reference/space.md +15 -99
  63. package/docs/ms/reference/spacing.md +22 -8
  64. package/docs/ms/reference/visual/accent-color.md +31 -0
  65. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  66. package/docs/ms/reference/visual/animation-delay.md +41 -0
  67. package/docs/ms/reference/visual/animation-direction.md +32 -0
  68. package/docs/ms/reference/visual/animation-duration.md +43 -0
  69. package/docs/ms/reference/visual/animation-fill.md +32 -0
  70. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  71. package/docs/ms/reference/visual/animation-play.md +30 -0
  72. package/docs/ms/reference/visual/appearance.md +30 -0
  73. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  74. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  75. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  76. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  78. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  79. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  80. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  81. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  82. package/docs/ms/reference/visual/background-attachment.md +31 -0
  83. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  84. package/docs/ms/reference/visual/background-clip.md +32 -0
  85. package/docs/ms/reference/visual/background-color.md +33 -0
  86. package/docs/ms/reference/visual/background-image.md +41 -0
  87. package/docs/ms/reference/visual/background-origin.md +31 -0
  88. package/docs/ms/reference/visual/background-position.md +45 -0
  89. package/docs/ms/reference/visual/background-repeat.md +34 -0
  90. package/docs/ms/reference/visual/background-size.md +39 -0
  91. package/docs/ms/reference/visual/background.md +13 -0
  92. package/docs/ms/reference/visual/blend-modes.md +34 -0
  93. package/docs/ms/reference/visual/border-radius.md +34 -0
  94. package/docs/ms/reference/visual/border-style.md +33 -0
  95. package/docs/ms/reference/visual/border-width.md +44 -0
  96. package/docs/ms/reference/visual/border.md +43 -0
  97. package/docs/ms/reference/visual/box-shadow.md +33 -0
  98. package/docs/ms/reference/visual/caret-color.md +31 -0
  99. package/docs/ms/reference/visual/color-scheme.md +31 -0
  100. package/docs/ms/reference/visual/cursor.md +37 -0
  101. package/docs/ms/reference/visual/field-sizing.md +30 -0
  102. package/docs/ms/reference/visual/fill.md +38 -0
  103. package/docs/ms/reference/visual/filter-blur.md +43 -0
  104. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  105. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  106. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  107. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  108. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  109. package/docs/ms/reference/visual/filter-invert.md +39 -0
  110. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  111. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  112. package/docs/ms/reference/visual/font-family.md +31 -0
  113. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  114. package/docs/ms/reference/visual/font-style.md +30 -0
  115. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  116. package/docs/ms/reference/visual/font-weight.md +31 -0
  117. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  118. package/docs/ms/reference/visual/hyphens.md +31 -0
  119. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  120. package/docs/ms/reference/visual/line-clamp.md +40 -0
  121. package/docs/ms/reference/visual/line-height.md +42 -0
  122. package/docs/ms/reference/visual/list-style.md +34 -0
  123. package/docs/ms/reference/visual/mask.md +39 -0
  124. package/docs/ms/reference/visual/opacity.md +33 -0
  125. package/docs/ms/reference/visual/outline.md +31 -0
  126. package/docs/ms/reference/visual/pointer-events.md +30 -0
  127. package/docs/ms/reference/visual/resize.md +32 -0
  128. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  129. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  130. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  131. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  132. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  133. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  134. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  135. package/docs/ms/reference/visual/stroke-width.md +39 -0
  136. package/docs/ms/reference/visual/stroke.md +38 -0
  137. package/docs/ms/reference/visual/text-alignment.md +32 -0
  138. package/docs/ms/reference/visual/text-color.md +41 -0
  139. package/docs/ms/reference/visual/text-decoration.md +32 -0
  140. package/docs/ms/reference/visual/text-indent.md +37 -0
  141. package/docs/ms/reference/visual/text-overflow.md +31 -0
  142. package/docs/ms/reference/visual/text-shadow.md +40 -0
  143. package/docs/ms/reference/visual/text-size.md +32 -0
  144. package/docs/ms/reference/visual/text-transform.md +32 -0
  145. package/docs/ms/reference/visual/text-wrap.md +32 -0
  146. package/docs/ms/reference/visual/touch-action.md +36 -0
  147. package/docs/ms/reference/visual/transform-backface.md +30 -0
  148. package/docs/ms/reference/visual/transform-origin.md +45 -0
  149. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  150. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  151. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  152. package/docs/ms/reference/visual/transform-scale.md +43 -0
  153. package/docs/ms/reference/visual/transform-skew.md +40 -0
  154. package/docs/ms/reference/visual/transform-style.md +30 -0
  155. package/docs/ms/reference/visual/transform-translate.md +39 -0
  156. package/docs/ms/reference/visual/transition-delay.md +41 -0
  157. package/docs/ms/reference/visual/transition-duration.md +43 -0
  158. package/docs/ms/reference/visual/transition-property.md +34 -0
  159. package/docs/ms/reference/visual/transition-timing.md +40 -0
  160. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  161. package/docs/ms/reference/visual/user-select.md +32 -0
  162. package/docs/ms/reference/visual/vertical-align.md +36 -0
  163. package/docs/ms/reference/visual/whitespace.md +34 -0
  164. package/docs/ms/reference/visual/will-change.md +33 -0
  165. package/docs/ms/reference/visual/word-break.md +32 -0
  166. package/docs/ms/reference/visual.md +145 -148
  167. package/docs/public/assets/senangstart-css.min.js +1545 -0
  168. package/docs/reference/layout/align-content.md +35 -0
  169. package/docs/reference/layout/align-items.md +33 -0
  170. package/docs/reference/layout/align-self.md +34 -0
  171. package/docs/reference/layout/aspect-ratio.md +40 -0
  172. package/docs/reference/layout/border-collapse.md +30 -0
  173. package/docs/reference/layout/border-spacing.md +39 -0
  174. package/docs/reference/layout/box-sizing.md +30 -0
  175. package/docs/reference/layout/caption-side.md +30 -0
  176. package/docs/reference/layout/columns.md +30 -0
  177. package/docs/reference/layout/container.md +29 -0
  178. package/docs/reference/layout/display.md +60 -0
  179. package/docs/reference/layout/flex-basis.md +38 -0
  180. package/docs/reference/layout/flex-direction.md +33 -0
  181. package/docs/reference/layout/flex-items.md +32 -0
  182. package/docs/reference/layout/flex-wrap.md +31 -0
  183. package/docs/reference/layout/flex.md +40 -0
  184. package/docs/reference/layout/float-clear.md +32 -0
  185. package/docs/reference/layout/grid-auto-flow.md +33 -0
  186. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  187. package/docs/reference/layout/grid-column-span.md +31 -0
  188. package/docs/reference/layout/grid-columns.md +32 -0
  189. package/docs/reference/layout/grid-row-span.md +30 -0
  190. package/docs/reference/layout/grid-rows.md +31 -0
  191. package/docs/reference/layout/inset.md +44 -0
  192. package/docs/reference/layout/isolation.md +30 -0
  193. package/docs/reference/layout/justify-content.md +36 -0
  194. package/docs/reference/layout/justify-items.md +32 -0
  195. package/docs/reference/layout/justify-self.md +33 -0
  196. package/docs/reference/layout/object-fit.md +33 -0
  197. package/docs/reference/layout/object-position.md +45 -0
  198. package/docs/reference/layout/order.md +32 -0
  199. package/docs/reference/layout/overflow.md +34 -0
  200. package/docs/reference/layout/overscroll.md +31 -0
  201. package/docs/reference/layout/place-content.md +35 -0
  202. package/docs/reference/layout/place-items.md +32 -0
  203. package/docs/reference/layout/place-self.md +33 -0
  204. package/docs/reference/layout/position.md +34 -0
  205. package/docs/reference/layout/shorthand-alignment.md +34 -0
  206. package/docs/reference/layout/table-layout.md +30 -0
  207. package/docs/reference/layout/visibility.md +30 -0
  208. package/docs/reference/layout/z-index.md +33 -0
  209. package/docs/reference/layout.md +60 -102
  210. package/docs/reference/space/arbitrary-values.md +39 -0
  211. package/docs/reference/space/gap.md +44 -0
  212. package/docs/reference/space/height.md +44 -0
  213. package/docs/reference/space/margin.md +49 -0
  214. package/docs/reference/space/padding.md +49 -0
  215. package/docs/reference/space/scale-reference.md +43 -0
  216. package/docs/reference/space/width.md +45 -0
  217. package/docs/reference/space.md +14 -98
  218. package/docs/reference/spacing.md +22 -8
  219. package/docs/reference/visual/accent-color.md +31 -0
  220. package/docs/reference/visual/animation-builtin.md +41 -0
  221. package/docs/reference/visual/animation-delay.md +41 -0
  222. package/docs/reference/visual/animation-direction.md +32 -0
  223. package/docs/reference/visual/animation-duration.md +43 -0
  224. package/docs/reference/visual/animation-fill.md +32 -0
  225. package/docs/reference/visual/animation-iteration.md +30 -0
  226. package/docs/reference/visual/animation-play.md +30 -0
  227. package/docs/reference/visual/appearance.md +30 -0
  228. package/docs/reference/visual/backdrop-blur.md +43 -0
  229. package/docs/reference/visual/backdrop-brightness.md +41 -0
  230. package/docs/reference/visual/backdrop-contrast.md +41 -0
  231. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  232. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  233. package/docs/reference/visual/backdrop-invert.md +39 -0
  234. package/docs/reference/visual/backdrop-opacity.md +39 -0
  235. package/docs/reference/visual/backdrop-saturate.md +41 -0
  236. package/docs/reference/visual/backdrop-sepia.md +39 -0
  237. package/docs/reference/visual/background-attachment.md +31 -0
  238. package/docs/reference/visual/background-blend-mode.md +34 -0
  239. package/docs/reference/visual/background-clip.md +32 -0
  240. package/docs/reference/visual/background-color.md +33 -0
  241. package/docs/reference/visual/background-image.md +41 -0
  242. package/docs/reference/visual/background-origin.md +31 -0
  243. package/docs/reference/visual/background-position.md +45 -0
  244. package/docs/reference/visual/background-repeat.md +34 -0
  245. package/docs/reference/visual/background-size.md +39 -0
  246. package/docs/reference/visual/blend-modes.md +34 -0
  247. package/docs/reference/visual/border-radius.md +34 -0
  248. package/docs/reference/visual/border-style.md +33 -0
  249. package/docs/reference/visual/border-width.md +44 -0
  250. package/docs/reference/visual/border.md +43 -0
  251. package/docs/reference/visual/box-shadow.md +33 -0
  252. package/docs/reference/visual/caret-color.md +31 -0
  253. package/docs/reference/visual/color-scheme.md +31 -0
  254. package/docs/reference/visual/cursor.md +37 -0
  255. package/docs/reference/visual/field-sizing.md +30 -0
  256. package/docs/reference/visual/fill.md +38 -0
  257. package/docs/reference/visual/filter-blur.md +43 -0
  258. package/docs/reference/visual/filter-brightness.md +41 -0
  259. package/docs/reference/visual/filter-contrast.md +41 -0
  260. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  261. package/docs/reference/visual/filter-grayscale.md +39 -0
  262. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  263. package/docs/reference/visual/filter-invert.md +39 -0
  264. package/docs/reference/visual/filter-saturate.md +41 -0
  265. package/docs/reference/visual/filter-sepia.md +39 -0
  266. package/docs/reference/visual/font-family.md +31 -0
  267. package/docs/reference/visual/font-smoothing.md +30 -0
  268. package/docs/reference/visual/font-style.md +30 -0
  269. package/docs/reference/visual/font-variant-numeric.md +35 -0
  270. package/docs/reference/visual/font-weight.md +31 -0
  271. package/docs/reference/visual/forced-color-adjust.md +30 -0
  272. package/docs/reference/visual/hyphens.md +31 -0
  273. package/docs/reference/visual/letter-spacing.md +42 -0
  274. package/docs/reference/visual/line-clamp.md +40 -0
  275. package/docs/reference/visual/line-height.md +42 -0
  276. package/docs/reference/visual/list-style.md +34 -0
  277. package/docs/reference/visual/mask.md +39 -0
  278. package/docs/reference/visual/opacity.md +33 -0
  279. package/docs/reference/visual/outline.md +31 -0
  280. package/docs/reference/visual/pointer-events.md +30 -0
  281. package/docs/reference/visual/resize.md +32 -0
  282. package/docs/reference/visual/scroll-behavior.md +30 -0
  283. package/docs/reference/visual/scroll-margin.md +41 -0
  284. package/docs/reference/visual/scroll-padding.md +41 -0
  285. package/docs/reference/visual/scroll-snap-align.md +32 -0
  286. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  287. package/docs/reference/visual/scroll-snap-type.md +34 -0
  288. package/docs/reference/visual/state-prefixes.md +37 -0
  289. package/docs/reference/visual/stroke-width.md +39 -0
  290. package/docs/reference/visual/stroke.md +38 -0
  291. package/docs/reference/visual/text-alignment.md +32 -0
  292. package/docs/reference/visual/text-color.md +41 -0
  293. package/docs/reference/visual/text-decoration.md +32 -0
  294. package/docs/reference/visual/text-indent.md +37 -0
  295. package/docs/reference/visual/text-overflow.md +31 -0
  296. package/docs/reference/visual/text-shadow.md +40 -0
  297. package/docs/reference/visual/text-size.md +32 -0
  298. package/docs/reference/visual/text-transform.md +32 -0
  299. package/docs/reference/visual/text-wrap.md +32 -0
  300. package/docs/reference/visual/touch-action.md +36 -0
  301. package/docs/reference/visual/transform-backface.md +30 -0
  302. package/docs/reference/visual/transform-origin.md +45 -0
  303. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  304. package/docs/reference/visual/transform-perspective.md +43 -0
  305. package/docs/reference/visual/transform-rotate.md +40 -0
  306. package/docs/reference/visual/transform-scale.md +43 -0
  307. package/docs/reference/visual/transform-skew.md +40 -0
  308. package/docs/reference/visual/transform-style.md +30 -0
  309. package/docs/reference/visual/transform-translate.md +39 -0
  310. package/docs/reference/visual/transition-delay.md +41 -0
  311. package/docs/reference/visual/transition-duration.md +43 -0
  312. package/docs/reference/visual/transition-property.md +34 -0
  313. package/docs/reference/visual/transition-timing.md +40 -0
  314. package/docs/reference/visual/typography-keywords.md +81 -0
  315. package/docs/reference/visual/user-select.md +32 -0
  316. package/docs/reference/visual/vertical-align.md +36 -0
  317. package/docs/reference/visual/whitespace.md +34 -0
  318. package/docs/reference/visual/will-change.md +33 -0
  319. package/docs/reference/visual/word-break.md +32 -0
  320. package/docs/reference/visual.md +151 -154
  321. package/docs/syntax-reference.json +1973 -0
  322. package/package.json +12 -4
  323. package/playground/index.html +78 -0
  324. package/playground/jit-test.html +384 -0
  325. package/scripts/extract-syntax.js +152 -0
  326. package/scripts/generate-docs.js +352 -0
  327. package/src/cdn/jit.js +1436 -14
  328. package/src/cli/commands/build.js +5 -0
  329. package/src/cli/index.js +2 -0
  330. package/src/compiler/generators/css.js +1537 -25
  331. package/src/compiler/generators/preflight.js +379 -0
  332. package/src/config/defaults.js +19 -1
  333. package/src/definitions/index.js +153 -0
  334. package/src/definitions/layout-alignment.js +257 -0
  335. package/src/definitions/layout-flex.js +209 -0
  336. package/src/definitions/layout-grid.js +150 -0
  337. package/src/definitions/layout-positioning.js +89 -0
  338. package/src/definitions/layout-table.js +98 -0
  339. package/src/definitions/layout-utilities.js +262 -0
  340. package/src/definitions/layout.js +195 -0
  341. package/src/definitions/space.js +164 -0
  342. package/src/definitions/visual-backgrounds.js +423 -0
  343. package/src/definitions/visual-borders.js +111 -0
  344. package/src/definitions/visual-filters.js +204 -0
  345. package/src/definitions/visual-interactivity.js +292 -0
  346. package/src/definitions/visual-svg.js +80 -0
  347. package/src/definitions/visual-transform3d.js +159 -0
  348. package/src/definitions/visual-transforms.js +142 -0
  349. package/src/definitions/visual-transitions.js +277 -0
  350. package/src/definitions/visual-typography.js +386 -0
  351. package/src/definitions/visual.js +542 -0
  352. package/tests/helpers/test-utils.js +144 -0
  353. package/tests/integration/compiler.test.js +247 -0
  354. package/tests/sync/docs-sync.test.js +364 -0
  355. package/tests/unit/compiler/generators/css.test.js +719 -0
  356. package/tests/unit/compiler/parser.test.js +244 -0
  357. package/tests/unit/compiler/tokenizer.test.js +305 -0
  358. package/tests/unit/config/defaults.test.js +168 -0
  359. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  360. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  361. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/package.json +0 -3
  363. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  364. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  365. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  366. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  367. package/docs/.vitepress/cache/deps/vue.js +0 -347
  368. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  369. package/docs/.vitepress/dist/404.html +0 -22
  370. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  371. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  372. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  373. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  374. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  375. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  376. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  377. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  378. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  379. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  380. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  381. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  382. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  383. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  384. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  385. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  386. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  387. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  388. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  389. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  390. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  391. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  392. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  393. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  394. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  395. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  396. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  397. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  398. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  399. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  400. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  401. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  402. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  403. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  404. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  405. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  406. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  407. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  419. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  420. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  421. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  422. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  423. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  424. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  425. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  426. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  427. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  428. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  429. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  430. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  431. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  432. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  433. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  434. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  435. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  436. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  437. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  438. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  439. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  440. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  441. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  442. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  443. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  444. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  445. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  446. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  447. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  448. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  449. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  450. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  451. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  452. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  453. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  454. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  455. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  456. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  457. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  458. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  459. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  460. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  461. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  462. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  463. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  464. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  465. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  466. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  467. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  468. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  469. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  470. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  471. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  472. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  473. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  474. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  475. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  476. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  477. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  478. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  479. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  480. package/docs/.vitepress/dist/examples/cards.html +0 -108
  481. package/docs/.vitepress/dist/examples/forms.html +0 -193
  482. package/docs/.vitepress/dist/examples/hero.html +0 -142
  483. package/docs/.vitepress/dist/examples/index.html +0 -76
  484. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  485. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  486. package/docs/.vitepress/dist/guide/cli.html +0 -68
  487. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  488. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  489. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  490. package/docs/.vitepress/dist/guide/index.html +0 -27
  491. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  492. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  493. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  494. package/docs/.vitepress/dist/guide/states.html +0 -101
  495. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  496. package/docs/.vitepress/dist/hashmap.json +0 -1
  497. package/docs/.vitepress/dist/index.html +0 -31
  498. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  499. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  500. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  501. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  502. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  503. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  504. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  505. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  506. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  507. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  508. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  509. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  510. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  511. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  512. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  513. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  514. package/docs/.vitepress/dist/ms/index.html +0 -31
  515. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  516. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  517. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  518. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  519. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  520. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  521. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  522. package/docs/.vitepress/dist/reference/colors.html +0 -41
  523. package/docs/.vitepress/dist/reference/layout.html +0 -37
  524. package/docs/.vitepress/dist/reference/space.html +0 -48
  525. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  526. package/docs/.vitepress/dist/reference/visual.html +0 -46
  527. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/examples/navigation.html DELETED
@@ -1,130 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Navigation Examples | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.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/examples_navigation.md.DvL-Yv_5.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/" 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/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.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/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="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>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/examples/navigation.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</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>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/examples/navigation.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</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>Components</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/examples/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Overview</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/examples/cards.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Cards</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/examples/navigation.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Navigation</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/examples/hero.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hero Sections</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/examples/forms.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Forms</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_examples_navigation" data-v-39a288b8><div><h1 id="navigation-examples" tabindex="-1">Navigation Examples <a class="header-anchor" href="#navigation-examples" aria-label="Permalink to &quot;Navigation Examples&quot;">​</a></h1><p>Navigation patterns built with SenangStart CSS.</p><h2 id="simple-navbar" tabindex="-1">Simple Navbar <a class="header-anchor" href="#simple-navbar" aria-label="Permalink to &quot;Simple Navbar&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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span></span>
22
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between center&quot;</span></span>
23
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span></span>
24
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white shadow:small&quot;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Logo&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;"> 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:medium&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;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Home&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</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;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;About&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</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;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Contact&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</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:#24292E;--shiki-dark:#E1E4E8;">&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;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="fixed-navigation" tabindex="-1">Fixed Navigation <a class="header-anchor" href="#fixed-navigation" aria-label="Permalink to &quot;Fixed Navigation&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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span></span>
33
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between center fixed z:top&quot;</span></span>
34
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] p-x:big p-y:small&quot;</span></span>
35
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white shadow:small&quot;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Logo&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span 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:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark hover:text:primary font:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Home&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Products&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Pricing&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&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;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;About&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
- <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>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
45
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:medium p-y:tiny&quot;</span></span>
46
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:medium hover:bg:[#2563EB]&quot;</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Sign Up</span></span>
49
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
50
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="responsive-navigation" tabindex="-1">Responsive Navigation <a class="header-anchor" href="#responsive-navigation" aria-label="Permalink to &quot;Responsive Navigation&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;!-- Mobile menu button (hidden on tablet+) --&gt;</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block tab:hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ☰ Menu</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"></span>
55
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Desktop navigation (hidden on mobile) --&gt;</span></span>
56
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span></span>
57
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex between center&quot;</span></span>
58
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span></span>
59
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white&quot;</span></span>
60
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
61
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Logo&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
62
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#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:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
63
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Home&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;About&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
66
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="sidebar-navigation" tabindex="-1">Sidebar Navigation <a class="header-anchor" href="#sidebar-navigation" aria-label="Permalink to &quot;Sidebar Navigation&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:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">aside</span></span>
67
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span></span>
68
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[250px] h:[100vh] p:medium&quot;</span></span>
69
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:dark&quot;</span></span>
70
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
71
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">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:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold text-size:big text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
72
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Dashboard</span></span>
73
- <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>
74
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
75
- <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 col&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:tiny&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
76
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
77
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
78
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:white bg:[rgba(255,255,255,0.1)] rounded:small&quot;</span></span>
79
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
80
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 🏠 Home</span></span>
81
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
82
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
83
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
84
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small&quot;</span></span>
85
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
86
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 📊 Analytics</span></span>
87
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
88
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
89
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
90
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small&quot;</span></span>
91
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
92
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 👥 Users</span></span>
93
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
94
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
95
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small&quot;</span></span>
96
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small&quot;</span></span>
97
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
98
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ⚙️ Settings</span></span>
99
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
100
- <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>
101
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">aside</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="breadcrumb" tabindex="-1">Breadcrumb <a class="header-anchor" href="#breadcrumb" aria-label="Permalink to &quot;Breadcrumb&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:#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&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 p:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
102
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary hover:text:[#2563EB]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Home&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
103
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;/&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
104
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary hover:text:[#2563EB]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Products&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
105
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;/&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
106
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Current Page&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
107
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="tab-navigation" tabindex="-1">Tab Navigation <a class="header-anchor" href="#tab-navigation" aria-label="Permalink to &quot;Tab Navigation&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:#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:none&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border-b:light&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
108
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
109
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:medium p-y:small&quot;</span></span>
110
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary border-b:[2px] border:primary&quot;</span></span>
111
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
112
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tab 1</span></span>
113
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
114
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
115
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:medium p-y:small&quot;</span></span>
116
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:dark&quot;</span></span>
117
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
118
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tab 2</span></span>
119
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
120
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
121
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:medium p-y:small&quot;</span></span>
122
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:dark&quot;</span></span>
123
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
124
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tab 3</span></span>
125
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
126
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/examples/cards.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Cards</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/examples/hero.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Hero Sections</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>
127
- <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>
128
-
129
- </body>
130
- </html>
package/docs/.vitepress/dist/guide/cdn.html DELETED
@@ -1,54 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>CDN (Zero Build) | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.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/guide_cdn.md.Bbb7-icp.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/" 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/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.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/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="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>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/cdn.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</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>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/cdn.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</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>Introduction</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Core Concepts</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Dark Mode</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Usage</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_guide_cdn" data-v-39a288b8><div><h1 id="cdn-zero-build" tabindex="-1">CDN (Zero Build) <a class="header-anchor" href="#cdn-zero-build" aria-label="Permalink to &quot;CDN (Zero Build)&quot;">​</a></h1><p>The fastest way to use SenangStart CSS — no build step required.</p><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><p>Add a single script tag to your HTML:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;My App&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
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>
29
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center&quot;</span></span>
30
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:big&quot;</span></span>
31
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary text:white rounded:big&quot;</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</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:#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;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>That&#39;s it! No npm, no build process, no configuration.</p><h2 id="how-it-works" tabindex="-1">How It Works <a class="header-anchor" href="#how-it-works" aria-label="Permalink to &quot;How It Works&quot;">​</a></h2><p>The CDN JIT (Just-In-Time) runtime:</p><ol><li><strong>Scans the DOM</strong> — Finds all elements with <code>layout</code>, <code>space</code>, and <code>visual</code> attributes</li><li><strong>Generates CSS</strong> — Compiles styles on-the-fly in the browser</li><li><strong>Injects Styles</strong> — Creates a <code>&lt;style&gt;</code> tag with the compiled CSS</li><li><strong>Watches Changes</strong> — Uses MutationObserver to handle dynamic content</li></ol><h2 id="custom-configuration" tabindex="-1">Custom Configuration <a class="header-anchor" href="#custom-configuration" aria-label="Permalink to &quot;Custom Configuration&quot;">​</a></h2><p>Override default theme values with inline config:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
38
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;theme&quot;: {</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;colors&quot;: {</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;brand&quot;: &quot;#8B5CF6&quot;,</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;accent&quot;: &quot;#EC4899&quot;</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;spacing&quot;: {</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;huge&quot;: &quot;256px&quot;</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
49
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Now you can use your custom values:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:brand text:accent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom colors!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
50
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:huge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Huge padding!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="local-development" tabindex="-1">Local Development <a class="header-anchor" href="#local-development" aria-label="Permalink to &quot;Local Development&quot;">​</a></h2><p>For local development without a CDN, use the local JIT file:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./path/to/senangstart/src/cdn/jit.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="performance-considerations" tabindex="-1">Performance Considerations <a class="header-anchor" href="#performance-considerations" aria-label="Permalink to &quot;Performance Considerations&quot;">​</a></h2><div class="warning custom-block"><p class="custom-block-title">When to Use CLI Instead</p><p>The CDN JIT is perfect for:</p><ul><li>Prototyping and experimentation</li><li>Learning the framework</li><li>Small projects and demos</li><li>Rapid development</li></ul><p>For production applications, consider the <a href="/senangstart-css/guide/cli.html">CLI build</a> for:</p><ul><li>Better performance (pre-compiled CSS)</li><li>Smaller file sizes</li><li>No runtime overhead</li></ul></div><h2 id="browser-support" tabindex="-1">Browser Support <a class="header-anchor" href="#browser-support" aria-label="Permalink to &quot;Browser Support&quot;">​</a></h2><p>The CDN JIT uses modern JavaScript features:</p><ul><li>ES6+ syntax</li><li>MutationObserver API</li><li>CSS Custom Properties</li></ul><p>Supported in all modern browsers (Chrome, Firefox, Safari, Edge).</p><h2 id="debugging" tabindex="-1">Debugging <a class="header-anchor" href="#debugging" aria-label="Permalink to &quot;Debugging&quot;">​</a></h2><p>Open your browser&#39;s Developer Tools to see:</p><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>[SenangStart CSS] JIT runtime initialized ✓</span></span></code></pre></div><p>If you don&#39;t see this message, check that:</p><ol><li>The script is loading correctly</li><li>There are no JavaScript errors in the console</li><li>The config JSON (if used) is valid</li></ol></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/guide/dark-mode.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Dark Mode</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/cli.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>CLI Build</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>
51
- <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>
52
-
53
- </body>
54
- </html>