Layouts

The UIKit provides several layout components to help structure your experiment views consistently.

TwoCol

A responsive two-column layout component that stacks columns vertically on mobile and arranges them horizontally on larger screens.

Props

• leftFirst - Boolean: Whether the left column appears first on mobile (default: false)
• leftWidth - String: Tailwind width class for the left column (default: 'w-1/3'). The leftWidth prop accepts classes like w-1/4 (25%), w-1/3 (33%, default), w-2/5 (40%), w-1/2 (50%), w-3/5 (60%), w-2/3 (67%), or w-3/4 (75%)
• responsiveUI - Boolean: Whether to use responsive layout behavior (default: true)
• class - String: Additional CSS classes to apply to the container

Example

<script setup>
import { TwoCol } from '@/uikit/layouts'
</script>

<template>
  <TwoCol leftWidth="w-1/2" leftFirst class="custom-styles">
    <template #left>
      <!-- Left column content -->
    </template>
    <template #right>
      <!-- Right column content -->
    </template>
  </TwoCol>
</template>

Responsive two-column layout with configurable left width

Left column content

Right column content

Here is an example using a different width for the left column, and the right column goes on top when the layout is compressed:

Responsive two-column layout with configurable left width

Left column content

Right column content

TitleTwoCol

Similar to TwoCol but includes an additional title slot above the columns.

Props and Slots

Same as TwoCol, plus:

• All TwoCol props (leftFirst, leftWidth, responsiveUI, class)
• Additional title slot for header content

Usage

<script setup>
import { TitleTwoCol } from '@/uikit/layouts'
</script>

<template>
  <TitleTwoCol leftWidth="w-1/3" leftFirst class="custom-styles">
    <template #title>
      <!-- Title content -->
    </template>
    <template #left>
      <!-- Left column content -->
    </template>
    <template #right>
      <!-- Right column content -->
    </template>
  </TitleTwoCol>
</template>

Two-column layout with title section

Title

Left column content

Right column content

This shows what happens when the right column is first.

Two-column layout with right column first

Title

Left column content

Right column content

ConstrainedTaskWindow

A constrained task window is a layout component that is used to constrain the task window to a certain width and height frame. Ideal for use in a game where you don't need a lot of scrolling.

Props and Slots

• width - Number: Width of the task window in pixels (default: 800)
• height - Number: Height of the task window in pixels (default: 600)
• variant - String: The visual style variant can be default, ghost, game, or outline (default: 'default')
• responsiveUI - Boolean: Whether the task window is responsive (default: true)
• class - String: Additional CSS classes to apply to the container

The responsiveUI prop is used to control whether the task window is responsive or not. If it is responsive, the task window will be resized to fit the screen. If it is not responsive, the task window will be fixed at the width and height specified (forcing the browser to scroll).

Usage

<script setup>
import { ConstrainedTaskWindow } from '@/uikit/layouts'
</script>

<template>
  <ConstrainedTaskWindow
    variant="ghost"
    :responsiveUI="true"
    :width="500"
    :height="400"
    class="custom-styles"
  >
    <!-- Content -->
  </ConstrainedTaskWindow>
</template>

Props

Constrained task window with ghost variant and responsive UI

Content

This shows the constrained task window with responsive UI disabled:

Constrained task window with game variant and responsive UI disabled

Content

ConstrainedPage

The ConstrainedPage layout constrains content to specific width and height dimensions, making it ideal for experiments that require consistent sizing across different screens and devices.

Props

• width - Number: Width of the page in pixels (default: 800)
• height - Number: Height of the page in pixels (default: 600)
• responsiveUI - Boolean: Whether to use responsive layout behavior (default: true)
• class - String: Additional CSS classes to apply

Responsive Behavior

When responsiveUI is true (default), the layout uses responsive dimensions:

• Width: 90vw with maxWidth set to the width prop
• Height: minHeight and maxHeight set to the height prop

When responsiveUI is false, the layout uses fixed dimensions:

• Width: Exact pixel value from width prop (fixed)
• Height: Exact pixel value from height prop (fixed)

Usage

<script setup>
import { ConstrainedPage } from '@/uikit/layouts'
</script>

<template>
  <ConstrainedPage :width="800" :height="600" :responsiveUI="true">
    <!-- Your experiment content -->
  </ConstrainedPage>
</template>

Responsive constrained page layout

ConstrainedPage (600x400, Responsive)

Here's an example with responsiveUI disabled for fixed sizing:

Fixed size constrained page layout

ConstrainedPage (500x300, Fixed)

CenteredContent

The CenteredContent layout provides a simple way to center content both horizontally and vertically within its container. It applies consistent margins and centering behavior.

Props

• class - String: Additional CSS classes to apply to the container

Usage

<script setup>
import { CenteredContent } from '@/uikit/layouts'
</script>

<template>
  <CenteredContent>
    <!-- Your centered content -->
  </CenteredContent>
</template>

Simple centered content layout

Centered Content