How do stylize elements in the Zero One platform?
In Zero One, you can set several common styles for your items. Every new application has a set of preset styles. This allows you to better organize your app design because you only need to change the style so that all elements will change to match it. It also saves space in your application, which leads to faster loading, since the style information is inherited by all elements that use a similar style.
You can apply conditions to styles, but only basic conditions, in other words, built-in conditions and simple element interactions (hover, selected, etc.) For example, conditions using data or user properties are not considered basic. You can define as many properties as you like. Styles apply to one type of element, for example Buttons, but you can set more than one style for Buttons. Try to name them in a way that’s easy to read, because you’ll have to choose the right style for each button. Also here you can set the default style when you insert new elements.
The different styles of the elements in your application are changed in the “Styles” tab. Editing styles is very similar to editing elements, the parameters of the styles are changed in the Property Editor.
With a click of the “plus” button you can see many items. With a selection of one element you can set styles.
Now let’s try to set the style for the button. First choose a button from the list.
To set the styles we turn to the left block which has all the settings for styling
in the setup there is a list of styles some of them:
- Variants
- Visibility
- Size
- Padding
- Margin
- Typography
- Position
- Background
- Border
- Border Radius
- Shadows
- Effects
- Transitions
- Transforms
The Variants block contains a list of pseudo classes. With the help of pseudo classes you can implement flashing buttons, etc.
To create such a button we need the following settings:
- Border Radius – 10px
- Border – 1px solid red
- Background – yellow
- Padding – 8px 30px
- Typography – 16px bold white
