@bookklik/senangstart-css 0.1.4 → 0.1.7

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>
+```

package/docs/ms/reference/layout/object-fit.md

@@ -0,0 +1,33 @@
+# Object Fit
+
+Kawal bagaimana kandungan media muat dalam bekasnya
+
+## Sintaks
+```
+layout="object:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `contain` | `object-fit: contain` | Skala untuk muat, kekalkan nisbah |
+| `cover` | `object-fit: cover` | Tutup bekas, mungkin dipotong |
+| `fill` | `object-fit: fill` | Regang untuk mengisi |
+| `none` | `object-fit: none` | Tiada penskalaan |
+| `scale-down` | `object-fit: scale-down` | Lebih kecil antara tiada atau kandung |
+
+## Contoh
+
+```html
+<img layout="object:cover">Cover image</img>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/object-position.md

@@ -0,0 +1,45 @@
+# Object Position
+
+Letakkan kandungan elemen diganti dalam bekas
+
+## Sintaks
+```
+layout="object-pos:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `center` | `object-position: center` | Kedudukan tengah |
+| `top` | `object-position: top` | Kedudukan atas |
+| `bottom` | `object-position: bottom` | Kedudukan bawah |
+| `left` | `object-position: left` | Kedudukan kiri |
+| `right` | `object-position: right` | Kedudukan kanan |
+| `top-left` | `object-position: top left` | Atas kiri |
+| `top-right` | `object-position: top right` | Atas kanan |
+| `bottom-left` | `object-position: bottom left` | Bawah kiri |
+| `bottom-right` | `object-position: bottom right` | Bawah kanan |
+
+## Contoh
+
+```html
+<img layout="object:cover object-pos:top">Top positioned</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="object:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Order
+
+Kawal susunan item flex/grid
+
+## Sintaks
+```
+layout="order:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `first` | `order: -9999` | Pindah ke pertama |
+| `last` | `order: 9999` | Pindah ke terakhir |
+| `none` | `order: 0` | Susunan lalai |
+| `1-12` | `order: {n}` | Susunan tertentu |
+
+## Contoh
+
+```html
+<div layout="order:first">First item</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,34 @@
+# Overflow
+
+Kawal kelakuan limpahan kandungan
+
+## Sintaks
+```
+layout="overflow:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `overflow: auto` | Bar skrol bila perlu |
+| `hidden` | `overflow: hidden` | Sembunyikan limpahan |
+| `visible` | `overflow: visible` | Tunjukkan limpahan |
+| `scroll` | `overflow: scroll` | Sentiasa tunjuk bar skrol |
+| `clip` | `overflow: clip` | Potong limpahan |
+
+## Contoh
+
+```html
+<div layout="overflow:hidden">Clipped content</div>
+<div layout="overflow:auto">Scrollable</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,31 @@
+# Overscroll
+
+Kawal kelakuan rantaian skrol
+
+## Sintaks
+```
+layout="overscroll:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `overscroll-behavior: auto` | Kelakuan lalai |
+| `contain` | `overscroll-behavior: contain` | Kandung skrol |
+| `none` | `overscroll-behavior: none` | Tiada rantaian skrol |
+
+## Contoh
+
+```html
+<div layout="overscroll:contain">Contained scroll</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,35 @@
+# Place Content
+
+Pintasan untuk align-content dan justify-content
+
+## Sintaks
+```
+layout="place-content:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `start` | `place-content: start` | Jajar permulaan |
+| `end` | `place-content: end` | Jajar hujung |
+| `center` | `place-content: center` | Jajar tengah |
+| `between` | `place-content: space-between` | Ruang antara |
+| `around` | `place-content: space-around` | Ruang sekeliling |
+| `evenly` | `place-content: space-evenly` | Ruang sekata |
+| `stretch` | `place-content: stretch` | Regangkan kandungan |
+
+## Contoh
+
+```html
+<div layout="grid place-content:center">Centered content</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

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

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

@@ -0,0 +1,33 @@
+# Place Self
+
+Pintasan untuk align-self dan justify-self
+
+## Sintaks
+```
+layout="place-self:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `place-self: auto` | Jajar automatik |
+| `start` | `place-self: start` | Jajar permulaan |
+| `end` | `place-self: end` | Jajar hujung |
+| `center` | `place-self: center` | Jajar tengah |
+| `stretch` | `place-self: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="place-self:center">Centered item</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,34 @@
+# Position
+
+Tetapkan kaedah kedudukan
+
+## Sintaks
+```
+layout="[position-value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `static` | `position: static` | Kedudukan lalai |
+| `relative` | `position: relative` | Relatif kepada kedudukan normal |
+| `absolute` | `position: absolute` | Mutlak dalam bekas |
+| `fixed` | `position: fixed` | Tetap pada port pandangan |
+| `sticky` | `position: sticky` | Kedudukan melekit |
+
+## Contoh
+
+```html
+<div layout="absolute">Absolute positioned</div>
+<div layout="fixed">Fixed to viewport</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/shorthand-alignment.md

@@ -0,0 +1,34 @@
+# Shorthand Alignment
+
+Pintasan penjajaran pantas
+
+## Sintaks
+```
+layout="[alignment]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `center` | `justify-content: center; align-items: center` | Tengahkan kedua-dua paksi |
+| `start` | `justify-content: flex-start; align-items: flex-start` | Jajar ke permulaan |
+| `end` | `justify-content: flex-end; align-items: flex-end` | Jajar ke hujung |
+| `between` | `justify-content: space-between` | Ruang antara |
+| `around` | `justify-content: space-around` | Ruang sekeliling |
+| `evenly` | `justify-content: space-evenly` | Ruang sekata |
+
+## Contoh
+
+```html
+<div layout="flex center">Centered content</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/table-layout.md

@@ -0,0 +1,30 @@
+# Table Layout
+
+Kawal algoritma susun atur jadual
+
+## Sintaks
+```
+layout="table:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `table-layout: auto` | Susun atur automatik |
+| `fixed` | `table-layout: fixed` | Susun atur tetap |
+
+## Contoh
+
+```html
+<table layout="table:fixed">Fixed width columns</table>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

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

@@ -0,0 +1,30 @@
+# Visibility
+
+Kawal ketampakan elemen
+
+## Sintaks
+```
+layout="[visibility-value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `visible` | `visibility: visible` | Elemen kelihatan |
+| `invisible` | `visibility: hidden` | Elemen tidak kelihatan tetapi mengambil ruang |
+
+## Contoh
+
+```html
+<div layout="invisible">Invisible but present</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/z-index.md

@@ -0,0 +1,33 @@
+# Z Index
+
+Kawal susunan tindanan
+
+## Sintaks
+```
+layout="z:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `base` | `z-index: var(--z-base)` | Lapisan asas (0) |
+| `low` | `z-index: var(--z-low)` | Lapisan rendah (10) |
+| `mid` | `z-index: var(--z-mid)` | Lapisan tengah (50) |
+| `high` | `z-index: var(--z-high)` | Lapisan tinggi (100) |
+| `top` | `z-index: var(--z-top)` | Lapisan teratas (9999) |
+
+## Contoh
+
+```html
+<div layout="z:top">On top</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout.md

@@ -1,115 +1,73 @@
-# Rujukan layout
+# Rujukan Layout
 
-Atribusi `layout` mengawal struktur, kedudukan, dan aliran.
+Atribut `layout` mengawal struktur, kedudukan, dan aliran.
 
-## Paparan
+## Paparan & Bekas
 
-| Nilai | Output CSS |
-|-------|------------|
-| `flex` | `display: flex` |
-| `grid` | `display: grid` |
-| `block` | `display: block` |
-| `inline` | `display: inline-block` |
-| `hidden` | `display: none` |
+- [Paparan](./layout/display) - `flex`, `grid`, `block`, `hidden`
+- [Bekas](./layout/container) - `container`
 
-```html
-<div layout="flex">Kontena Flexbox</div>
-<div layout="grid">Kontena Grid</div>
-<div layout="hidden">Elemen tersembunyi</div>
-```
+## Flex
 
-## Arah Flex
-
-| Nilai | Output CSS |
-|-------|------------|
-| `row` | `flex-direction: row` |
-| `col` | `flex-direction: column` |
-| `row-reverse` | `flex-direction: row-reverse` |
-| `col-reverse` | `flex-direction: column-reverse` |
-
-```html
-<div layout="flex row">Horizontal</div>
-<div layout="flex col">Menegak</div>
-```
+- [Pintasan Flex](./layout/flex) - `flex:1`, `flex:auto`, `flex:none`
+- [Asas Flex](./layout/flex-basis) - `basis:0`, `basis:full`, `basis:[value]`
+- [Arah Flex](./layout/flex-direction) - `row`, `col`, `row-reverse`, `col-reverse`
+- [Flex Wrap](./layout/flex-wrap) - `wrap`, `nowrap`, `wrap-reverse`
+- [Item Flex](./layout/flex-items) - `grow`, `shrink`, `grow:0`, `shrink:0`
+- [Order](./layout/order) - `order:first`, `order:last`, `order:1-12`
 
 ## Penjajaran
 
-| Nilai | Output CSS |
-|-------|------------|
-| `center` | `justify-content: center; align-items: center` |
-| `start` | `justify-content: flex-start; align-items: flex-start` |
-| `end` | `justify-content: flex-end; align-items: flex-end` |
-| `between` | `justify-content: space-between` |
-| `around` | `justify-content: space-around` |
-| `evenly` | `justify-content: space-evenly` |
-
-```html
-<div layout="flex center">Di tengah</div>
-<div layout="flex between">Jarak antara</div>
-```
-
-## Flex Wrap
-
-| Nilai | Output CSS |
-|-------|------------|
-| `wrap` | `flex-wrap: wrap` |
-| `nowrap` | `flex-wrap: nowrap` |
-
-```html
-<div layout="flex wrap">Flex yang melipat</div>
-```
+- [Justify Content](./layout/justify-content) - `justify:start`, `justify:center`, `justify:between`
+- [Justify Items](./layout/justify-items) - `justify-items:start`, `justify-items:center`
+- [Justify Self](./layout/justify-self) - `justify-self:start`, `justify-self:center`
+- [Align Content](./layout/align-content) - `content:start`, `content:center`
+- [Align Items](./layout/align-items) - `items:start`, `items:center`, `items:end`
+- [Align Self](./layout/align-self) - `self:start`, `self:center`, `self:end`
+- [Place Content](./layout/place-content) - `place-content:center`
+- [Place Items](./layout/place-items) - `place-items:center`
+- [Place Self](./layout/place-self) - `place-self:center`
+- [Ringkas](./layout/shorthand-alignment) - `center`, `start`, `end`, `between`
+
+## Grid
+
+- [Grid Columns](./layout/grid-columns) - `grid-cols:1-12`
+- [Grid Rows](./layout/grid-rows) - `grid-rows:1-6`
+- [Column Span](./layout/grid-column-span) - `col-span:1-12`, `col-span:full`
+- [Row Span](./layout/grid-row-span) - `row-span:1-6`, `row-span:full`
+- [Auto Flow](./layout/grid-auto-flow) - `grid-flow:row`, `grid-flow:col`, `grid-flow:dense`
+- [Auto Sizing](./layout/grid-auto-sizing) - `auto-cols:fr`, `auto-rows:min`
 
 ## Kedudukan
 
-| Nilai | Output CSS |
-|-------|------------|
-| `relative` | `position: relative` |
-| `absolute` | `position: absolute` |
-| `fixed` | `position: fixed` |
-| `sticky` | `position: sticky` |
-
-```html
-<nav layout="fixed">Nav fixed</nav>
-<div layout="sticky">Elemen sticky</div>
-```
-
-## Z-Index
-
-| Nilai | Output CSS |
-|-------|------------|
-| `z:base` | `z-index: 0` |
-| `z:low` | `z-index: 10` |
-| `z:mid` | `z-index: 50` |
-| `z:high` | `z-index: 100` |
-| `z:top` | `z-index: 9999` |
+- [Kedudukan](./layout/position) - `static`, `relative`, `absolute`, `fixed`, `sticky`
+- [Inset](./layout/inset) - `inset:0`, `top:0`, `right:0`, `bottom:0`, `left:0`
+- [Z-Index](./layout/z-index) - `z:base`, `z:low`, `z:mid`, `z:high`, `z:top`
 
-```html
-<nav layout="fixed z:top">Sentiasa di atas</nav>
-<div layout="absolute z:high">Z-index tinggi</div>
-```
-
-## Overflow
+## Utiliti
 
-| Nilai | Output CSS |
-|-------|------------|
-| `overflow:hidden` | `overflow: hidden` |
-| `overflow:auto` | `overflow: auto` |
-| `overflow:scroll` | `overflow: scroll` |
+- [Keterlihatan](./layout/visibility) - `visible`, `invisible`
+- [Overflow](./layout/overflow) - `overflow:hidden`, `overflow:auto`, `overflow:scroll`
+- [Overscroll](./layout/overscroll) - `overscroll:contain`, `overscroll:none`
+- [Nisbah Aspek](./layout/aspect-ratio) - `aspect:square`, `aspect:video`
+- [Columns](./layout/columns) - `cols:1-4`
+- [Object Fit](./layout/object-fit) - `object:cover`, `object:contain`
+- [Object Position](./layout/object-position) - `object-pos:top`, `object-pos:center`
+- [Float & Clear](./layout/float-clear) - `float:left`, `float:right`, `clear:both`
+- [Isolation](./layout/isolation) - `isolate`
+- [Box Sizing](./layout/box-sizing) - `box-border`, `box-content`
 
-```html
-<div layout="overflow:hidden">Kandungan terpotong</div>
-```
+## Jadual
 
-## Menggabungkan Nilai
+- [Runtuhan Sempadan](./layout/border-collapse) - `border-collapse`, `border-separate`
+- [Jarak Sempadan](./layout/border-spacing) - `border-spacing:0`, `border-spacing:[value]`
+- [Susun Atur Jadual](./layout/table-layout) - `table-auto`, `table-fixed`
+- [Kedudukan Kapsyen](./layout/caption-side) - `caption-top`, `caption-bottom`
 
-Gabungkan pelbagai nilai layout dengan ruang:
+## Contoh Pantas
 
 ```html
-<div layout="flex col center wrap">
-  Flexbox menegak, di tengah, melipat
+<div layout="flex col tab:row center wrap" space="g:medium">
+  Susun atur flexbox responsif
 </div>
-
-<nav layout="flex between fixed z:top">
-  Nav fixed dengan space-between
-</nav>
 ```