@bookklik/senangstart-css 0.1.4 → 0.1.7

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

@@ -0,0 +1,35 @@
+# Align Content
+
+Align content rows in multi-line flex container
+
+## Syntax
+```
+layout="content:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `align-content: flex-start` | Align to start |
+| `end` | `align-content: flex-end` | Align to end |
+| `center` | `align-content: center` | Center content |
+| `between` | `align-content: space-between` | Space between rows |
+| `around` | `align-content: space-around` | Space around rows |
+| `evenly` | `align-content: space-evenly` | Even spacing |
+| `stretch` | `align-content: stretch` | Stretch rows |
+
+## Examples
+
+```html
+<div layout="flex wrap content:center">Centered rows</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Align Items
+
+Align items along the cross axis
+
+## Syntax
+```
+layout="items:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `start` | `align-items: flex-start` | Align to start |
+| `end` | `align-items: flex-end` | Align to end |
+| `center` | `align-items: center` | Center items |
+| `baseline` | `align-items: baseline` | Align to baseline |
+| `stretch` | `align-items: stretch` | Stretch items |
+
+## Examples
+
+```html
+<div layout="flex items:center">Centered</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,34 @@
+# Align Self
+
+Override alignment for a single item
+
+## Syntax
+```
+layout="self:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `align-self: auto` | Use parent alignment |
+| `start` | `align-self: flex-start` | Align to start |
+| `end` | `align-self: flex-end` | Align to end |
+| `center` | `align-self: center` | Center item |
+| `baseline` | `align-self: baseline` | Align to baseline |
+| `stretch` | `align-self: stretch` | Stretch item |
+
+## Examples
+
+```html
+<div layout="self:center">Centered item</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/aspect-ratio.md

@@ -0,0 +1,40 @@
+# Aspect Ratio
+
+Set element aspect ratio
+
+## Syntax
+```
+layout="aspect:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `aspect-ratio: auto` | Natural aspect ratio |
+| `square` | `aspect-ratio: 1 / 1` | 1:1 square |
+| `video` | `aspect-ratio: 16 / 9` | 16:9 video |
+
+## Examples
+
+```html
+<div layout="aspect:square">Square</div>
+<div layout="aspect:[4/3]">4:3</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="aspect:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/border-collapse.md

@@ -0,0 +1,30 @@
+# Border Collapse
+
+Control table border collapse
+
+## Syntax
+```
+layout="border:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `collapse` | `border-collapse: collapse` | Collapse borders |
+| `separate` | `border-collapse: separate` | Separate borders |
+
+## Examples
+
+```html
+<table layout="border:collapse">Collapsed table</table>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/border-spacing.md

@@ -0,0 +1,39 @@
+# Border Spacing
+
+Control spacing between table borders
+
+## Syntax
+```
+layout="border-spacing:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `border-spacing` | `border-spacing: {value}` | All spacing |
+| `border-spacing-x` | `border-spacing: {value} 0` | Horizontal spacing |
+| `border-spacing-y` | `border-spacing: 0 {value}` | Vertical spacing |
+
+## Examples
+
+```html
+<table layout="border-separate border-spacing:small">Spaced</table>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="border:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/box-sizing.md

@@ -0,0 +1,30 @@
+# Box Sizing
+
+Control how width and height are calculated
+
+## Syntax
+```
+layout="box:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `border` | `box-sizing: border-box` | Include padding and border in size |
+| `content` | `box-sizing: content-box` | Exclude padding and border |
+
+## Examples
+
+```html
+<div layout="box:border">Border box</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/caption-side.md

@@ -0,0 +1,30 @@
+# Caption Side
+
+Control table caption position
+
+## Syntax
+```
+layout="caption:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `top` | `caption-side: top` | Caption on top |
+| `bottom` | `caption-side: bottom` | Caption on bottom |
+
+## Examples
+
+```html
+<caption layout="caption:bottom">Bottom caption</caption>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/columns.md

