Getting Started

The Branding Server is a tool designed to centralize the management of brand assets and generate CSS for your projects. The core workflow is as follows:

1. Create a Site: A Site is the top-level container, typically representing a project or a company. Use the "New Site" button in the sidebar to create one.
2. Add Brand Stylings: Within a Site, you can create multiple Brand Stylings. A Brand Styling is a specific collection of brand assets (e.g., "Default Theme", "Dark Mode Theme").
3. Manage Assets: In the Brand Styling view, you can define your brand's assets. This includes:
   • CSS Variables: Colors, Fonts, Dimensions (e.g., spacing, border-radius), and Images. These are stored as CSS custom properties (e.g., --main-bg-color: #ffffff;).
   • Selectors & Rules: Define specific CSS rules for selectors like .card or #header-nav. The application stores each declaration (e.g., color: red;) as a distinct asset linked to its parent selector.
4. Use the CSS: Each Brand Styling generates a dynamic CSS file. You can use the provided URL to link directly to this stylesheet in your web projects.

Key Concepts

Brand Inheritance

A powerful feature is the ability for one Brand Styling to inherit from another (a "Master" brand). This allows you to create variations of a base theme without redefining every asset.

• A sub-brand automatically inherits all assets from its master.
• You can override any inherited asset by defining an asset with the same name (for CSS variables) or the same selector and property (for CSS rules) in the sub-brand.
• The UI provides visual icons to indicate an asset's status:
  • link: Inherited from a master brand.
  • south_east: A local asset that is overriding a master asset.
  • north_west: A local asset that is being overridden by a more specific or important master asset.
• Inheritance is managed in the "Inheritance" section of the Brand Styling view by selecting a master brand from the dropdown menu.

Responsive Variants

For any CSS variable, you can create responsive variants. These allow a variable to have different values at different screen sizes or conditions (like light/dark mode).

• Variants are added to a specific asset by clicking the "Add variant" icon () on the asset's row.
• The available breakpoints in the "Add Variant" modal are dynamically populated from 'dimension' assets in the current styling that have "breakpoint" in their name.
• When a variant is created, the system generates the appropriate CSS @media query in the final stylesheet.

Deletion Operations

Deletion is a permanent action and cannot be undone.

• Delete Site: Clicking the "Delete Site" button in the Site view will delete the site, all of its Brand Stylings, and all associated assets.
• Delete Brand Styling: Clicking the "Delete" button in the Brand Styling view will delete the current styling and its assets.
• Delete Asset/Rule: Individual assets (like a color variable) or CSS rules within a selector can be deleted by clicking the delete icon () on their respective rows.
• Delete Selector Block: An entire selector block (e.g., .my-class { ... }) can be deleted by clicking the delete icon on the selector's header. This will remove all CSS rules contained within it.
• Delete Variant: A specific responsive variant can be deleted by clicking the delete icon next to it in the expanded variants section of an asset.

API Endpoints

The server exposes a RESTful API for managing all resources. The base URL is your server's address.

Sites

• GET /sites/: Retrieves a list of all sites.
• POST /sites/: Creates a new site.
• GET /sites/{site_id}: Retrieves details for a specific site.
• PUT /sites/{site_id}: Updates a specific site's details.
• DELETE /sites/{site_id}: Deletes a site and all its associated brand stylings and assets.

Brand Stylings

• GET /sites/{site_id}/brand-stylings/: Gets all brand stylings for a specific site.
• POST /sites/{site_id}/brand-stylings/: Creates a new brand styling within a site.
• GET /brand-stylings/{styling_id}: Retrieves details for a specific brand styling.
• PUT /brand-stylings/{styling_id}: Updates a brand styling, including its name, description, and master brand for inheritance.
• DELETE /brand-stylings/{styling_id}: Deletes a specific brand styling.

Assets & CSS

• GET /brand/{styling_id}/css: (Most Common) Returns the generated CSS file for a specific brand styling. This is the URL you link to in your projects.
• GET /brand-stylings/{styling_id}/assets-with-inheritance: Retrieves all assets for a styling, including full inheritance data (source, overridden status, etc.). This endpoint powers the main UI view.
• POST /brand-stylings/{styling_id}/assets/: Creates a new style asset (color, image, dimension, font, or CSS declaration).
• PUT /brand-stylings/{styling_id}/assets/{asset_id}: Updates an existing style asset.
• DELETE /brand-stylings/{styling_id}/assets/{asset_id}: Deletes a style asset.

Variants

• POST /brand-stylings/{styling_id}/assets/{asset_id}/variants/: Creates a new responsive variant for an asset.
• PUT /brand-stylings/{styling_id}/assets/{asset_id}/variants/{variant_id}: Updates an existing variant.
• DELETE /brand-stylings/{styling_id}/assets/{asset_id}/variants/{variant_id}: Deletes a variant.

Exports & Docs

• GET /brand/{styling_id}/export/{format}: Exports assets in different formats, such as json or scss.
• GET /brand/{styling_id}/docs: Generates and returns an HTML documentation page for the brand styling.

About

Branding Server 1.2.5
Copyright © Pete Steege Music, 2025. All rights reserved.

For more information visit: https://petesteege.com/dev