Design Tools

Horuph Studio Usage Guide Version 1.0.0

What It Is

Design Tools is a small library for managing reusable building blocks for your site: Page Blocks, Scripts, and Style Sheets.

Where It Applies

• Scripts and Style Sheets written here are available across all content pages.
• Page Blocks can be inserted anywhere an admin builds or edits a page.
• Blocks from addons can also appear and can be mixed with your blocks to build the site layout and appearance.

Tabs

Page Blocks

• Create reusable page fragments (sections, widgets, snippets, layouts).
• Use them to assemble pages faster and keep the design consistent.
• Blocks can include plain HTML, and (if supported in your system) PHP snippets for dynamic output.

Scripts

• Add global JavaScript used by your content pages (UI behavior, tracking, custom interactions).
• Keep scripts small and scoped to avoid affecting unrelated pages.

Style Sheets

• Add global CSS that styles your content pages (typography, layout helpers, custom components).
• Prefer class-based styling and avoid aggressive global selectors that can break core UI.

How To Use

1. Select a file to edit from the tab you want (Page Blocks / Scripts / Style Sheets).
2. Or click New to create a new file.
3. Write or paste your content, then click Save.
4. Cancel discards your current edits.

Editor Modes

• Some editors support switching between a normal editor and a “source/code” view.
• If you write PHP inside a block, make sure it stays valid (open/close tags, quotes, semicolons).

Best Practices

• Name things clearly: use predictable names so you can find them later (e.g. header, product-card, forms).
• Scope your CSS: prefer unique class prefixes (e.g. .hrph-*) and avoid styling bare tags globally.
• Scope your JS: attach behavior to specific selectors and guard against missing elements.
• Performance: keep global scripts/styles minimal. Heavy code runs on every page.
• Safety: don’t put secrets (API keys, passwords) in scripts/blocks.

Troubleshooting

• If a page breaks after saving: revert the last change (Cancel/confirm, or edit the file and remove the latest lines).
• If JS isn’t running: check the browser console for errors, and ensure your code runs after the page loads.
• If CSS doesn’t apply: confirm selector scope and that your classes are actually used in the page/block.