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.

Container

Containers are one of the fundamental building blocks of SunSed UI, and do exactly what their library name suggests, contain their given content. All containers accept the following arguments;

$content

The content that is going to be contained as a STRING.

$padding_bottom

Sets the bottom padding of the container. You may specify your desired padding in any units accepted in CSS.

$padding_bottom

Sets the bottom padding of the container. You may specify your desired padding in any units accepted in CSS.

$min_height

The $min_height arguments let you set the desired height of your container. This is by default set to "auto" which means that the container's height will expand and shrink based on the height of its content. A great use-case for setting a min_height would be to set the container's height to match the height of the parent or the window, in order to vertically align the content of your container in the middle of the page (using the $align_items argument).

$align_items

As mentioned in the previous argument description by setting the $min_height to a height that is be bigger than the height of the content of the container, you may align the content vertically in your container by using one of the following values.

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

Example of having a container that has a height of 500px and aligns its items vertically to the center.

container:small($content, min_height: "500px", align_items: "center")

$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 container), such as custom inline CSS, classes and etc.

container:small($content, attributes: ["class" => "my_container"])", align_items: "center")




container:create

Container create function allows you to create a container with your desired $width and $max_width.

Pre-Defined Container Sizes

There are five container sizes pre-defined and ready to use. We recommend that you generally stick to these pre-defined container sizes so that your app's UI layout will be more uniform and consistent throughout. All pre-defined containers have a max-width of 95%.

container:tiny

Create a tiny (width of 440px) container. Text aligned to the center by default.

container:small

Create a small (width of 640px) container. Text aligned to the center by default.

container:medium

Create a medium (width of 920px) container. Text aligned to the center by default.

container:large

Create a small (width of 1280px) container. Text aligned to the left by default.

container:xlarge

Create a medium (width of 1920px) container. Text aligned to the left by default.

Copyright © SunSed LLC 2013-2021 All rights reserved.