@bookklik/senangstart-css 0.1.4 → 0.1.8

package/docs/reference/layout/visibility.md

@@ -0,0 +1,30 @@
+# Visibility
+
+Control element visibility
+
+## Syntax
+```
+layout="[visibility-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `visible` | `visibility: visible` | Element is visible |
+| `invisible` | `visibility: hidden` | Element is invisible but takes space |
+
+## Examples
+
+```html
+<div layout="invisible">Invisible but present</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,33 @@
+# Z Index
+
+Control stacking order
+
+## Syntax
+```
+layout="z:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `base` | `z-index: var(--z-base)` | Base layer (0) |
+| `low` | `z-index: var(--z-low)` | Low layer (10) |
+| `mid` | `z-index: var(--z-mid)` | Middle layer (50) |
+| `high` | `z-index: var(--z-high)` | High layer (100) |
+| `top` | `z-index: var(--z-top)` | Top layer (9999) |
+
+## Examples
+
+```html
+<div layout="z:top">On top</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div layout="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/layout.md

@@ -1,115 +1,73 @@
-# layout Reference
+# Layout Reference
 
 The `layout` attribute controls structure, positioning, and flow.
 
-## Display
+## Display & Container
 
-| Value | CSS Output |
-|-------|------------|
-| `flex` | `display: flex` |
-| `grid` | `display: grid` |
-| `block` | `display: block` |
-| `inline` | `display: inline-block` |
-| `hidden` | `display: none` |
+- [Display](./layout/display) - `flex`, `grid`, `block`, `hidden`
+- [Container](./layout/container) - `container`
 
-```html
-<div layout="flex">Flexbox container</div>
-<div layout="grid">Grid container</div>
-<div layout="hidden">Hidden element</div>
-```
-
-## Flex Direction
-
-| Value | CSS Output |
-|-------|------------|
-| `row` | `flex-direction: row` |
-| `col` | `flex-direction: column` |
-| `row-reverse` | `flex-direction: row-reverse` |
-| `col-reverse` | `flex-direction: column-reverse` |
+## Flex
 
-```html
-<div layout="flex row">Horizontal</div>
-<div layout="flex col">Vertical</div>
-```
+- [Flex Shorthand](./layout/flex) - `flex:1`, `flex:auto`, `flex:none`
+- [Flex Basis](./layout/flex-basis) - `basis:0`, `basis:full`, `basis:[value]`
+- [Flex Direction](./layout/flex-direction) - `row`, `col`, `row-reverse`, `col-reverse`
+- [Flex Wrap](./layout/flex-wrap) - `wrap`, `nowrap`, `wrap-reverse`
+- [Flex Items](./layout/flex-items) - `grow`, `shrink`, `grow:0`, `shrink:0`
+- [Order](./layout/order) - `order:first`, `order:last`, `order:1-12`
 
 ## Alignment
 
