[🇫🇷 Cette page est également disponible en français]
Styles
Styles allow you to apply display rules for the Blocks of a Component.
There are several categories of Styles:
- Dimensions: size of a Block
- Position: positioning of a Block
- Margins: spacing between a Block and its neighbors
- Gutters: spacing inside a Block
- Background: background style of a Block
- Borders: border style of a Block
- Shadows: shadow of a Block
- Text: related to the Text Block
- Zone: related to the Zone Block
- Input: related to the Input Block
A Style is decomposed into several Classes that all have a unique name. Each Class can be applied to any Block.
It is possible to create conditional Classes in order to apply Styles depending on conditions based on: - the platform (web, Android, iOS, linux, windows, macOS) - the dimensions (height and width) - the state (hover, focus, print)
Finally, it is possible to create animations in order to use styles frames on a Block with a defined duration and frequency.