@@ -0,0 +1,30 @@
+# Columns
+
+Create multi-column layouts
+
+## Syntax
+```
+layout="cols:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1-12` | `columns: {n}` | N columns |
+| `auto` | `columns: auto` | Auto columns |
+
+## Examples
+
+```html
+<div layout="cols:3">Three columns</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/container.md

@@ -0,0 +1,29 @@
+# Container
+
+Create a centered container with max-width
+
+## Syntax
+```
+layout="container"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `container` | `width: 100%; margin-left: auto; margin-right: auto` | Centered container |
+
+## Examples
+
+```html
+<div layout="container">Centered content</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/display.md

@@ -0,0 +1,60 @@
+# Display
+
+Control the display type of elements
+
+## Syntax
+```
+layout="[display-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `flex` | `display: flex` | Flexbox container |
+| `inline-flex` | `display: inline-flex` | Inline flexbox container |
+| `grid` | `display: grid` | Grid container |
+| `inline-grid` | `display: inline-grid` | Inline grid container |
+| `block` | `display: block` | Block element |
+| `inline` | `display: inline-block` | Inline block element |
+| `hidden` | `display: none` | Hidden element |
+
+## Examples
+
+```html
+<div layout="flex">Flexbox container</div>
+<div layout="grid">Grid container</div>
+<div layout="hidden">Hidden element</div>
+```
+
+## Preview
+
+<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> - Items arranged horizontally</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> - Items in a grid layout</p>
+</div>
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,38 @@
+# Flex Basis
+
+Set initial size of flex item
+
+## Syntax
+```
+layout="basis:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `flex-basis: auto` | Auto basis |
+| `0` | `flex-basis: 0` | Zero basis |
+
+## Examples
+
+```html
+<div layout="basis:[200px]">200px basis</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="flex:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Flex Direction
+
+Set the direction of flex items
+
+## Syntax
+```
+layout="[direction]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `row` | `flex-direction: row` | Horizontal (default) |
+| `col` | `flex-direction: column` | Vertical |
+| `row-reverse` | `flex-direction: row-reverse` | Horizontal reversed |
+| `col-reverse` | `flex-direction: column-reverse` | Vertical reversed |
+
+## Examples
+
+```html
+<div layout="flex row">Row direction</div>
+<div layout="flex col">Column direction</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Flex Items
+
+Control flex grow and shrink behavior
+
+## Syntax
+```
+layout="[flex-item-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `grow` | `flex-grow: 1` | Allow item to grow |
+| `grow-0` | `flex-grow: 0` | Prevent growing |
+| `shrink` | `flex-shrink: 1` | Allow item to shrink |
+| `shrink-0` | `flex-shrink: 0` | Prevent shrinking |
+
+## Examples
+
+```html
+<div layout="grow">Growing item</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,31 @@
+# Flex Wrap
+
+Control how flex items wrap
+
+## Syntax
+```
+layout="[wrap-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `wrap` | `flex-wrap: wrap` | Allow wrapping |
+| `nowrap` | `flex-wrap: nowrap` | Prevent wrapping |
+| `wrap-reverse` | `flex-wrap: wrap-reverse` | Wrap in reverse |
+
+## Examples
+
+```html
+<div layout="flex wrap">Wrapping flex</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout/flex.md

@@ -0,0 +1,40 @@
+# Flex
+
+Flex shorthand property
+
+## Syntax
+```
+layout="flex:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `1` | `flex: 1 1 0%` | Flex 1 |
+| `auto` | `flex: 1 1 auto` | Flex auto |
+| `initial` | `flex: 0 1 auto` | Initial flex |
+| `none` | `flex: none` | No flex |
+
+## Examples
+
+```html
+<div layout="flex:1">Flexible item</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div layout="flex:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Float Clear
+
+Control element floating and clearing
+
+## Syntax
+```
+layout="float:[value]" or layout="clear:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `left` | `float: left` | Float left |
+| `right` | `float: right` | Float right |
+| `none` | `float: none` | No float |
+
+## Examples
+
+```html
+<img layout="float:left">Float left</img>
+<div layout="clear:both">Clear floats</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Grid Auto Flow
+
+Control how auto-placed items flow in grid
+
+## Syntax
+```
+layout="grid-flow:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `row` | `grid-auto-flow: row` | Place by row |
+| `col` | `grid-auto-flow: column` | Place by column |
+| `dense` | `grid-auto-flow: dense` | Dense packing |
+| `row-dense` | `grid-auto-flow: row dense` | Row with dense |
+| `col-dense` | `grid-auto-flow: column dense` | Column with dense |
+
+## Examples
+
+```html
+<div layout="grid grid-flow:col">Column flow</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,32 @@
+# Grid Auto Sizing
+
+Control size of auto-generated grid tracks
+
+## Syntax
+```
+layout="auto-cols:[value]" or layout="auto-rows:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `auto` | Auto size |
+| `min` | `min-content` | Minimum content |
+| `max` | `max-content` | Maximum content |
+| `fr` | `minmax(0, 1fr)` | Fractional unit |
+
+## Examples
+
+```html
+<div layout="grid auto-cols:min">Auto min columns</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```