@bookklik/senangstart-css 0.1.4 → 0.1.8

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

@@ -0,0 +1,31 @@
+# Grid Column Span
+
+Span across grid columns
+
+## Syntax
+```
+layout="col-span:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1-12` | `grid-column: span {n} / span {n}` | Span N columns |
+| `full` | `grid-column: 1 / -1` | Span all columns |
+
+## Examples
+
+```html
+<div layout="col-span:2">Spans 2 columns</div>
+<div layout="col-span:full">Full width</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Grid Columns
+
+Define grid template columns
+
+## Syntax
+```
+layout="grid-cols:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1-12` | `grid-template-columns: repeat({n}, minmax(0, 1fr))` | N equal columns |
+| `none` | `grid-template-columns: none` | No columns defined |
+| `subgrid` | `grid-template-columns: subgrid` | Use parent grid |
+
+## Examples
+
+```html
+<div layout="grid grid-cols:3">3 columns</div>
+<div layout="grid grid-cols:12">12 columns</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,30 @@
+# Grid Row Span
+
+Span across grid rows
+
+## Syntax
+```
+layout="row-span:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1-12` | `grid-row: span {n} / span {n}` | Span N rows |
+| `full` | `grid-row: 1 / -1` | Span all rows |
+
+## Examples
+
+```html
+<div layout="row-span:2">Spans 2 rows</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,31 @@
+# Grid Rows
+
+Define grid template rows
+
+## Syntax
+```
+layout="grid-rows:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1-12` | `grid-template-rows: repeat({n}, minmax(0, 1fr))` | N equal rows |
+| `none` | `grid-template-rows: none` | No rows defined |
+| `subgrid` | `grid-template-rows: subgrid` | Use parent grid |
+
+## Examples
+
+```html
+<div layout="grid grid-rows:3">3 rows</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/inset.md

@@ -0,0 +1,44 @@
+# Inset
+
+Control positioning offsets
+
+## Syntax
+```
+layout="inset:[value]" or layout="top:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `inset` | `inset: {value}` | All sides |
+| `inset-x` | `left: {value}; right: {value}` | Left and right |
+| `inset-y` | `top: {value}; bottom: {value}` | Top and bottom |
+| `top` | `top: {value}` | Top offset |
+| `right` | `right: {value}` | Right offset |
+| `bottom` | `bottom: {value}` | Bottom offset |
+| `left` | `left: {value}` | Left offset |
+
+## Examples
+
+```html
+<div layout="absolute inset:0">Full coverage</div>
+<div layout="absolute top:medium left:medium">Offset</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="inset:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/isolation.md

@@ -0,0 +1,30 @@
+# Isolation
+
+Create new stacking context
+
+## Syntax
+```
+layout="isolation:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `isolate` | `isolation: isolate` | Create stacking context |
+| `auto` | `isolation: auto` | Auto isolation |
+
+## Examples
+
+```html
+<div layout="isolation:isolate">Isolated</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,36 @@
+# Justify Content
+
+Align items along the main axis
+
+## Syntax
+```
+layout="justify:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `justify-content: flex-start` | Align to start |
+| `end` | `justify-content: flex-end` | Align to end |
+| `center` | `justify-content: center` | Center items |
+| `between` | `justify-content: space-between` | Space between items |
+| `around` | `justify-content: space-around` | Space around items |
+| `evenly` | `justify-content: space-evenly` | Even spacing |
+| `stretch` | `justify-content: stretch` | Stretch items |
+
+## Examples
+
+```html
+<div layout="flex justify:center">Centered</div>
+<div layout="flex justify:between">Spaced</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Justify Items
+
+Align grid items on inline axis
+
+## Syntax
+```
+layout="justify-items:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `justify-items: start` | Start alignment |
+| `end` | `justify-items: end` | End alignment |
+| `center` | `justify-items: center` | Center alignment |
+| `stretch` | `justify-items: stretch` | Stretch items |
+
+## Examples
+
+```html
+<div layout="grid justify-items:center">Centered items</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Justify Self
+
+Align single grid item on inline axis
+
+## Syntax
+```
+layout="justify-self:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `justify-self: auto` | Auto alignment |
+| `start` | `justify-self: start` | Start alignment |
+| `end` | `justify-self: end` | End alignment |
+| `center` | `justify-self: center` | Center alignment |
+| `stretch` | `justify-self: stretch` | Stretch item |
+
+## Examples
+
+```html
+<div layout="justify-self:end">End aligned</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Object Fit
+
+Control how media content fits its container
+
+## Syntax
+```
+layout="object:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `contain` | `object-fit: contain` | Scale to fit, preserve ratio |
+| `cover` | `object-fit: cover` | Cover container, may crop |
+| `fill` | `object-fit: fill` | Stretch to fill |
+| `none` | `object-fit: none` | No scaling |
+| `scale-down` | `object-fit: scale-down` | Smaller of none or contain |
+
+## Examples
+
+```html
+<img layout="object:cover">Cover image</img>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,45 @@
+# Object Position
+
+Position replaced element content within container
+
+## Syntax
+```
+layout="object-pos:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `center` | `object-position: center` | Center position |
+| `top` | `object-position: top` | Top position |
+| `bottom` | `object-position: bottom` | Bottom position |
+| `left` | `object-position: left` | Left position |
+| `right` | `object-position: right` | Right position |
+| `top-left` | `object-position: top left` | Top left |
+| `top-right` | `object-position: top right` | Top right |
+| `bottom-left` | `object-position: bottom left` | Bottom left |
+| `bottom-right` | `object-position: bottom right` | Bottom right |
+
+## Examples
+
+```html
+<img layout="object:cover object-pos:top">Top positioned</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="object:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/order.md

@@ -0,0 +1,32 @@
+# Order
+
+Control flex/grid item order
+
+## Syntax
+```
+layout="order:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `first` | `order: -9999` | Move to first |
+| `last` | `order: 9999` | Move to last |
+| `none` | `order: 0` | Default order |
+| `1-12` | `order: {n}` | Specific order |
+
+## Examples
+
+```html
+<div layout="order:first">First item</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/overflow.md

@@ -0,0 +1,34 @@
+# Overflow
+
+Control content overflow behavior
+
+## Syntax
+```
+layout="overflow:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `overflow: auto` | Scrollbar when needed |
+| `hidden` | `overflow: hidden` | Hide overflow |
+| `visible` | `overflow: visible` | Show overflow |
+| `scroll` | `overflow: scroll` | Always show scrollbar |
+| `clip` | `overflow: clip` | Clip overflow |
+
+## Examples
+
+```html
+<div layout="overflow:hidden">Clipped content</div>
+<div layout="overflow:auto">Scrollable</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/overscroll.md

@@ -0,0 +1,31 @@
+# Overscroll
+
+Control scroll chaining behavior
+
+## Syntax
+```
+layout="overscroll:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `overscroll-behavior: auto` | Default behavior |
+| `contain` | `overscroll-behavior: contain` | Contain scroll |
+| `none` | `overscroll-behavior: none` | No scroll chaining |
+
+## Examples
+
+```html
+<div layout="overscroll:contain">Contained scroll</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,35 @@
+# Place Content
+
+Shorthand for align-content and justify-content
+
+## Syntax
+```
+layout="place-content:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `place-content: start` | Start alignment |
+| `end` | `place-content: end` | End alignment |
+| `center` | `place-content: center` | Center alignment |
+| `between` | `place-content: space-between` | Space between |
+| `around` | `place-content: space-around` | Space around |
+| `evenly` | `place-content: space-evenly` | Even spacing |
+| `stretch` | `place-content: stretch` | Stretch content |
+
+## Examples
+
+```html
+<div layout="grid place-content:center">Centered content</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Place Items
+
+Shorthand for align-items and justify-items
+
+## Syntax
+```
+layout="place-items:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `place-items: start` | Start alignment |
+| `end` | `place-items: end` | End alignment |
+| `center` | `place-items: center` | Center alignment |
+| `stretch` | `place-items: stretch` | Stretch items |
+
+## Examples
+
+```html
+<div layout="grid place-items:center">Centered items</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Place Self
+
+Shorthand for align-self and justify-self
+
+## Syntax
+```
+layout="place-self:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `place-self: auto` | Auto alignment |
+| `start` | `place-self: start` | Start alignment |
+| `end` | `place-self: end` | End alignment |
+| `center` | `place-self: center` | Center alignment |
+| `stretch` | `place-self: stretch` | Stretch item |
+
+## Examples
+
+```html
+<div layout="place-self:center">Centered item</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/position.md

@@ -0,0 +1,34 @@
+# Position
+
+Set the positioning method
+
+## Syntax
+```
+layout="[position-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `static` | `position: static` | Default positioning |
+| `relative` | `position: relative` | Relative to normal position |
+| `absolute` | `position: absolute` | Absolute within container |
+| `fixed` | `position: fixed` | Fixed to viewport |
+| `sticky` | `position: sticky` | Sticky positioning |
+
+## Examples
+
+```html
+<div layout="absolute">Absolute positioned</div>
+<div layout="fixed">Fixed to viewport</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,34 @@
+# Shorthand Alignment
+
+Quick alignment shortcuts
+
+## Syntax
+```
+layout="[alignment]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `center` | `justify-content: center; align-items: center` | Center both axes |
+| `start` | `justify-content: flex-start; align-items: flex-start` | Align to start |
+| `end` | `justify-content: flex-end; align-items: flex-end` | Align to end |
+| `between` | `justify-content: space-between` | Space between |
+| `around` | `justify-content: space-around` | Space around |
+| `evenly` | `justify-content: space-evenly` | Even spacing |
+
+## Examples
+
+```html
+<div layout="flex center">Centered content</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,30 @@
+# Table Layout
+
+Control table layout algorithm
+
+## Syntax
+```
+layout="table:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `table-layout: auto` | Auto layout |
+| `fixed` | `table-layout: fixed` | Fixed layout |
+
+## Examples
+
+```html
+<table layout="table:fixed">Fixed width columns</table>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```