Customization

When overriding any default values in Doddle USS, it is recommended to create duplicate files of the current theme file hierarchy doddle-config.tss, doddle-palette.tss, and your theme file whether it is doddle-default.tss or not. The original files can be edited, but creating duplicates creates an update safe override that still inherits from Doddle USS' default values.

Utility Classes

To customize the utility class library, you can either create new classes manually, or use the utility class editor window.

Format

In the Utility Editor, classes are defined using the format:

• Class Name - The name of the class in the uss file
• Instances - The number of instances the class will be duplicated. The value will be incremented by value for each instance, and append the current value to the class name
• Name - The name of the property in the class such as margin
• Value - The value of the property in the class. This value will be incremented if instances > 1
• Unit - The unit of the value such as px/%

Example

In the example below, the class name will be .m-[value*instance] with the contents of margin: [value*instance]px. This will be repeated instance number of times. Instances 1 to 3 are displayed below.

USS

Steps

Editor performance for the utility editor window is poor since it regenerates all property foldouts for each class on save/restore/import/export. In editor performance improvements are planned for future updates.

• Open the Utility Editor by Window > Doddle USS > Utility Editor
  
• Edit any property already defined. The increment value per instance, class names, property values, etc. can be changed
• New properties can be added to existing defined classes by pressing the '+' button
  
• Existing properties and classes can be deleted from the library by pressing the garbage can button
  
• 'Update Utility.uss' will update doddle-utility.uss with the current changes overwriting values
• 'Restore Defaults' will discard any current and past changes completely reverting to Doddle USS defaults
• 'Export JSON' will take the current doddle-utility.uss and export to doddle-utility-export.json
• 'Import JSON' will discard any current and past changes completely overwriting doddle-utility.uss from the contents of doddle-utility-import.json
• 'Add New Utility' will add a new USS class entry, allowing you to expand the base Doddle USS utility class library. Changes will not be applied until the 'Update Utility.uss' button is pressed
  

Colour Palette

To customize the colour palette, it is recommended to create a duplicate of Doddle USS' doddle-palette.tss file. This creates an update safe override that still inherits from Doddle USS' default values.

• Create a new theme style sheet by Right Click/Assets > Create > UI Toolkit > TSS Theme File
• Copy the USS variables you wish to override from doddle-palette.tss, and change the values in the new theme style sheet
  
• Reference doddle-palette.tss in the 'Inherited Themes' field of the newly created theme file
• De-reference doddle-palette.tss in the 'Inherited Themes' field of doddle-default.tss
• Reference the newly created theme file in the 'Inherited Themes' field of doddle-default.tss

Config File

To customize the config file, it is recommended to create a duplicate of Doddle USS' doddle-config.tss file. This creates an update safe override that still inherits from Doddle USS' default values. The config theme file is where font assets, default values for transitions, header font size, border width, and border radius are defined.

• Create a new theme style sheet by Right Click/Assets > Create > UI Toolkit > TSS Theme File
• Copy the USS variables you wish to override from doddle-config.tss, and change the values in the new theme style sheet
  
• Reference doddle-config.tss in the 'Inherited Themes' field of the newly created theme file
• De-reference doddle-config.tss in the 'Inherited Themes' field of doddle-default.tss
• Reference the newly created theme file in the 'Inherited Themes' field of doddle-default.tss