Divs

A <div> element in HTML is a basic, generic container for content on a website, similar to a <span> element, except that rather than being “inline” it is a “block” element. In Homebrewery terms, things like the “note” or a “stat block” are pieces of content wrapped in a div. Like a span, a div is useful for wrapping other content and giving it some identifiers so you can use CSS selectors to target and style both the container itself and the items inside.

Markup

In the Homebrewery there is a special extended Markdown-like syntax for creating a div, and it follows much of the same rules as a span: at a minimum, wrap the content in double curly braces and separate the “attribute area” from the content area with a delimiter. In the case of a span the delimiter would be a space— for a div, it is a new line (Return):

{{
Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.
}}

<div class="block"><p>Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.</p>
</div>

With the opening and closing braces on otherwise empty lines, the inner text is wrapped in the div element with a default class="block" attribute. The inner content can be text, images, other divs, etc. With the above, you could now style this block by targeting all div elements (or by the class block). In most cases, this probably wouldn’t actually be helpful– you will want to give your div some better identifiers.

IDs and Classes

Give your div block and id and class names that you can then target with CSS selectors by including them in the “attribute area” in the first line. ID’s are preceded by a #, and class names require no special leading character:

{{#wasteland-castle,location,abandoned
Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.
}}

<div class="block location abandoned" id="wasteland-castle">
  <p>Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.</p>
</div>

This block could now be styled with CSS in the Style Editor by selecting on the .location or .abandoned class names, or the #wasteland-castle ID.

Inline Styles

If you want to provide some styles to a block without having to define styles in the Style Editor, you can do so directly inside the attribute area within the curly braces. Add normal CSS properties and values, separated by commas, into the first line. If a CSS property has a value that requires the use of spaces, you need to wrap the value in double quotes:

{{#wasteland-castle,location,abandoned,font-family:"Open Sans",border:"1px solid black",border-radius:10px,padding:8px
Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.
}}

<div class="block location abandoned" id="wasteland-castle" style="font-family:Open Sans; border:1px solid black; border-radius:10px; padding:8px;">
  <p>Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.</p>
</div>

Custom Attributes

If there is an attribute you would like to apply to a div beyond id, class, or style, you can do so by utilizing the = symbol in the attribute area of the first line. For example, to make the div editable in the Preview pane and without spellchecking:

{{#wasteland-castle,location,abandoned,contentEditable="true",spellcheck="false"
Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.
}}

<div class="block location abandoned" id="wasteland-castle" contenteditable="true" spellcheck="false"><p>Voluptate aliqua mollit velit laboris fugiat esse mollit. Anim velit in incididunt.</p>
</div>

Closing

Remember, this is unique to the Homebrewery (though it draws inspiration from other places), so it can be difficult to find additional information on the general web. The syntax was originally designed to reduce headaches with remembering to properly close divs (and spans), which is still required with the braces but easier to actually do. In the process, the real value came in reducing the amount of text needed to apply id’s, classes, styles, and attributes and making “layout” changes possible with a Markdown-like syntax.