NOTE: This invite-only release of SunSed Alpha is for testing purposes and in no way represents the final quality of the product — join the waitlist (~wait time: 2 weeks). SunSed release date is on March 11, 2022.

Matrix

SunSed Matrix is another layout tool designed for placing items into columns and rows automatically. It also uses CSS Grid under the hood making it in many ways similar to SunSed Grid, but with crucial differences that make it immensely more helpful in many scenarios.

If your desired UI layout is to change the width or order of the columns at different viewport breakpoints, use SunSed Grid. If your desired behavior is to keep all the columns in one row regardless of the viewport breakpoints, use SunSed Row.

An image gallery is an excellent example of when you want to use SunSed Matrix over SunSed Grid. It uses CSS line-based placement for setting the width, height, order, and location of the items within the Matrix. In an image gallery powered by Matrix, you easily add images to the gallery and then define the number of columns at different breakpoints of the entire Matrix. At the same time, you may set different sizes for some pictures creating variety in the size of the displayed images.

How it works

Add your desired content grouped into columns using matrix:item, and then when you want to generate and output the matrix, call matrix:render. Optionally, you may call the remaining functions in the Matrix library to modify the look and behavior of the Matrix.

matrix:item("Hello There")
matrix:item("Hello There")
matrix:item("Hello There")
matrix:item("Hello There")
matrix:item("Hello There")
matrix:item("Hello There")
matrix:number_of_columns(on_desktop: 4, on_laptop=3, on_tablet: 2, on_mobile: 1)
::matrix:render()

This example places all "Hello There" in a gird system where on desktop there are 4 columns in every row, on laptop there are 3, on tablet 2, and on mobile only showing one "Hello There" in a column.

matrix:item()
matrix:item(STRING $content="", STRING $justify_self="stretch", STRING $align_self="stretch", STRING $grid_column_start_line_number="auto", STRING $grid_column_end_line_number="auto", STRING $grid_row_start_line_number="auto", STRING $grid_row_end_line_number="auto")
$content

Provide the content of the item as a string. matrix:item(html:img("/my_image.png"))

$grid_column_start_line_number

Set the start of the item's column grid line number (Matrix uses the power of CSS Grid Line-based for the placement of items). You may use auto or the number specifying the line number.

$grid_column_end_line_number

Set the end of the item's column grid line number. You may use auto or the number specifying the line number.

$grid_row_start_line_number

Similar to the $grid_column_... line number arguments, you set the start of the item's row grid line number. You may use auto or the number specifying the line number.

$grid_row_start_line_number

Set the end of the item's row grid line number. You may use auto or the number specifying the line number.

$justify_self

Align the item's content horizontally within itself, which overrides any default alignment settings set for the entire Matrix. You may use any acceptable CSS values for justify-self.

$align_self

Align item's content vertically within itself, which overrides any default alignment settings set for the entire Matrix. You may use any acceptable CSS values for align-self.

matrix:number_of_columns()

You can set the number of columns you would like at different breakpoints by calling matrix:number_of_columns. Remember to call this function before matrix:render.

matrix:clear()

Removes all the item previously added to the matrix.

matrix:item("Before Clearing Items")
matrix:item("Before Clearing Items")
matrix:reset()
matrix:item("After Clearing Items")
matrix:render()

Result

After Clearing Items
Copyright © SunSed LLC 2013-2021 All rights reserved.