Learn Mode

IR Layout

Name: DaizLab
Author: Daiz

Define container size, grid behavior, and responsiveness.

Objective

Understand the layout object in IR1.1.

The layout object controls the page structure.

Container settings control maximum width and side spacing.

Grid tells DaizLab how sections should generally arrange content.

Responsive tells the engine the page should adapt to smaller screens.

Syntax

"layout": {
  "container": {
    "maxWidth": "1180px",
    "padding": "32px"
  },
  "grid": "mixed",
  "responsive": true
}

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

{
  "version": "1.1",
  "meta": {
    "title": "Layout Test",
    "description": "Testing layout behavior in IR1.1.",
    "businessName": "Lumic",
    "businessType": "electrical",
    "language": "en"
  },
  "brand": {
    "colors": {
      "primary": "#0a8f3d",
      "secondary": "#076a2d",
      "accent": "#f2d21b",
      "background": "#ffffff",
      "text": "#111111",
      "muted": "#666666"
    },
    "typography": {
      "heading": "Arial, Helvetica, sans-serif",
      "body": "Arial, Helvetica, sans-serif"
    },
    "vibe": "corporate"
  },
  "layout": {
    "container": {
      "maxWidth": "1120px",
      "padding": "32px"
    },
    "grid": "three-column",
    "responsive": true
  },
  "sections": [
    {
      "id": "services",
      "type": "services",
      "badge": "SERVICES",
      "headline": "Layout controls how service cards arrange.",
      "items": [
        {
          "title": "Electrical Works",
          "description": "Professional electrical installation and maintenance."
        },
        {
          "title": "Solar Inverter",
          "description": "Power backup and solar installation."
        },
        {
          "title": "CCTV Security",
          "description": "Camera installation and security monitoring setup."
        }
      ]
    }
  ],
  "actions": {
    "primary": {
      "label": "Contact Us",
      "type": "link",
      "value": "#",
      "style": "primary"
    }
  },
  "output": {
    "targets": ["html", "css", "previewHtml"]
  }
}

Notes

The current compiler uses a practical responsive grid.

Later versions can make grid behavior more advanced.

Common Mistakes

Using numbers instead of CSS strings like 1180px.

Setting responsive to a string instead of boolean true or false.

← Previous

Learn Mode

IR Layout

Define container size, grid behavior, and responsiveness.

Objective

Understand the layout object in IR1.1.

The layout object controls the page structure.

Container settings control maximum width and side spacing.

Grid tells DaizLab how sections should generally arrange content.

Responsive tells the engine the page should adapt to smaller screens.

Syntax

"layout": {
  "container": {
    "maxWidth": "1180px",
    "padding": "32px"
  },
  "grid": "mixed",
  "responsive": true
}

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

Notes

The current compiler uses a practical responsive grid.

Later versions can make grid behavior more advanced.

Common Mistakes

Using numbers instead of CSS strings like 1180px.

Setting responsive to a string instead of boolean true or false.

← Previous

INITIALIZING DAIZLAB

System Progress14%

[~]Loading interface systems

[ ]Connecting workspace modules

[ ]Preparing authoring environment

Learn Mode

IR Layout

Define container size, grid behavior, and responsiveness.

Objective

Understand the layout object in IR1.1.

The layout object controls the page structure.

Container settings control maximum width and side spacing.

Grid tells DaizLab how sections should generally arrange content.

Responsive tells the engine the page should adapt to smaller screens.

Syntax

"layout": {
  "container": {
    "maxWidth": "1180px",
    "padding": "32px"
  },
  "grid": "mixed",
  "responsive": true
}

Practice Editor

Temporary only. No local save. No cloud save. No compile quota used.

Notes

The current compiler uses a practical responsive grid.

Later versions can make grid behavior more advanced.

Common Mistakes

Using numbers instead of CSS strings like 1180px.

Setting responsive to a string instead of boolean true or false.

← Previous