-| Value | CSS Output |
-|-------|------------|
-| `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">Centered</div>
-<div layout="flex between">Space between</div>
-```
-
-## Flex Wrap
-
-| Value | CSS Output |
-|-------|------------|
-| `wrap` | `flex-wrap: wrap` |
-| `nowrap` | `flex-wrap: nowrap` |
-
-```html
-<div layout="flex wrap">Wrapping flex</div>
-```
-
-## Position
-
-| Value | CSS Output |
-|-------|------------|
-| `relative` | `position: relative` |
-| `absolute` | `position: absolute` |
-| `fixed` | `position: fixed` |
-| `sticky` | `position: sticky` |
+- [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`
+- [Shorthand](./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`
+
+## Positioning
+
+- [Position](./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`
+
+## Utilities
+
+- [Visibility](./layout/visibility) - `visible`, `invisible`
+- [Overflow](./layout/overflow) - `overflow:hidden`, `overflow:auto`, `overflow:scroll`
+- [Overscroll](./layout/overscroll) - `overscroll:contain`, `overscroll:none`
+- [Aspect Ratio](./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`
+
+## Tables
+
+- [Border Collapse](./layout/border-collapse) - `border-collapse`, `border-separate`
+- [Border Spacing](./layout/border-spacing) - `border-spacing:0`, `border-spacing:[value]`
+- [Table Layout](./layout/table-layout) - `table-auto`, `table-fixed`
+- [Caption Side](./layout/caption-side) - `caption-top`, `caption-bottom`
+
+## Quick Example
 
 ```html
-<nav layout="fixed">Fixed nav</nav>
-<div layout="sticky">Sticky element</div>
-```
-
-## Z-Index
-
-| Value | CSS Output |
-|-------|------------|
-| `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` |
-
-```html
-<nav layout="fixed z:top">Always on top</nav>
-<div layout="absolute z:high">High z-index</div>
-```
-
-## Overflow
-
-| Value | CSS Output |
-|-------|------------|
-| `overflow:hidden` | `overflow: hidden` |
-| `overflow:auto` | `overflow: auto` |
-| `overflow:scroll` | `overflow: scroll` |
-
-```html
-<div layout="overflow:hidden">Clipped content</div>
-```
-
-## Combining Values
-
-Combine multiple layout values with spaces:
-
-```html
-<div layout="flex col center wrap">
-  Vertical, centered, wrapping flexbox
+<div layout="flex col tab:row center wrap" space="g:medium">
+  Responsive flexbox layout
 </div>
-
-<nav layout="flex between fixed z:top">
-  Fixed nav with space-between
-</nav>
 ```

package/docs/reference/space/arbitrary-values.md

@@ -0,0 +1,39 @@
+# Arbitrary Values
+
+Use brackets `[value]` for specific values beyond the scale.
+
+## Syntax
+
+```
+property:[value]
+```
+
+The value inside brackets is passed directly to CSS.
+
+## Examples
+
+```html
+<!-- Exact pixel values -->
+<div space="w:[350px]">350 pixels wide</div>
+
+<!-- Viewport units -->
+<div space="h:[50vh]">50% viewport height</div>
+
+<!-- Multiple values -->
+<div space="p:[20px_40px]">20px vertical, 40px horizontal</div>
+
+<!-- Rem units -->
+<div space="m-t:[5rem]">5rem top margin</div>
+
+<!-- Calc expressions -->
+<div space="w:[calc(100%_-_40px)]">Full width minus 40px</div>
+
+<!-- Percentage -->
+<div space="max-w:[80%]">80% max width</div>
+```
+
+## Notes
+
+- Use underscores `_` instead of spaces inside brackets
+- Any valid CSS value is accepted
+- Useful when scale values don't match your exact needs

package/docs/reference/space/gap.md

@@ -0,0 +1,44 @@
+# Gap
+
+Add gap between flex/grid items
+
+## Syntax
+```
+space="g:[value]" or space="g-{axis}:[value]"
+```
+
+## Values
+
+| Property | CSS Output | Description |
+|--------|------------|-------------|
+| `g` | `gap: var(--s-{value})` | All gaps |
+| `g-x` | `column-gap: var(--s-{value})` | Column gap |
+| `g-y` | `row-gap: var(--s-{value})` | Row gap |
+
+## Scale Values
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Examples
+
+```html
+<div layout="flex" space="g:medium">Gap between items</div>
+<div layout="grid" space="g-x:big g-y:small">Grid gaps</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="gap:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div space="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/space/height.md

@@ -0,0 +1,44 @@
+# Height
+
+Set element height
+
+## Syntax
+```
+space="h:[value]"
+```
+
+## Values
+
+| Property | CSS Output | Description |
+|--------|------------|-------------|
+| `h` | `height: var(--s-{value})` | Height |
+| `min-h` | `min-height: var(--s-{value})` | Minimum height |
+| `max-h` | `max-height: var(--s-{value})` | Maximum height |
+
+## Scale Values
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Examples
+
+```html
+<div space="h:[100vh]">Full viewport height</div>
+<div space="min-h:[400px]">Min height</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="height:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div space="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/space/margin.md

@@ -0,0 +1,49 @@
+# Margin
+
+Add margin to elements
+
+## Syntax
+```
+space="m:[value]" or space="m-{side}:[value]"
+```
+
+## Values
+
+| Property | CSS Output | Description |
+|--------|------------|-------------|
+| `m` | `margin: var(--s-{value})` | All sides |
+| `m-t` | `margin-top: var(--s-{value})` | Top |
+| `m-r` | `margin-right: var(--s-{value})` | Right |
+| `m-b` | `margin-bottom: var(--s-{value})` | Bottom |
+| `m-l` | `margin-left: var(--s-{value})` | Left |
+| `m-x` | `margin-left: var(--s-{value}) margin-right: var(--s-{value})` | Horizontal |
+| `m-y` | `margin-top: var(--s-{value}) margin-bottom: var(--s-{value})` | Vertical |
+
+## Scale Values
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`, `auto`
+
+## Examples
+
+```html
+<div space="m:medium">Margin all sides</div>
+<div space="m-x:auto">Centered horizontally</div>
+<div space="m-t:big">Top margin</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="margin:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div space="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/space/padding.md

@@ -0,0 +1,49 @@
+# Padding
+
+Add padding to elements
+
+## Syntax
+```
+space="p:[value]" or space="p-{side}:[value]"
+```
+
+## Values
+
+| Property | CSS Output | Description |
+|--------|------------|-------------|
+| `p` | `padding: var(--s-{value})` | All sides |
+| `p-t` | `padding-top: var(--s-{value})` | Top |
+| `p-r` | `padding-right: var(--s-{value})` | Right |
+| `p-b` | `padding-bottom: var(--s-{value})` | Bottom |
+| `p-l` | `padding-left: var(--s-{value})` | Left |
+| `p-x` | `padding-left: var(--s-{value}) padding-right: var(--s-{value})` | Horizontal |
+| `p-y` | `padding-top: var(--s-{value}) padding-bottom: var(--s-{value})` | Vertical |
+
+## Scale Values
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Examples
+
+```html
+<div space="p:medium">Padding all sides</div>
+<div space="p-x:big p-y:small">Different padding</div>
+<div space="p:[20px]">Custom padding</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="padding:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div space="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/space/scale-reference.md

@@ -0,0 +1,43 @@
+# Scale Reference
+
+The natural scale used for spacing properties.
+
+## Scale Values
+
+| Keyword | Default Value |
+|---------|---------------|
+| `none` | 0px |
+| `tiny` | 4px |
+| `small` | 8px |
+| `medium` | 16px |
+| `big` | 32px |
+| `giant` | 64px |
+| `vast` | 128px |
+
+## Customization
+
+Override scale values in your configuration:
+
+```js
+// senangstart.config.js
+module.exports = {
+  scale: {
+    tiny: '2px',
+    small: '4px',
+    medium: '8px',
+    big: '16px',
+    giant: '32px',
+    vast: '64px'
+  }
+}
+```
+
+## Usage
+
+All spacing properties use the same scale:
+
+```html
+<div space="p:medium m:small g:big">
+  Consistent spacing using the natural scale
+</div>
+```

package/docs/reference/space/width.md

@@ -0,0 +1,45 @@
+# Width
+
+Set element width
+
+## Syntax
+```
+space="w:[value]"
+```
+
+## Values
+
+| Property | CSS Output | Description |
+|--------|------------|-------------|
+| `w` | `width: var(--s-{value})` | Width |
+| `min-w` | `min-width: var(--s-{value})` | Minimum width |
+| `max-w` | `max-width: var(--s-{value})` | Maximum width |
+
+## Scale Values
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Examples
+
+```html
+<div space="w:[100%]">Full width</div>
+<div space="max-w:[1200px]">Max width container</div>
+<div space="min-w:[300px]">Min width</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div space="width:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div space="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/space.md

@@ -1,4 +1,4 @@
-# space Reference
+# Space Reference
 
 The `space` attribute controls sizing and spacing.
 
@@ -12,110 +12,26 @@ The `space` attribute controls sizing and spacing.
 
 **Scale values:** `none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
 
-## Padding
+## Spacing
 
-| Property | CSS Output |
-|----------|------------|
-| `p` | `padding` (all sides) |
-| `p-t` | `padding-top` |
-| `p-r` | `padding-right` |
-| `p-b` | `padding-bottom` |
-| `p-l` | `padding-left` |
-| `p-x` | `padding-left` + `padding-right` |
-| `p-y` | `padding-top` + `padding-bottom` |
+- [Padding](./space/padding) - Inner spacing (`p`, `p-t`, `p-r`, `p-b`, `p-l`, `p-x`, `p-y`)
+- [Margin](./space/margin) - Outer spacing (`m`, `m-t`, `m-r`, `m-b`, `m-l`, `m-x`, `m-y`)
+- [Gap](./space/gap) - Flex/grid spacing (`g`, `g-x`, `g-y`)
 
-```html
-<div space="p:medium">All sides</div>
-<div space="p-x:big p-y:small">Horizontal/vertical</div>
-<div space="p-t:tiny p-b:giant">Top and bottom</div>
-```
-
-## Margin
-
-| Property | CSS Output |
-|----------|------------|
-| `m` | `margin` (all sides) |
-| `m-t` | `margin-top` |
-| `m-r` | `margin-right` |
-| `m-b` | `margin-bottom` |
-| `m-l` | `margin-left` |
-| `m-x` | `margin-left` + `margin-right` |
-| `m-y` | `margin-top` + `margin-bottom` |
-
-```html
-<div space="m:medium">All sides</div>
-<div space="m-b:big">Bottom margin</div>
-<div space="m-x:auto">Center horizontally</div>
-```
-
-## Gap
-
-| Property | CSS Output |
-|----------|------------|
-| `g` | `gap` (flex/grid) |
-| `g-x` | `column-gap` |
-| `g-y` | `row-gap` |
-
-```html
-<div layout="flex" space="g:small">Small gap</div>
-<div layout="grid" space="g-x:big g-y:small">Different gaps</div>
-```
+## Dimensions
 
-## Sizing
+- [Width](./space/width) - Element width (`w`, `min-w`, `max-w`)
+- [Height](./space/height) - Element height (`h`, `min-h`, `max-h`)
 
-| Property | CSS Output |
-|----------|------------|
-| `w` | `width` |
-| `h` | `height` |
-| `min-w` | `min-width` |
-| `max-w` | `max-width` |
-| `min-h` | `min-height` |
-| `max-h` | `max-height` |
+## Reference
 
-```html
-<div space="w:[100%] h:[400px]">Explicit size</div>
-<div space="max-w:[1200px]">Max width container</div>
-<div space="min-h:[100vh]">Full viewport height</div>
-```
-
-## Arbitrary Values (Escape Hatch)
-
-Use brackets `[value]` for specific values:
-
-```html
-<div space="w:[350px]">350 pixels</div>
-<div space="h:[50vh]">50% viewport height</div>
-<div space="p:[20px_40px]">20px vertical, 40px horizontal</div>
-<div space="m-t:[5rem]">5rem top margin</div>
-```
+- [Arbitrary Values](./space/arbitrary-values) - Escape hatch syntax `[value]`
+- [Scale Reference](./space/scale-reference) - Scale keyword values
 
-## Responsive Examples
+## Quick Example
 
 ```html
-<!-- Progressive padding -->
-<section space="p:small tab:p:medium lap:p:big desk:p:giant">
-  Grows with screen size
-</section>
-
-<!-- Responsive width -->
-<div space="w:[100%] tab:w:[50%] lap:w:[33%]">
-  Full → half → third
-</div>
-
-<!-- Responsive gap -->
-<div layout="flex" space="g:small tab:g:medium lap:g:big">
-  Growing gaps
+<div space="p:medium m-b:big w:[100%] max-w:[800px]">
+  Card with medium padding, big bottom margin, and constrained width
 </div>
 ```
-
-## Scale Reference
-
-| Keyword | Default Value |
-|---------|---------------|
-| `none` | 0px |
-| `tiny` | 4px |
-| `small` | 8px |
-| `medium` | 16px |
-| `big` | 32px |
-| `giant` | 64px |
-| `vast` | 128px |