First page

Start with the built files and ordinary markup.

WebBlocks does not need a special runtime or a component compiler. Include the built CSS and JS, write the HTML directly, and add behavior only where a page actually needs it.

Include

The smallest useful install looks like this.

Copy the built files into your project or point to the published build. Then begin with a simple component and a simple layout shell.

<link rel="stylesheet" href="dist/webblocks-ui.css">
<link rel="stylesheet" href="dist/webblocks-icons.css">
<script src="dist/webblocks-ui.js" defer></script>

Theme root

Set page-wide choices on the root element.

The theme engine reads attributes from <html>. Those choices remain visible in the DOM and can be updated later through buttons or the public API.

<html
  data-mode="dark"
  data-accent="forest"
  data-density="compact"
  data-radius="soft"
  data-shadow="flat"
  data-font="editorial">

Start with as few axes as possible. Add more only when the page needs a different tone.

First composition

Build a page from layout, then components.

A useful first step is a container, a section, a heading, and one or two real components. This keeps the structure obvious.

<section class="wb-section">
  <div class="wb-container wb-container-md wb-stack-4">
    <h1>Project settings</h1>
    <div class="wb-card">
      <div class="wb-card-body wb-stack-3">
        <input class="wb-input" type="text" placeholder="Project name">
        <button class="wb-btn wb-btn-primary">Save</button>
      </div>
    </div>
  </div>
</section>