Elements & Styling

Learn how to create elements and style them in your prototypes.

Element Syntax

Elements follow this pattern:

tag.class1.class2 attribute="value": "text content"

Examples

div:

Just a div

div.box:

Div with class "box"

div.card.large:

Multiple classes: "card large"

h1: "Hello World"

Element with text content

input placeholder="Email":

Input with placeholder attribute

Common Elements

[Form Example]
  form:
    input placeholder="Name":
    input type="email" placeholder="Email":
    input type="password" placeholder="Password":
    textarea placeholder="Message":
    select:
      option: "Option 1"
      option: "Option 2"
    button: "Submit"

Inline Styles

Add CSS styles directly using the style attribute:

[Styled Example]
  div style="padding: 24px; background: #f5f5f5;":
    h1 style="color: #333; font-size: 24px;": "Title"
    p style="color: #666; margin-top: 8px;": "Description text"
    button style="padding: 12px 24px; background: #000; color: #fff;": "Click Me"

Tip

Use inline styles for quick prototyping. The DSL is meant to be simple and readable, not a full CSS framework.

Layout Patterns

Common layout patterns using flexbox:

Horizontal Layout

div style="display: flex; gap: 8px;":
  button: "Cancel"
  button: "Save"

Centered Content

div style="display: flex; flex-direction: column; align-items: center; text-align: center;":
  h1: "Centered"
  p: "This is centered"

Sidebar Layout

div style="display: flex;":
  aside style="width: 200px; background: #f5f5f5;":
    nav: "Sidebar"
  main style="flex: 1; padding: 16px;":
    p: "Main content"