@bookklik/senangstart-css 0.1.3 → 0.1.7

package/docs/ms/reference/layout/container.md

@@ -0,0 +1,29 @@
+# Container
+
+Cipta bekas berpusat dengan lebar maksimum
+
+## Sintaks
+```
+layout="container"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `container` | `width: 100%; margin-left: auto; margin-right: auto` | Bekas berpusat |
+
+## Contoh
+
+```html
+<div layout="container">Centered content</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/display.md

@@ -0,0 +1,60 @@
+# Display
+
+Kawal jenis paparan elemen
+
+## Sintaks
+```
+layout="[display-value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `flex` | `display: flex` | Bekas flexbox |
+| `inline-flex` | `display: inline-flex` | Bekas flexbox sebaris |
+| `grid` | `display: grid` | Bekas grid |
+| `inline-grid` | `display: inline-grid` | Bekas grid sebaris |
+| `block` | `display: block` | Elemen blok |
+| `inline` | `display: inline-block` | Elemen blok sebaris |
+| `hidden` | `display: none` | Elemen tersembunyi |
+
+## Contoh
+
+```html
+<div layout="flex">Flexbox container</div>
+<div layout="grid">Grid container</div>
+<div layout="hidden">Hidden element</div>
+```
+
+## Pratonton
+
+<div layout="flex col" space="g:medium">
+<div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="flex"</code> - Item disusun secara mendatar</p>
+</div>
+
+<div layout="flex col" space="g:medium m-t:large">
+<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="grid"</code> - Item dalam susun atur grid</p>
+</div>
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/flex-basis.md

@@ -0,0 +1,38 @@
+# Flex Basis
+
+Tetapkan saiz awal item flex
+
+## Sintaks
+```
+layout="basis:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `flex-basis: auto` | Asas automatik |
+| `0` | `flex-basis: 0` | Asas sifar |
+
+## Contoh
+
+```html
+<div layout="basis:[200px]">200px basis</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="flex:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/flex-direction.md

@@ -0,0 +1,33 @@
+# Flex Direction
+
+Tetapkan arah item flex
+
+## Sintaks
+```
+layout="[direction]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `row` | `flex-direction: row` | Mendatar (lalai) |
+| `col` | `flex-direction: column` | Menegak |
+| `row-reverse` | `flex-direction: row-reverse` | Mendatar terbalik |
+| `col-reverse` | `flex-direction: column-reverse` | Menegak terbalik |
+
+## Contoh
+
+```html
+<div layout="flex row">Row direction</div>
+<div layout="flex col">Column direction</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/flex-items.md

@@ -0,0 +1,32 @@
+# Flex Items
+
+Kawal kelakuan kembang dan kecil flex
+
+## Sintaks
+```
+layout="[flex-item-value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `grow` | `flex-grow: 1` | Benarkan item berkembang |
+| `grow-0` | `flex-grow: 0` | Halang perkembangan |
+| `shrink` | `flex-shrink: 1` | Benarkan item mengecil |
+| `shrink-0` | `flex-shrink: 0` | Halang pengecilan |
+
+## Contoh
+
+```html
+<div layout="grow">Growing item</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/flex-wrap.md

@@ -0,0 +1,31 @@
+# Flex Wrap
+
+Kawal bagaimana item flex membungkus
+
+## Sintaks
+```
+layout="[wrap-value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `wrap` | `flex-wrap: wrap` | Benarkan pembungkusan |
+| `nowrap` | `flex-wrap: nowrap` | Halang pembungkusan |
+| `wrap-reverse` | `flex-wrap: wrap-reverse` | Bungkus terbalik |
+
+## Contoh
+
+```html
+<div layout="flex wrap">Wrapping flex</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/flex.md

@@ -0,0 +1,40 @@
+# Flex
+
+Properti pintasan flex
+
+## Sintaks
+```
+layout="flex:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1` | `flex: 1 1 0%` | Flex 1 |
+| `auto` | `flex: 1 1 auto` | Flex auto |
+| `initial` | `flex: 0 1 auto` | Flex awal |
+| `none` | `flex: none` | Tiada flex |
+
+## Contoh
+
+```html
+<div layout="flex:1">Flexible item</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="flex:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/float-clear.md

@@ -0,0 +1,32 @@
+# Float Clear
+
+Kawal pengapungan dan pembersihan elemen
+
+## Sintaks
+```
+layout="float:[value]" or layout="clear:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `left` | `float: left` | Apung kiri |
+| `right` | `float: right` | Apung kanan |
+| `none` | `float: none` | Tiada pengapungan |
+
+## Contoh
+
+```html
+<img layout="float:left">Float left</img>
+<div layout="clear:both">Clear floats</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-auto-flow.md

@@ -0,0 +1,33 @@
+# Grid Auto Flow
+
+Kawal bagaimana item diletakkan automatik dalam grid
+
+## Sintaks
+```
+layout="grid-flow:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `row` | `grid-auto-flow: row` | Letakkan mengikut baris |
+| `col` | `grid-auto-flow: column` | Letakkan mengikut lajur |
+| `dense` | `grid-auto-flow: dense` | Pembungkusan padat |
+| `row-dense` | `grid-auto-flow: row dense` | Baris dengan padat |
+| `col-dense` | `grid-auto-flow: column dense` | Lajur dengan padat |
+
+## Contoh
+
+```html
+<div layout="grid grid-flow:col">Column flow</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-auto-sizing.md

@@ -0,0 +1,32 @@
+# Grid Auto Sizing
+
+Kawal saiz trek grid yang dijana automatik
+
+## Sintaks
+```
+layout="auto-cols:[value]" or layout="auto-rows:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `auto` | Saiz automatik |
+| `min` | `min-content` | Kandungan minimum |
+| `max` | `max-content` | Kandungan maksimum |
+| `fr` | `minmax(0, 1fr)` | Unit pecahan |
+
+## Contoh
+
+```html
+<div layout="grid auto-cols:min">Auto min columns</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-column-span.md

@@ -0,0 +1,31 @@
+# Grid Column Span
+
+Merentangi lajur grid
+
+## Sintaks
+```
+layout="col-span:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1-12` | `grid-column: span {n} / span {n}` | Merentangi N lajur |
+| `full` | `grid-column: 1 / -1` | Merentangi semua lajur |
+
+## Contoh
+
+```html
+<div layout="col-span:2">Spans 2 columns</div>
+<div layout="col-span:full">Full width</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-columns.md

@@ -0,0 +1,32 @@
+# Grid Columns
+
+Tentukan templat lajur grid
+
+## Sintaks
+```
+layout="grid-cols:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1-12` | `grid-template-columns: repeat({n}, minmax(0, 1fr))` | N lajur sama |
+| `none` | `grid-template-columns: none` | Tiada lajur ditakrifkan |
+| `subgrid` | `grid-template-columns: subgrid` | Guna grid induk |
+
+## Contoh
+
+```html
+<div layout="grid grid-cols:3">3 columns</div>
+<div layout="grid grid-cols:12">12 columns</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-row-span.md

@@ -0,0 +1,30 @@
+# Grid Row Span
+
+Merentangi baris grid
+
+## Sintaks
+```
+layout="row-span:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1-12` | `grid-row: span {n} / span {n}` | Merentangi N baris |
+| `full` | `grid-row: 1 / -1` | Merentangi semua baris |
+
+## Contoh
+
+```html
+<div layout="row-span:2">Spans 2 rows</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/grid-rows.md

@@ -0,0 +1,31 @@
+# Grid Rows
+
+Tentukan templat baris grid
+
+## Sintaks
+```
+layout="grid-rows:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1-12` | `grid-template-rows: repeat({n}, minmax(0, 1fr))` | N baris sama |
+| `none` | `grid-template-rows: none` | Tiada baris ditakrifkan |
+| `subgrid` | `grid-template-rows: subgrid` | Guna grid induk |
+
+## Contoh
+
+```html
+<div layout="grid grid-rows:3">3 rows</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/inset.md

@@ -0,0 +1,44 @@
+# Inset
+
+Kawal ofset kedudukan
+
+## Sintaks
+```
+layout="inset:[value]" or layout="top:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `inset` | `inset: {value}` | Semua sisi |
+| `inset-x` | `left: {value}; right: {value}` | Kiri dan kanan |
+| `inset-y` | `top: {value}; bottom: {value}` | Atas dan bawah |
+| `top` | `top: {value}` | Ofset atas |
+| `right` | `right: {value}` | Ofset kanan |
+| `bottom` | `bottom: {value}` | Ofset bawah |
+| `left` | `left: {value}` | Ofset kiri |
+
+## Contoh
+
+```html
+<div layout="absolute inset:0">Full coverage</div>
+<div layout="absolute top:medium left:medium">Offset</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="inset:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/isolation.md

@@ -0,0 +1,30 @@
+# Isolation
+
+Cipta konteks tindanan baharu
+
+## Sintaks
+```
+layout="isolation:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `isolate` | `isolation: isolate` | Cipta konteks tindanan |
+| `auto` | `isolation: auto` | Pengasingan automatik |
+
+## Contoh
+
+```html
+<div layout="isolation:isolate">Isolated</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/justify-content.md

@@ -0,0 +1,36 @@
+# Justify Content
+
+Jajarkan item sepanjang paksi utama
+
+## Sintaks
+```
+layout="justify:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `start` | `justify-content: flex-start` | Jajar ke permulaan |
+| `end` | `justify-content: flex-end` | Jajar ke hujung |
+| `center` | `justify-content: center` | Tengahkan item |
+| `between` | `justify-content: space-between` | Ruang antara item |
+| `around` | `justify-content: space-around` | Ruang sekeliling item |
+| `evenly` | `justify-content: space-evenly` | Ruang sekata |
+| `stretch` | `justify-content: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="flex justify:center">Centered</div>
+<div layout="flex justify:between">Spaced</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/justify-items.md

@@ -0,0 +1,32 @@
+# Justify Items
+
+Jajarkan item grid pada paksi sebaris
+
+## Sintaks
+```
+layout="justify-items:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `start` | `justify-items: start` | Jajar permulaan |
+| `end` | `justify-items: end` | Jajar hujung |
+| `center` | `justify-items: center` | Jajar tengah |
+| `stretch` | `justify-items: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="grid justify-items:center">Centered items</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/justify-self.md

@@ -0,0 +1,33 @@
+# Justify Self
+
+Jajarkan satu item grid pada paksi sebaris
+
+## Sintaks
+```
+layout="justify-self:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `justify-self: auto` | Jajar automatik |
+| `start` | `justify-self: start` | Jajar permulaan |
+| `end` | `justify-self: end` | Jajar hujung |
+| `center` | `justify-self: center` | Jajar tengah |
+| `stretch` | `justify-self: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="justify-self:end">End aligned</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```