Docs
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 |
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 ah2
. -
.markdownCard
— The page-like section for the top of adoc-section
. -
.showPadding
— A hack to visualise the padding on an element.