Layouts

Layouts are custom elements that responsively position and arrange its child elements. These elements can be reused and nested as much as you like to compose pages together.

Recommended reading: EveryLayout.

They share a common set of css variables. These are created using a modular scale to work nicely with a font size of 1rem and line-height of 1.5. Think of them as starting at -5 going though 0 and up to 5. They form a curve of values which creates pleasing spacing.
These are provided by Alembic.

  • --s-5 — Smallest value
  • --s-4
  • --s-3
  • --s-2
  • --s-1
  • --s0
  • --s1 — Common default scale
  • --s2
  • --s3
  • --s4
  • --s5 — Largest largest

StackLayout places elements vertically and adds empty space between them. You can nest multiple StackLayouts with different spacing.

Use em units to create a "flow" layout where spacing is relative to the font size of the elements. This works well with html content, so a <h1> has more space above it than a <p> element.

Attribute Type Default Info
space CSS margin var(--s1) How much whitespace to put between each element

BoxLayout is a primitive to show a container of other elements. It has a uniform padding and a border with an unset colour. The border-width is set to --border-thin and does not set the border-color, that is up for consumers to specify.

This component concerns itself a little with colour. It expects --color-foreground and --color-background to be set and uses them to set the background and text colours respectively. (These variables may be renamed soon).

Attribute Type Default Info
padding CSS padding var(--s1) How much empty space between the border and content
borderWidth CSS border-width var(--border-thin) How much empty space between the border and content
invert boolean false Whether to swap the fore & background colour (WIP)

CenterLayout ensures an element is centered horizontally with a minimum width. It can have gutters to apply a padding outside of the element so it's children can pop out, like images in a blog post. If it is intrinsic, the element will be its own width, while it is less than max.

Attribute Type Default Info
max CSS length var(--measure) The maximum horizontal width of the laid-out element
gutters CSS length 0 How much horizontal empty space to add to either side of the laid-out element
intrinsic boolean false Turn on to use the width of the laid-out element itself, rather than the max

ClusterLayout groups multiple items together based on their intrinsic width and separated by a common gutter.

Attribute Type Default Info
space CSS gap var(--s1) How much space between each element
justify CSS justify-content flex-start How to align the elements along the Flexbox
align CSS align-items flex-start How to align the elements perpendicular the Flexbox

SidebarLayout places two elements side-by-side if space permits it or stacks them on top of each other if not. The side element will be it's intrinsic size and the content element will grow or shrink to fit. The elements are stacked when the ratio falls below a certain percentage. By default if the content element is less that 50% of the whole width, the elements will be stacked vertically instead.

note — the side element should have a CSS width or max-width, otherwise use sideWidth

Attribute Type Default Info
side left|right left Whether to put the sidebar on the left or right (in left-to-right orientation)
sideWidth CSS length null Set the sidebar to be a specific width
contentMin CSS percentage 50% Change the ratio for when the elements will be stacked vertically
space CSS gap var(--s1) How much space to put between the sidebar and content elements
noStretch boolean false Keep the intrinsic height of the sidebar & content elements instead of stretching them to match.

SwitcherLayout dynamically displays a set of columns horizontally if there is enough space or stacks them vertically if not. It is based on a threshold and limit. All elements' widths added up must be less than the threshold to be laid out horizontally.

There is also a limit prop that says how many elements are allowed to display horizontally, which is a limitation of the CSS required to create this layout. If filled dynamically, this limit should be taken into consideration, e.g. stop adding items after it has been reached.

Attribute Type Default Info
threshold CSS width var(--measure) The horizontal space that all elements should fit equally into
space CSS margin var(--s1) The uniform gap between each element
limit number 4 The maximum number of elements allowed to be displayed horizontally

CoverLayout fills a minimum vertical height and centers a principle element vertically. It places accessory elements above or below which keep their intrinsic height. The principle element is a h1 unless centered is set.

Attribute Type Default Info
centered CSS selector h1 A CSS selector for the principle element
space CSS margin var(--s1) The minimum space between all laid-out elements
minHeight CSS length 100vh The minimum block-size (height) for the entire layout
noPad boolean false Whether the spacing should also pad the inside of the layout

Hello, Cover!

Hello, Cover!

GridLayout creates a responsive grid of same-sized elements. Elements will grow horizontally until another element will fit on the same row. "Ghost" elements are added on the last row to ensure the last cells aren't stretched. Useful for pages like grids of people or projects.

Attribute Type Default Info
min CSS length 250px The minimum width of each cell
space CSS gap var(--s1) How much empty space between each cell

FrameLayout ensures a fixed aspect ratio by cropping around the center of the image. If content is provided instead of an image, that will be centered with Flexbox too.

Attribute Type Default Info
ratio string 16:9 The aspect ratio of the laid-out element

Coming soon ...

ReelLayout places elements horizontally and ensures horizontal overflow scrolling happens. It will show scrollbars to indicate that there is horizontally scrollable content.

If JavaScript is not available, ReelLayout will fall back to setting each element's width with the --item-width custom property.

Attribute Type Default Info
itemWidth CSS flex-basis auto Set to fix each elements width, rather than use their intrinsic width
space CSS length var(--s0) The gap between each element
height CSS length auto Fix height of the layout itself
noBar boolean false Whether to hide the scrollbar

ImposterLayout positions an element over other elements. The positioned element is vertically and horizontally centered in it's nearest positioned parent and will not exceed it's height or width, unless breakout is set. By default, the width of the element is 50% of the positioned parent and it will not exceed 100% of it.

Attribute Type Default Info
breakout boolean false Whether the imposter is allowed to be larger that its positioned parent.
margin CSS length 0px The minimum space between the element and its positioning container (when breakout isn't used).
fixed boolean false Whether to fix the element to the viewport instead (i.e. position: fixed).

IconLayout is for nicely placing icons inline with text. Use label to markup an icon-only element with the correct accessibility attributes.

Attribute Type Default Info
space CSS margin null Fix the space between icon and text instead of using text whitespace
label string null Make the layout icon-only and set the correct a11y attributes
Back Up Down Next Add Minus Menu