Row

SunSed Row is a powerful and smart layout tool designed for simply aligning columns when your desired behavior is to keep the content always in a row (for example, Row is used by SunSed in topbar and bottombar).

Structure

It is made up of one or more columns and flexible spaces. The Row:column can hold any content, and the job of the flexible space is to easily align the content around the horizontal axis of the Row.

Behavior

When Row runs out of width space, it will always overflow the content and, creating a scrollable horizontal row (if your desired behavior is for columns to be stacked, please use grid).

Functions

row:column()

The Row:column can hold any content. You may set any row:column to disappear at viewport breakpoints (example; display_on_mobile: FALSE)

row:flexible_Space()

Flexible-space uses the remaining available space as the dividing gap between the columns it has come in between. This gap created by the flexible-space increases and decreases in size, depending on the Row's width and the width of the contents in Row:columns. Even though Flexible-space is persistent in trying to keep the gap when the Row is filled with content, and it completely runs out of room, it will go down all the way to 0px.

row:render()

Row render will process and return the HTML of all the columns and flexible spaces called before it while at the same time erasing its memory so you can create a new row after calling Row:render().

How to use

To use SunSed Row, at minimum, you have to call a row:column() and then call and print the Row:render() wherever you want to output the Row.

row:column("Hello World!")
:: row:render(). // or PRINT row:render()

By introducing a flexible-space in our code, we can align our column either to the left of the Row or to the right.

// align to the left
row:column("Hello World!")
row:flexible_space()
:: row:render()

// align to the right
row:flexible_space()
row:column("Hello World!")
:: row:render()

By having one flexible-space and two columns, we get to align one column to the left and the other to the right of the Row.

row:column("Hello World!")
row:flexible_space()
row:column("Good bye!")
:: row:render()

You may add as many columns on either side of the flexible-space. The flexible-space will try its best at maintaining a gap between the two columns sounding it.

row:column("Hello World!")
row:column("Hello World!")
row:column("Hello World!")
row:column("Hello World!")
row:flexible_space()
row:column("Good bye!")
row:column("Good bye!")
row:column("Good bye!")
row:column("Good bye!")
:: row:render()

Now by introducing a second flexible-space, we can align one or more columns at the center of the Row while maintaining the remaining columns either to the right or the left of the Row.

row:column("Hello World!") row:flexible_space() row:column("Right at the center of the row") row:flexible_space() row:column("Good bye!") :: row:render()

You may use any number of flexible-spaces and columns in any order. However, once your columns take up all of the Row's width, the flexible-spaces disappear, and the Row overflows to the right allowing your end-user to scroll to view the remaining content.

row:column(button:share())
row:flexible_space()
row:column(button:share())
row:flexible_space()
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
:: row:render()

To set the gap between columns, you can use the $gap argument when calling Row:render.

row:column(button:share())
row:flexible_space()
row:column(button:share())
row:flexible_space()
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
row:column(button:share())
:: row:render(gap: "1em")
Copyright © SunSed LLC 2013-2021 All rights reserved.