Styles

In resquare, you can use the CSS flexbox approach to define the style. Resquare will use Stretch as the layout engine to calculate the position and the size of div.

If you are not familiar with flexbox, we recommend you to try Flexbox Froggy, which is an interactive game to learn flexbox.

Without Flexbox?

Q: Can I use Resquare without flexbox layout?

A: Well, yes, but you will not benefit from most of the Resquare features. Because one of the pros of using Resquare is that you don't need to calculate any position or size by yourself when rendering a list like UI.

If you still wish to define the position and size manually, you can set the target div position as absolute.

Define style#

You can use the style DSL builder: styleOf to create a style object.

div(DivProps(
    style = styleOf {
        width = 1.px
        height = 20.percent
    }
))

Dimension units#

The unit supported in resquare is px and percent.

px - slots in inventory, 1.px = slot
percent - percentage of the parent size, 100.percent = fill parent

Style inheritance and overriding#

Style object can be overridden to create a new style object. styleOf DSL allows inheritance attributes from another Style object.

Inheritance#

val itemStyle = styleOf {
    width = 1.px
    padding(1.px)
}

val widePaddingItemStyle = styleOf(itemStyle) {
    paddingLeft = 2.px
    paddingRight = 2.px
}

/**
 * widePaddingItemStyle result:
 * width = 1.px
 * paddingTop = 1.px
 * paddingRight = 2.px
 * paddingBottom = 1.px
 * paddingLeft = 2.px
 */

Overriding#

val customButtonStyle = styleOf {
    width = 2.px
    marginTop = 1.px
}

val buttonStyle = styleOf {
    width = 1.px
    height = 1.px
}

val newStyle = buttonStyle.overrideWith(customButtonStyle)

/**
 * newStyle Result:
 * width = 2.px
 * height = 1.px
 * marginTop = 1.px
 */