This page contains information about the custom elements and CSS classes available to document alembic. Warning: it gets a bit recursive.

ComponentDef is for visualising a UI component and providing example source code at the same time.

It also provides a side-control on non-touch devices to compress or stretch the defined component, to see how it behaves responsibly.

Attribute Type Default Info
label string '' The name of the component / permutation

Hello, there! Forgive the recursion

DocBox is a custom element to show placeholder content to demonstrate layouts and other components. Depending on whether width or height is set, the box will be block or inline-block. If neither is set, the intrinsic values for both are used, i.e. based on the box's content.

Attribute Type Default Info
width CSS Length null How wide the box should be horizontally (inline axis)
height CSS Length null How tall the box should be vertically (block axis)
pattern {a,b,c} a Which pattern to use, a is a block colour, b is hatched and c is dotty.

DocResizer provides a control for stretching or compressing its children to test their responsiveness. It only shows on non-touch devices.

It's automatically added to component-def elements so there are two below, the inner is the one to checkout.

DocSection is a grouping of component-def elements with a .markdownCard at the top to add extra details. Just like this section you're reading now. The label is also to generate an ID for the persistent details-extra element, so it stays open or closed over pages refreshes.

.markdownCard should probably be renamed to something more agnostic.

Attribute Type Default Info
label string '' The name of the section, used to generate an id to restore the details
prefix string '' A prefix for the generated ID, to ensure its unique
Here is some information about this component. It's another recursive one.

An an example of a component

DocText generates dummy text to fill out a parent element.

Attribute Type Default Info
words string 5 How many words to generate or a range. e.g. 9,13

Other CSS classes available:

  • .docsTitle — The title for a documentation page, probably a h2.
  • .markdownCard — The page-like section for the top of a doc-section.
  • .showPadding — A hack to visualise the padding on an element.