Getting Started
This page is dedicated to help community developers who want to develop their modules using Foundryborne's (Daggerheart Game System) style and design rules. This page will guide on how one can access these styles and provide guidance in order to use them in their applications.
Using style in Applications
In order to use the styles, Developers need to setup reference to the .dh-style class into their application. It is strongly recommended to use applicationV2 and dialogv2 since the version 1 will be depreciated soon in future FoundryVTT releases.
const { ActorSheetV2 } = foundry.applications.sheets;
const { DialogV2 } = foundry.applications.api;
export class YourBaseActorSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
static DEFAULT_OPTIONS = {
classes: ['daggerheart', 'module', 'application', 'dh-style'],
// ...
}
static async openDialog(_, button) {
const confirmed = await DialogV2.confirm({
window: {
title: 'Title',
icon: 'fa-solid fa-user'
},
content: 'Lorem Ipsum',
classes: ['daggerheart', 'module', 'dialog', 'dh-style']
});
if (!confirmed) return;
// ...
}
}
At this point, the module will be using the game system style but, be aware that the styles are applied into the html elements, so it may have some conflicts with some styles that was already build into the module.
Summary
Style Rules
Once applied the class in the module's application or dialog, things should appear to be styled since most of style is applied directly into the html elements. Styles are applied in foundry templates too like inputForm and inputGroup for example.
The styles should be enough for most use cases but feel free to adjust the size of fonts, weights or the flex-direction of the label and form input to fit in the module project.
The style designed for this system is made to keep the identity of Daggerheart material, but it is not representative because this game system is not associated or have a directly correlation with Darrington Press. This style was made with three words in mind: fancy, fantasy and modern. The following topics will provide guidance about some rules one should follow when implementing their modules.
Colors
The system comes with some colors and variations based on opacity by default and most of them are already applied in nearly all elements and they follow the principle of three colors, where one is the main color and the others are there to complement the main one. Each dark and light theme follow this principle to guide and provide color rules for the system.
Maybe in some situation one may need to use the colors in their CSS file. To access these colors, the developers can use the CSS variable where they can check by clicking here.
There are some ways to setup the dark and light theme for colors, but for simplicity we suggest using the CSS method light-dark() to keep things simple.
To theming colors in chat messages, it is a work that is difficult because one would need to look at the classes where
light-dark()method don´t work due to interface theming and works only in applications and dialog.
Here some example to use the colors stated above:
h1 {
// first light color, then dark color
colors: light-dark(var(--golden), var(--dark-blue));
}
Typography
The typography was chosen to bring the fancy pillar in the system design. Similar to colors, it was applied to the rule of three to build the hierarchy of fonts to be used in most of applications. The font size can be adjusted to fit in the module project.
In order to use the typography, one can use the html elements by default. Given below is the list of the elements and the font-family used for each element with respective suggestions to font-size.
h1 {
font-family: 'Cinzel Decorative';
// font-size 32px for Applications
// font-size 24px for Dialog and Chat
}
h2, h3 {
font-family: 'Cinzel';
// font-size 20px for Applications
// font-size 16px for Dialog and Chat
}
h4, h5 {
font-family: 'Montserrat';
// font-size 16px for Applications
// font-size 16px for Dialog and Chat
}
p,
span,
textarea,
label,
select,
table,
fieldset legend,
input[type='text'],
input[type='number'],
input[type='search'],
li {
font-family: 'Montserrat';
// font-size 14px for Applications
// font-size 14px for Dialog and Chat
}
Applications Layouts
In this page we provide some guides to build the layouts to make usage and use as a reference for future applications modules. The header style in this system was changed to fit less space like the usual header in foundry applications.
Hence sometimes the header was changed to fit in this style by removing the title of header, keeping only the button controls, and moving them to an absolute position, so that the window content can get more space and use out of the available space. And in environments and loadout cards use case, it was to align the approach of a usual card system.
All golden lines represents the borders of each part, and should be added in the application as well with thickness of 1px and solid. Dashed lines represent the limit between the section inside of each application.
Dialogs Layout
Dialogs are usually left freely to the developers to choose the layout fit for the purpose of the module. But so must the rules here for styles.
They are different from the Applications Layouts where the header in dialogs have a title and a icon together, the icons used comes from https://fontawesome.com/ library, optionally one may not add the title in the header if the title inside the dialog is more than enough to describe.
Building a dialog
Here is a simple example to show how developers can build their own dialog using Foundryborne design system.
static async openDialog(_, button) {
const confirmed = await DialogV2.confirm({
window: {
title: 'Title',
icon: 'fa-solid fa-user'
},
content: 'content.hbs',
// 'daggerheart', 'dialog' and 'dh-style' must be included to styles work proprely
classes: ['daggerheart', 'dialog', 'dh-style', 'module']
});
if (!confirmed) return;
// ...
}
{{!-- content.hbs --}}
<section id="your-dialog-sectionn">
{{!-- you can include the title using coping this element --}}
<header class="dialog-header">
<h1>Dialog Title</h1>
</header>
{{!-- your content --}}
</section>