Skip to content
Teasim
TeaCSS documentation
StyleSheet

Site

Shared site framing and aligned content sections.

Shared site framing and aligned content sections. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • site, site-main, site-section, site-content, site-intro, site-grid, site-cell, site-rule

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<div class="site">
  <main class="site-main">
    <section class="site-section">
      <div class="site-content">
        <header class="site-intro"><h1>Build better products</h1></header>
        <div class="site-grid grid-columns:2@md">
          <article class="site-cell"><h2>Web</h2><p>Content for web products.</p></article>
          <article class="site-cell"><h2>Native</h2><p>Content for native products.</p></article>
        </div>
      </div>
    </section>
  </main>
</div>

Variants and composition

site-main/section/content share an aligned frame. site-intro, site-grid, site-cell, and site-rule extend it for page sections.

site has a minimum height of 100svh; a direct site-main fills the remaining height. Keep site-content directly inside site-section and leave that content wrapper unpadded. Pad its children instead so shared rails stay aligned. Color the ::before and ::after borders explicitly.

site-grid starts with one column; ordinary grid utilities choose more. Keep its direct site-cell children gapless and unspanned to preserve shared rules. A first grid inside site-section > site-content omits its top border; a last grid overlaps the bottom border by 1px. A standalone grid keeps its top rule.

site-intro has minimum height step 48, gap 5, padding 6, and padding 12 at md. site-rule is an empty band with minimum height step 3 and a bottom border; mark a purely decorative rule aria-hidden="true".

Behavior and accessibility

The inherited --site-content-width defaults to 80rem and --site-gutter to clamp(1rem, calc(18.75vw - 6rem), 3rem), capped locally at 25% per edge. Override them at the site frame instead of giving each section unrelated widths. Typography, colors, and text wrapping remain consumer choices.

Reference

See the interactive Storybook specimen. Continue to Stat or return to the Official preset overview.