Homebrewery

---

Guidebook

 

 

 

 

 

 

 

 

Homebrewery(HB) is capable of creating amazing looking e-books for your campaign. It does this by manipulating visual elements. This is just another way of saying that it uses CSS(Cascading Style Sheets) and markdown.

There is a built-in style editor that allows you, the user, to edit and change how your HB project looks. In addition to the style editor, there is a brew editor. The brew editor is where you start when you create a new HB project.

What we are going to do first is take a look at the icon/menu bar and go through each, from right to left, top to bottom. We will be skipping the first 2(Natural Crit and The Homebrewery).

• Version Information: Clicking on the version info will open a new page in your browser showing you the changelog of Homebrewery.
• Help out: This takes you to Patreon and allows you to create a subscription. This is how the Homebrewery creator/s get paid for their time and dedication to bringing you this amazing tool.
• Title Section: By default, when you create a new HB project, the title section is empty. You will learn later how to provide a title for you work.
• Google Drive: By default this is empty, unless you have setup your account to use Google Drive. This will be discussed later.
• Save Now: If you have not created your account yet, this button will have to manually clicked in order to save your document. If you do have an account, your document should auto-save, but you have the option to manual save when you want/need.
• Need Help?: As of now, this section is you get help with site issues.
• Share: This section offers the ability to share your work.
• Get PDF: This menu item takes your work and converts into a PDF.
• Recent Brews: Here you can see all the recent HB projects that you have either viewed or edited.
• Your Account Name: Mousing over this will show sub-menu items; Brews, Account, Logout.
  • Brews opens a new tab in your browser and shows you all of your HB projects.
  • Account shows you basic information about your account on HB. This is where you can link your Google Drive, and choose to save you work there if you wish. Once you have linked your Google Drive, the icon will show up to the left of the save now menu item.
  • Lastly, logout does exactly what it says.

Moving on to the second menu bar, just under the top bar, and starting from left to right. The first five options here are menus with sub-menu items. We won’t discuss everything about these menus, as for the most part they are self-explanatory. However, it is important to know that the items in these menus will help you to create a look similiar to the core books of your favorite RPG.

After the ‘PHB’ menu item you have the following icons:

• Undo: This counter-clockwise arrow will undo what you just did.
• Redo: This clockwise arrow will redo what you undid.
• Fold All: Clicking this will enable code folding, causing all pages to collapse. Everything is still there, but now your workspace is “reduced” allowing for a clean, organized look.
• Unfold All: This will expand all page blocks.
• Editor Themes: Don’t like the way the editor looks, click this. Here you have the option to change the theme to that of your favorite editor theme.
• Brew Editor: By default this is selected when you open/create a brew.
• Style Editor: This is where you can create your own CSS rules.
• Properties: This is the last icon and where you can set a title for your document. Additionally, you can give a document description, assign a setting and any tags. This is also where you can publish your document.

Throughout this resource, you will find examples that will help guide you along in the process of creating HB e-books, limited only by your imagination.

 

 

What is Markdown?

What can Markdown Do?

Well, as was already stated, Markdown is used for formatting elements. Think of it like this, in most forum software, or any community site, there are formatting tools to help you create a well formatted post.

You use plain text, mixed with some Markdown, and voila, you have easily formatted your text. Markdown can be used to create headers, lists, links, and various text decorations, just to name a few things. Markdown examples will be given at the end of this chapter.

 

 

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

 

 

H1 Heading - Alt. Syntax

H2 Heading - Alt. Syntax

H1 Heading - Alt. Syntax
============================
H2 Heading - Alt. Syntax
----------------------------

 

 

Regular Text
*Italic Text*
**Bold Text**
***Italic Bold Text***
~~Strikethrough Text~~

 

 

- _Italic Text_
- __Bold Text__
- ___Italic Bold Text___
- __*Italic Bold Text*__
- **_Italic Bold Text_**
- ***Italic Bold Text***

 

 

To create a line break or new line (<br>), end a line with
two or more spaces, and then type return.

To create a line break or new line (<br>), end a line with  
two or more spaces, and then type return.

 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices rhoncus odio, eget tincidunt ligula. Nulla facilisi. Integer dignissim posuere sapien, vel pretium orci. Nam vel massa felis. Donec ac tortor eget tortor facilisis lobortis eget sollicitudin erat.

Mauris in augue ornare, vehicula elit in, hendrerit ipsum. Integer consectetur placerat velit at consectetur. Phasellus elementum ipsum non velit fringilla tincidunt. In bibendum sem quis justo malesuada vestibulum. Nam luctus vitae metus in laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices rhoncus odio, eget tincidunt ligula. Nulla facilisi. Integer dignissim posuere sapien, vel pretium orci. Nam vel massa felis. Donec ac tortor eget tortor facilisis lobortis eget sollicitudin erat.  

