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
to work nicely with a font size of
1rem and line-height of
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
--s1— Common default scale
--s5— Largest largest
StackLayout places elements vertically and adds empty space between them. You can nest multiple StackLayouts with different spacing.
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
|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
does not set the
border-color, that is up for consumers to specify.
This component concerns itself a little with colour.
--color-background to be set
and uses them to set the background and text colours respectively.
(These variables may be renamed soon).
|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||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
ClusterLayout groups multiple items together based on their intrinsic width and separated by a common gutter.
|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.
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.
|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
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.
|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
centered is set.
|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|
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.
|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.
|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.
--item-width custom property.
|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.
|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
|fixed||boolean||false||Whether to fix the element to the viewport instead (i.e.
IconLayout is for nicely placing icons inline with text.
label to markup an icon-only element with the correct accessibility attributes.
|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|