Containers vs. Elements

Layout Code describes both containers and elements.

A container is just that: it contains other things (containers and/or elements). An element is an atomic item that displays values about the parent object (character, document, etc.).

Containers

The primary signifier of a content block is the inclusion of a content array. All other keys are optional (the layout is assumed to be "stacked").

The items in the the content array can be either element definitions or additional containers (which can also have their own child containers, ad infinitum).

Definition Format

  • alignvalues: 'right' or 'left'.
  • blocklabelAdds a block label element. Really needs to be in a "stacked" layout. Value will be passed through the localization parser.
  • fluidIf true, try to fill the available space (vertical or horizontal), regardless of the parent layout.
  • layout
  • mobilehideIf true, don't display this on small screens.
  • mobilewrapIf false, don't automatically wrap the elements in this container on small screens.
  • scaleChange the default size of the element (poorly supported)
  • showlabelIf true, always display the label, even in contexts where it is usually hidden (e.g., collection rows)
  • sizeDefines the size of this container (see below for sizes)
  • vertalignAligns content items in a block vertically. Values can be top, bottom, or center
  • wrapIf false or none, don't allow content to wrap. If true or wrap, allow content to wrap (it may not).

Style Elements

Container blocks also support a small set of CSS element values. These should be used sparingly as support is primitive at this point in time (e.g., there's no text color changes, etc.).

  • styleValue is a single css class and is applied to the element.
  • bgcolorSets the background color of the block. This should not be anything extreme.
  • bordercolorAdds a border of the given color (technically an inner box shadow, so it doesn't increase the size of the block).
  • marginTakes css margin values. Should be in rem.
  • paddingTakes css margin values. Should be in rem.

Container Sizes

Container sizes are only applied to the container's width. Content can almost always grow verticall unbound, so constraining it doesn't make sense.

  • stretchGrow this block to fill as wide as it can be.
  • shrinkMake this block as small as it possibly can be.
  • fullSize the block to 100% wide of the parent.
  • threequartersSize the block to 75% wide of the parent.
  • twothirdsSize the block to 66% wide of the parent.
  • bigSize the block to 66% wide of the parent.
  • halfSize the block to 50% wide of the parent.
  • thirdSize the block to 33% wide of the parent.
  • quarterSize the block to 25% wide of the parent.

Container Layouts

  • stackedLays out content vertically, aligned to the top.
  • spreadstackedLays out content vertically, spreading out items.
  • rowLays out content horizontally, aligned to the left by default.
  • horizontalBehaves exactly as "row"
  • listrowBehaves exactly as "row"
  • bigboxrowBehaves exactly as "row", with content spread apart, and assumes larger scaled content.

Elements

Addressing Parameters

Elements display data about the parent. Usually this an entity/character, but can also be a document or a group element.

Except for special elements (below), elemental data must be addressed. Data is either an attribute or a field on an item in a collection

  • itemPoints to either an attribute or a Collection item. If collection is provided, then this is a Collection Item (see "collection" below), else it refers to the value of an attribute on the parent object (usually an entity). Thus a value of strength will return the value of the attribute, "strength".
  • collectionIndicates that this element points to a Collection. If present, the "item" value will address a specific item in the Collection by name. Sometimes - often - this is useless, as those Item ids are going to be randomly generated.
  • fieldLook at a specific field on a collection (Skills[Search][ranks])

Behavior Parameters

These parameters change the default behavior of an element or override its values.

  • editableIf false, don't allow editing for this element even if the user has permission to edit it.
  • valueDon't bother with item or a collection, just use this value.
  • calculationDon't bother with item or a collection, just use the results of this calculation as the value.
  • keylessDon't give this element a key (prevents it from being updated automatically).
  • classesAn array of css classes that can be applied to the element.

Element Display Parameters

These parameters affect how an Element is displayed. None are required. Not all are well-supported in all layouts ("labelposition") or are outright ignored ("labelless")

  • layoutElements have MANY layouts (see below). Defaults to status_box.
  • typeSome elements (particularly pull-downs/enumerations, rich text elements, and booleans) require being defined as special type. See below.
  • alignvalues: 'right' or 'left'.
  • fluidIf true, try to fill the available space (vertical or horizontal), regardless of the parent layout.
  • labellessIf true, don't display a label.
  • labelposition"interior" or "exterior"; default "exterior". Rarely useful.
  • mobilehideIf true, don't display this on small screens.
  • scaleChange the default size of the element (poorly supported)
  • showlabelIf true, always display the label, even in contexts where it is usually hidden (e.g., collection rows)
  • sizeDefines the size of this container (see below for sizes)

Action Parameters

When present, these parameters indicate that the element is an actionable affordance (a button that can be clicked and something happens).

  • clickWhat to do when clicked: action, valuetest, rankedpool.
    • actionUpon being clicked, execute the action defined (see below).
    • valuetestUpon being clicked, execute the defined Action.
    • rankedpoolUpon being clicked, roll the appropriate ranked pool.
  • actionWith click = action, execute the named action (defined in the engine's actions.
  • nonactionableIf true, even if there is an action available, do nothing if this is clicked.
  • exits

Special Elements

Some elements are special and have slightly different behaviors.

  • textMakes a text block, with the value given as the text.
  • iconSets a simple icon. plus, minus, or equals
  • dividerCreates a vertical line to separate content.
  • headerMakes a header element, with the value given as the text.

Element Layouts

  • layout

Element Sizes

Elements size themselves in more concrete measurements than percentages of their parent.

  • nano1rem
  • micro2rem
  • tiny4rem
  • small6rem
  • medium8rem
  • large10rem
  • huge12rem
  • button15rem
  • gigantor16rem
  • tyrannosaurus20rem

Exclusion