Mauris in augue ornare, vehicula elit in, hendrerit ipsum. Integer consectetur placerat velit at consectetur. Phasellus elementum ipsum non velit fringilla tincidunt. In bibendum sem quis justo malesuada vestibulum. Nam luctus vitae metus in laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

 

This is a blockquote without any style.

> This is a blockquote without any style.

 

 

1. List item 1
2. List item 2
3. List item 3
4. List item 4
5. List item 5

1. List item 1
2. List item 2
8. List item 3
4. List item 4
9. List item 5

 

 

- List item
- List item 2
  - Sub-list item

+ Alt. syntax : list item
+ Alt. syntax : list item 2
  + Alt. syntax : sub-list item

* Alt. syntax 2 : list item
* Alt. syntax 2 : list item 2
  * Alt syntax 2 : sub-list item

 

 

line of code here!

block of code
that covers several
lines.

`line of code here!`

```
block of code
that covers several
lines.
```

 

 

Horizontal Rule

---

---

***

___

 

 

[1]: https://www.markdownguide.org/basic-syntax/#links

- This is an external link to this [resource](https://homebrewery.naturalcrit.com/share/pZu0UlxFQuSS).
- This is an internal link to the [Markdown](#chapter-2-markdown) chapter of this resource.
- This is a formatted external link to the [Markdown link guide][1].

 

 

Basic image

Image linking

##### Basic image
![DM Illithid](https://styles.redditmedia.com/t5_ba81n3/styles/profileIcon_v15wfw4v1ttc1.jpeg?width=128&height=128&frame=1&auto=webp&crop=128:128,smart&s=7e936bb4b4e88a938b3d215caef8e7eb5ef80174 "DM Illithid")
##### Image linking
[![DM Illithid](https://styles.redditmedia.com/t5_ba81n3/styles/profileIcon_v15wfw4v1ttc1.jpeg?width=128&height=128&frame=1&auto=webp&crop=128:128,smart&s=7e936bb4b4e88a938b3d215caef8e7eb5ef80174 "DM Illithid")](https://homebrewery.naturalcrit.com/user/DM_Illithid)

 

 

All symbols attached to items presented here in this markdown chapter can be escaped by using the backslash(\), including the backslash itself.

Presented earlier in the chapter, the backtick, can also be escaped using the backslash. However there is an exception to the backtick. When using in-line code or code blocks, the backslash will only escape the first backtick, thereby “breaking” the code display. Please refer to the code section for escaping backticks in code display.

Additionally, the backslash can escape the dot(.), exclamation(!), and pipe(|).

 

 

Left Aligned	Centered	Right Aligned
0 300 900	1	+2
	2	+2
	3	+2

|Left Aligned|Centered|Right Aligned|
|:---|:---:|---:|
|0|1|+2|
|300^|2|+2|
|900^|3|+2|

 

 

• Task list item 1
• Task list item 2
• Task list item 3

- [x] Task list item 1
- [ ] Task list item 2
- [ ] Task list item 3

 

 

Pythagorean theorem

a² + b² = c²

Area of a circle

Area = πr²

#### Pythagorean theorem
a^2^ + b^2^ = c^2^

#### Area of a circle
Area = πr^2^

 

 

http://www.example.com
`http://www.example.com`

 

 

1. Footnotes - Doesn’t function as expected.
2. Heading ids - HB either overrides this or doesn’t allow for it.
3. Definition lists - HB has a different format for this and will be covered in chapter 3.
4. Highlight - Doesn’t function at all.
5. Subscript - HB has a different format for this and will be covered in chapter 3.

md Footnote

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

md Heading Id

### My Great Heading {#custom-id}

md Highlight

I need to highlight these ==very important words==.

md Subscript

H^^2^^0

 

 

 

 

• wide _{(make any container span all columns.)}
• note
• descriptive
• spellList
• artist
• toc
• index
• classTable
  • frame
  • decoration
• runeTable
  • frame
• monster
  • frame
• quote
  • attribution _{(to be used inside quote)}
• watermark
• watercolorX _{(from 1 to 12)*}
• imageMask
• imageMaskCenterX _{(from 1 to 16 + special)*}
• imageMaskEdgeX _{(from 1 to 8)*}
• imageMaskCornerX _{(from 1 to 37)*}
• top
• right
• bottom
• left
• revealImage
• pageNumber
  • auto
• footnote
• homebreweryCredits
  • homebreweryIcon _{(to be used inside homebreweryCredits)}
    • red
    • gold
• frontCover _{(banner, footnote, logo to be used on the same page as frontCover)}
  • banner
  • footnote
  • logo
• insideCover
  • logo _{(to be used in the same page as insideCover)}
• partCover
• backCover
  • logo _{(to be used in the same page as backCover)}

• pages is the class of the wrapper of all pages
• page is the class used for every page element in a brew
• blank is the class our colons :
• block all curly braces blocks (such as note, monster, descriptive, etc.) have this class associated to them
• inline-block all curly braces inline elements (I.E. {{color:red my red text}}) have this class associated to them.
• columnWrapper a class we use for a wrapper of all contents inside the page
• columnSplit our \column command inserts a block with this class

 

 

Subscript

H₂O

Definition List

Term

Definition 1

Definition 2 with more text

Blank Lines

There is a blank line between this line and the heading; created with the colon(:) on a line by itself. You can place multiple colons together, on the same line to create multiple blank lines. *

###### Subscript
H^^2^^O
###### Definition List 
Term
::Definition 1
::Definition 2
with more text  

###### Blank Lines
<div class='blank'></div>

There is a blank line between this line and the heading.

 

 

There are two formats for curly braces, that can be used in the brew editor. Each has similar, but specific uses.

Formats:

• Single: { } _{(used to add style)}
• Double: {{ }} _{(used to create spans and divs)}

Single Format

When using the single format, it should be placed on the line directly following the element you wish to add style to. This format is commonly used after image markdown.

Example

###### Example
{color:#ee390c;font-size:2em}

Double Format

The double format can be viewed on the next card.

 

 

Spans & divs are both created using curly braces ({{ }}).

Span

This sentence is a span, also called an in-line block. This sentence is not.

Div

This sentence is not part of the div.

### Span
{{color:#1f4e7d;text-decoration:underline This sentence is a span, also called an in-line block.}} This sentence is not.
### Div
{{background-color:purple;color:#eee 
This sentence is part of a div, also known as a block.
}}
This sentence is not part of the div.

 

 

Background images on HB use image markdown with a combination of single format curly braces to inject css.

In the bottom right corner of this card is a background image that has been placed as an example. Above the image, on the right is the code to place that image.

![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:50px,right:30px,width:100px;}

 

 

What is CSS?

What you need to know

CSS has endless possiblities and, in terms of appearance, if you can imagine it, most likely it can be done. That being said, this guidebook will not cover all of CSS. However, this guidebook will give some examples.

 

 

I have seen several posts on Reddit seeking help with page numbers. Style can be applied to numbers in two ways; in the Style Editor, or the Brew editor.

Brew Editor

If you wish to, for example, change the color of the page numbers to red. You can do it inside of the page number snippet.

Ex. {{pageNumber,auto,color:red}}

The above snippet would create an auto-numbered page with the color red.

Ex. {{pageNumber,color:red 5}}

The above snippet code will show a red 5 for the page number.

Style Editor

You can use the style editor to alter the page numbers as well. Creating the red page numbers in the style editor uses a different format. See the example below.

.page .pageNumber {
  color:red;
}

.page#p6 .pageNumber {
  color:blue;
}

Using the brew editor might be easy, but the style editor allows you to do more, due to the limitation of the in-line snippet code.

Remember that when you using the in-line snippet code reads a space as the begining of the content. This means that you can’t use css in the snippet to reset the page numbers(just one example).

If you want to reset the page numbers, you have to use the style editor. Lets say you want the third page of your project to be page 1, you would use the example below.

.page#p3 {
  counter-reset: page-numbers 0;
}

Elevation

When using the snippet code, HB injects the style in the HTML span that is created. This is in-line style and automatically is elevated, meaning it has higher priority. CSS inside the style editor has less priority than in-line style.

Using the style editor example already presented to change the page numbers to red, all page numbers, where the page number snippet is used, in my project will display as red.

What happens if you insert color css into the snippet? Let’s say the color is blue. Even though page numbers, in the style editor are set to display as red, the color used in the snippet will override the red, but only on that page.

 

 

Resources Used

• Markdown Guide
• Reddit - Homebrewery
• Unfinished Guide
• Built-in Homebrewery Classes

Other Resources

• Google Search - Markdown Cheat Sheet
• Google Search - CSS
• Interactive CSS Cheat Sheet
• Google Fonts

 

 

Homebrewery

• Change hr appearance (color,size,etc)
• Expand on curly braces - specifically single format and placement
• PLACEHOLDER

CSS

• CSS: Font includes
  • Font resources
• Text Enhancements
  • Shadows
  • Stroke
  • Neon
• Alternating table row colors
• Sideways chapter headers
  • Right | left alternation
  • Color changing
• PLACEHOLDER
• PLACEHOLDER