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 |