Pages

Use q-page on the main content container for a screen. It provides responsive horizontal padding, centers the content, and keeps wide screens readable.

<div class="q-page">
  <h1>Settings</h1>
  <p>Page content goes here.</p>
</div>

With QLayout

QLayout handles app bars, drawers, railbars, and footers. Put q-page inside the content area so the page itself owns the page width and spacing.

<QLayout view="hHh Lpr fFf">
  {#snippet header()}
    <QHeader>App title</QHeader>
  {/snippet}

  {#snippet content()}
    <div class="q-page">
      <h1>Dashboard</h1>
    </div>
  {/snippet}
</QLayout>

Sizing and Units

Text follows your browser's font size. Spacing and icons keep their size, while controls grow to fit larger text. Changing the root --size adjusts text without scaling the whole layout.

Use rem for text and em for sizes that follow nearby text. Keep design spacing in pixels, or use Quaff's spacing classes. Numeric sizing props use pixels; props that accept CSS lengths keep the unit you provide.

Page Grid

Combine q-page with the row and column classes when a page needs responsive sections.

<div class="q-page">
  <div class="row q-col-gutter-md">
    <section class="col-xs-12 col-md-8">Main content</section>
    <aside class="col-xs-12 col-md-4">Side content</aside>
  </div>
</div>