Properties Overview
Properties define how intents generate real CSS rules.
In simple words, properties map intent to CSS properties and values.
Utilities are resolved through property definitions, which determine:
- which intent it belongs
- which CSS property is generated
- how the value is resolved
- which dataset or resolver method should be used
To understand about properties and it's processing, See Properties Config.
Available Intents
This section lists all built-in intents shipped with Shilp CSS.
Intent are derived from properties. Shilp CSS simply organizes properties under intents.
| Intent | Description | Documentation |
|---|---|---|
@adjust | Control rotation, scaling, skewing, positioning and more. | @adjust |
@animate | Control animation properties, delays, durations, and more. | @animate |
@bg | Control background color, gradients, background images, and more. | @bg |
@border | Control border color, thickness (width), radius, and style properties. | @border |
@filter | Blur, brightness, grayscale, backdrop filters and more. | @filter |
@flex | Alignment, direction, growth, and other flex layout utilities. | @flex |
@form | form control elementst appearance, accent colors, and more. | @form |
@grid | Grid layout, columns, rows, span, order and more. | @grid |
@layout | Display, shadows, overflow, and more. | @layout |
@list | List markers alignment and styles. | @list |
@live | Cursor, user-select, outlien and other user interactions. | @live |
@mask | Masking element with clipping, gradients, image and more. | @mask |
@phase | Control transitions, timing, speed, and more. | @phase |
@position | Controls positioned element's method (or type) and offset (or distance). | @position |
@size | Controls width and height (dimensions). | @size |
@space | Controls margin, padding and gap. | @space |
@svg | Control SVG's stroke and fill properties. | @svg |
@table | Table's caption position, cells border effect and spacing. | @table |
@text | Font size, weight, color, alignment, and more. | @text |