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.

Grid

SunSed Grid is a powerful grid system that is extremely simple to use. Built with CSS Grid, it allows you to easily create columns, define the columns' sizes and their order of appearance at different breakpoints.

grid:column(STRING $content, $width="auto", INT $order=NULL, $width_on_mobile=12, INT $order_on_mobile=NULL, $width_on_tablet=NULL, INT $order_on_tablet=NULL, $width_on_laptop=NULL, INT $order_on_laptop=NULL, $width_on_desktop=NULL, INT $order_on_desktop=NULL, STRING $column_name="", STRING $align_content="normal", STRING $justify_content="flex-start", STRING $align_items="stretch", STRING $content_direction="column", STRING $content_wrap="nowrap", ARRAY $attributes=[  ])

grid:render(STRING $name="", $gap="1em", ARRAY $attributes=[  ])

How it works

Simply add your desired content to different columns using grid:column and then when you want to generate and output the grid, call grid:render.

It is that simple. All you need to learn are these two functions and how they accept different arguments that change the behaviour of the rendered grid.

So instead of writing nested HTML like the following code using bootstrap.

<div class="container">
    <div class="row">
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
    </div>
</div>

While with SunSed grid, you simply write:

grid:column("One of three columns")
grid:column("One of three columns")
grid:column("One of three columns")
:: container:medium(grid:render())

$content

Provide the content of the column as a string.

For example; adding a card:post to the column that returns the HTML of the card as a string.

grid:column(card:post("House for Sale", $image_url))

$width = "auto"

The second argument of grid:column is $width. It specifies the baseline width value of a column (meaning that other arguments of $width_on_ different breakpoint will use the value of this $width argument if they are NULL). The default value of $width is "auto" which means it

$width_on_ Different Breakpoints

You may specify the width of a column at different breakpoints using $width_on_mobile, $width_on_tablet, $width_on_laptop, $width_on_desktop (learn more about SunSed breakpoints).

Example of specifying different widths of a column.

grid:column(
    "hello there", 
    width_on_mobile: 12,
    width_on_tablet: 10,
    width_on_laptop: 8,
    width_on_laptop: 6)

This will generate a column that takes the entire parent container's width in mobile (max-width: 640px), 10/12 of the parent container's width on tablet (max-width: 980px), 8/12 of the parent container's width on laptop (max-width: 1280px), and half of the parent container's width on a desktop (max-width: 1960px).

$width_on_mobile by default has a value of 12, meaning that the default behaviour of every grid:column is to take the entire width of the parent container in mobile devices.

On the other hand, the remaining column width arguments for different breakpoints (width_on_mobile, width_on_tablet, width_on_laptop, width_on_desktop) have no default behaviour which is why they all have a default value of NULL (For $width_on_breakpoint arguments NULL means that at that breakpoint the value of the baseline argument $width will be used instead).

For example, the following code will generate a column that takes 3/12 of the parent container's width across all breakpoints, except on mobile where it will use the default value of 12)

grid:column("Column Content", width: 3)

$width Arguments' Acceptable Values

  • "auto" - Automatically sets the column width based on the width of other columns in the grid. If all columns' widths in the grid are set to "auto" then all the columns will have equal widths. If one or more columns have set a specific $width size, then the remaining columns that have their $width set to "auto" will take an equal part of the remaining width.

  • NULL - will use the $width argument's value. If NULL is given to the $width argument itself it will simply act like "auto".

  • 1 - 12 - The integer values of 1 to 12 will specify the desired with of the column based on the widely accepted 12 number of available column design guide found in almost any major grid system. You simply state the number of arbitrary columns (out of 12 equal columns) you desire your grid:column to occupy. For example, 6 will take half of the parent container's width (6/12 = 1/2).

  • Pixels - You may also set the column width using pixels. For example, "250px"

  • Percentage - You may also use percentage to define the width of a colum. For example, "90%" to take up 90% of the parent container's width.

$order

Similar to the $width argument, $order will set the baseline order position of a given column. You may either use NULL or an integer starting at 1 to specify the order in which your columns should appear for your grid.

The default value of NULL, will set the order of the column based on the order in which its grid:column function has been called in relation to other grid:column functions in your grid, overwritten by any explicit order of other columns.

For example, if you have 2 columns in your grid and you would like to present the first column in your code to be shown after the second column. All you have to do is pass 2 for the order argument of the first grid:column. The second column's second position will automatically be overwritten, making it show up as the first column.

gird:column($content, order: 2)
gird:column($content)

$order_on_ Different Breakpoints

Similar to $width_on different breakpoint argument, $order_on_mobile, $order_on_tablet, $order_on_laptop, and $order_on_desktop all will define the order in which the column will show, without an explicit value defaulting to the $order argument's value.

For example, the following code will position the column as the first on mobile and tablet. On the laptop breakpoint, it will default to using the value of $order which is 2, which means that the column will be in the second position on the laptop. And on the desktop, it will be in the third position.

grid:column(
    "hello there",
    order: 2 
    order_on_mobile: 1,
    order_on_tablet: 1,
    order_on_laptop: NULL,
    order_on_deskop: 3)

$column_name

The column name is used as the name of the column in the related CSS and JS that is generated for your column. It will automatically be assigned a non-conflicting value and it is completely optional to set it to your desired custom name.

$align_content

If the height of the content of your column is less than the height of your column, then you may align the content vertically within the extra space of your column using the following values.

  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly

$justify_content

If the width of the content of your column is less than the width of your column, then you may align the content vertically within the extra space of your column using the following values.

  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly

$align_items

Align items in simple terms will allow you to align the items in your column horizontally. You may use all acceptable CSS grid align-items values;

  • normal
  • flex-start
  • flex-end
  • center
  • start
  • end
  • self-start
  • self-end
  • baseline, first baseline, last baseline
  • stretch

$content_direction

Is the same as CSS flex-direction proeprty, which means you get to pick the direction in which your column items will flow.

  • column
  • column-reverse
  • row
  • row-reverse

$content_wrap

Is the same as CSS flex-wrap property, which means that it sets if the items within your column should be forced to in a single line or you allow it to flow into multiple lines.

  • nowrap - Single-line.
  • wrap - Multi-lines. the direction is defined by $content_direction argument
  • wrap-reverse - Multi-lines. will set the wrap property to the opposite direction defined by $content_direction argument.

$attributes

Like many other SunSed UI functions the $attributes argument accepts an array that allows you to add HTML attributes to the final element (in this case the column), such as custom inline CSS, classes and etc.

grid:column($content, attributes: ["class" => "my_column"])

grid:render

As mentioned before the grid render is responsible for generating and returning the HTML of the grid itself based on the grid:column functions called before it.

It accepts the following arguments:

  • $name (optional) - which sets the name of the grid itself used in the class names and any other CSS, and JS generated by the function.
  • $gap - sets the gap size between the grid:columns. Accepts any value accepted in CSS (px, em, rem, and etc).
  • $attributes - similar to the attributes argument of the column allows you to inject your own HTML attributes to the final HTML of the grid (for example, styles, class names, etc).
Copyright © SunSed LLC 2013-2021 All rights reserved.