API

module.ts

StackLayout

StackLayout adds whitespace (margin) between flow (block) elements along a vertical axis. Documentation →

BoxLayout

BoxLayout is a custom element for generic containers of things. Documentation →

CenterLayout

CenterLayout ensures a block-level element is horizontally centered with a max-width value representing the typographic measure. Documentation →

ClusterLayout

ClusterLayout groups items together with control for the margin between them. Documentation →

NOTE — if flex-gap isn't supported, items will appear flush

SidebarLayout

SidebarLayout places two elements side-by-side. If space permits it, the sidebar has a set width and the content fills up the rest of the space. If there is not enough space, the elements collapse into a single column, taking up all of the horizontal space.. Documentation →

SwitcherLayout

SwitcherLayout places elements horizontally if there is space, or vertically if not. Documentation →

CoverLayout

CoverLayout covers a block-layout element vertically with a centered principle element and accessory elements at the top or bottom. Documentation →

GridLayout

GridLayout creates a responsive grid using CSS Grid. Documentation →

FrameLayout

FrameLayout displays an element with an aspect ratio. Documentation →

ReelLayout

ReelLayout places elements horizontally and facilitates scrolling overflow. Documentation →

ImposterLayout

ImposterLayout positions an element over any other element. Documentation →

IconLayout

IconLayout lays out icons inline nicely. Documentation →

addGlobalStyle

Create a global stylesheet under an identifier so it is only added once. If a style with the same id is requested again, it will not be added.

trimCss

Trim all the whitespace from a CSS template literal.

tools.ts

processHtml

processHtml takes a HTML string, looks through it for Alembic usage and modifies the HTML to include custom element styles (e.g. for the layouts).

You can optionally provide options to inject extra HTML into the inputHtml too at either the script or style location. This is useful to automatically add the Alembic base styles / scripts from getBaseStyles and getBaseScripts. Your build process could write these files somewhere then make sure they are linked to from the HTML here.

const options = {
 extraStyles: [`<link rel="stylesheet" href="/alembic/style.css">`],
 extraScripts: [`<script type="module" src="/alembic/script.js"></script>`],
}

You control where the styles and scripts are injected using a special HTML comments <!-- @openlab/alembic inject-css --> and <!-- @openlab/alembic inject-js -->. You opt in to those features by adding the comment to your HTML.

getStyles

getStyles takes a HTML string, looks through it for Alembic usage and returns the styles to satisfy it. This is useful for SSR when you have something that has already generated style ids on custom elements and need to get the styles for a whole document in one go.

getBaseStyles

Get the base styles for non-dynamic Alembic. Useful for creating a stylesheet during SSG to be linked to from a HTML document.

const sourcecode = await getBaseStyles()

getBaseScripts

Get the scripts as a string to run Alembic in-browser. Useful for creating a script during SSG to be linked to from a HTML document.

const sourcecode = await getBaseScripts()