or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

base.md components.md customization.md elements.md form.md grid.md helpers.md index.md layout.md

tile.json

Layout Components

Page structure components including containers, sections, heroes, and other layout elements for organizing content and creating consistent page layouts.

Capabilities

Container

Centered content container with responsive max-widths for different screen sizes.

/**
 * Import container styles
 */
@use 'bulma/sass/layout/container';

<!-- Basic container -->
<div class="container">
  <p>Centered content with responsive max-width.</p>
</div>

<!-- Fluid container -->
<div class="container is-fluid">
  <p>Full width container with padding.</p>
</div>

<!-- Responsive containers -->
<div class="container is-widescreen">
  <p>Container that only activates on widescreen and larger.</p>
</div>

<div class="container is-fullhd">
  <p>Container that only activates on fullhd and larger.</p>
</div>

<!-- Container in context -->
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Container inside hero</h1>
    </div>
  </div>
</section>

Container Breakpoints:

/* Default container max-widths */
.container {
  /* Mobile: 100% width with padding */
  /* Tablet: 96% max-width, min 768px */
  /* Desktop: 960px max-width */
  /* Widescreen: 1152px max-width */
  /* FullHD: 1344px max-width */
}

/* Responsive container modifiers */
.container.is-widescreen  /* Only applies on widescreen+ */
.container.is-fullhd      /* Only applies on fullhd+ */
.container.is-fluid       /* Always full width with padding */

Section

Content sections with consistent vertical spacing for page structure.

/**
 * Import section styles
 */
@use 'bulma/sass/layout/section';

<!-- Basic section -->
<section class="section">
  <div class="container">
    <h1 class="title">Section Title</h1>
    <p>Section content with consistent padding.</p>
  </div>
</section>

<!-- Section sizes -->
<section class="section is-small">
  <div class="container">
    <p>Small section with reduced padding.</p>
  </div>
</section>

<section class="section is-medium">
  <div class="container">
    <p>Medium section with increased padding.</p>
  </div>
</section>

<section class="section is-large">
  <div class="container">
    <p>Large section with maximum padding.</p>
  </div>
</section>

<!-- Multiple sections -->
<section class="section">
  <div class="container">
    <h2 class="title is-2">First Section</h2>
    <p>First section content.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="title is-2">Second Section</h2>
    <p>Second section content.</p>
  </div>
</section>

Hero

Large header sections for showcasing content with optional background images and colors.

/**
 * Import hero styles
 */
@use 'bulma/sass/layout/hero';

<!-- Basic hero -->
<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero Title</h1>
      <h2 class="subtitle">Hero subtitle</h2>
    </div>
  </div>
</section>

<!-- Hero colors -->
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Primary Hero</h1>
      <h2 class="subtitle">With primary color background</h2>
    </div>
  </div>
</section>

<section class="hero is-info"><!-- Info colored hero --></section>
<section class="hero is-success"><!-- Success colored hero --></section>
<section class="hero is-warning"><!-- Warning colored hero --></section>
<section class="hero is-danger"><!-- Danger colored hero --></section>
<section class="hero is-dark"><!-- Dark colored hero --></section>
<section class="hero is-light"><!-- Light colored hero --></section>

<!-- Hero sizes -->
<section class="hero is-small">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Small Hero</h1>
    </div>
  </div>
</section>

<section class="hero is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Medium Hero</h1>
    </div>
  </div>
</section>

<section class="hero is-large">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Large Hero</h1>
    </div>
  </div>
</section>

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Full Height Hero</h1>
      <h2 class="subtitle">Takes full viewport height</h2>
    </div>
  </div>
</section>

<!-- Hero with head and foot -->
<section class="hero is-primary is-large">
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">Brand</a>
        </div>
        <div class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item">Home</a>
            <a class="navbar-item">About</a>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero with Navigation</h1>
      <h2 class="subtitle">Including header and footer sections</h2>
    </div>
  </div>

  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

<!-- Hero with background image -->
<section class="hero is-large" style="background-image: url('hero-bg.jpg'); background-size: cover; background-position: center;">
  <div class="hero-body">
    <div class="container">
      <h1 class="title has-text-white">Hero with Background</h1>
      <h2 class="subtitle has-text-white">Custom background image</h2>
    </div>
  </div>
</section>

Level

Horizontal alignment utility for distributing elements across available space.

/**
 * Import level styles
 */
@use 'bulma/sass/layout/level';

<!-- Basic level -->
<nav class="level">
  <div class="level-left">
    <div class="level-item">
      <p class="subtitle is-5">
        <strong>123</strong> posts
      </p>
    </div>
    <div class="level-item">
      <div class="field has-addons">
        <p class="control">
          <input class="input" type="text" placeholder="Find a post">
        </p>
        <p class="control">
          <button class="button">Search</button>
        </p>
      </div>
    </div>
  </div>

  <div class="level-right">
    <p class="level-item"><strong>All</strong></p>
    <p class="level-item"><a>Published</a></p>
    <p class="level-item"><a>Drafts</a></p>
    <p class="level-item"><a>Deleted</a></p>
    <p class="level-item"><a class="button is-success">New</a></p>
  </div>
</nav>

<!-- Simple level -->
<nav class="level">
  <p class="level-item has-text-centered">
    <a class="link is-info">Home</a>
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Menu</a>
  </p>
  <p class="level-item has-text-centered">
    <img src="logo.png" alt="Logo" style="height: 30px;">
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Reservations</a>
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Contact</a>
  </p>
</nav>

<!-- Mobile level -->
<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Tweets</p>
      <p class="title">3,456</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Following</p>
      <p class="title">123</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Followers</p>
      <p class="title">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Likes</p>
      <p class="title">1,234</p>
    </div>
  </div>
</nav>

Media Object

Layout pattern for aligning media (images, videos) with textual content.

/**
 * Import media object styles
 */
@use 'bulma/sass/layout/media';

<!-- Basic media object -->
<article class="media">
  <figure class="media-left">
    <p class="image is-64x64">
      <img src="avatar.jpg" alt="Avatar">
    </p>
  </figure>
  <div class="media-content">
    <div class="content">
      <p>
        <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
      </p>
    </div>
    <nav class="level is-mobile">
      <div class="level-left">
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-reply"></i></span>
        </a>
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-retweet"></i></span>
        </a>
        <a class="level-item">
          <span class="icon is-small"><i class="fas fa-heart"></i></span>
        </a>
      </div>
    </nav>
  </div>
  <div class="media-right">
    <button class="delete"></button>
  </div>
</article>

<!-- Nested media objects -->
<article class="media">
  <figure class="media-left">
    <p class="image is-64x64">
      <img src="avatar1.jpg" alt="Avatar">
    </p>
  </figure>
  <div class="media-content">
    <div class="content">
      <p>
        <strong>Barbara Middleton</strong>
        <br>
        Original post content here.
      </p>
    </div>

    <!-- Nested media -->
    <article class="media">
      <figure class="media-left">
        <p class="image is-48x48">
          <img src="avatar2.jpg" alt="Avatar">
        </p>
      </figure>
      <div class="media-content">
        <div class="content">
          <p>
            <strong>Sean Brown</strong>
            <br>
            Nested reply to the original post.
          </p>
        </div>
      </div>
    </article>

    <!-- Another nested media -->
    <article class="media">
      <figure class="media-left">
        <p class="image is-48x48">
          <img src="avatar3.jpg" alt="Avatar">
        </p>
      </figure>
      <div class="media-content">
        <div class="content">
          <p>
            <strong>Kayli Eunice</strong>
            <br>
            Another nested reply.
          </p>
        </div>
      </div>
    </article>
  </div>
</article>

Footer

Page footer styling for bottom page content.

/**
 * Import footer styles
 */
@use 'bulma/sass/layout/footer';

<!-- Basic footer -->
<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. 
      The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
    </p>
  </div>
</footer>

<!-- Footer with columns -->
<footer class="footer">
  <div class="container">
    <div class="columns">
      <div class="column">
        <h3 class="title is-5">Company</h3>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Careers</a></li>
        </ul>
      </div>
      <div class="column">
        <h3 class="title is-5">Products</h3>
        <ul>
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
        </ul>
      </div>
      <div class="column">
        <h3 class="title is-5">Support</h3>
        <ul>
          <li><a href="#">Help Center</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Documentation</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

<!-- Minimal footer -->
<footer class="footer">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <p>&copy; 2024 Company Name</p>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <a href="#">Privacy</a>
        </div>
        <div class="level-item">
          <a href="#">Terms</a>
        </div>
      </div>
    </div>
  </div>
</footer>

Complete Layout Example

<!-- Full page layout structure -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
</head>
<body>
  <!-- Hero header -->
  <section class="hero is-primary">
    <div class="hero-head">
      <nav class="navbar">
        <div class="container">
          <!-- Navigation content -->
        </div>
      </nav>
    </div>
    <div class="hero-body">
      <div class="container">
        <h1 class="title">Welcome</h1>
        <h2 class="subtitle">Your site tagline</h2>
      </div>
    </div>
  </section>

  <!-- Main content sections -->
  <section class="section">
    <div class="container">
      <h2 class="title is-2">Main Content</h2>
      <div class="columns">
        <div class="column is-two-thirds">
          <div class="content">
            <p>Main content area</p>
          </div>
        </div>
        <div class="column">
          <aside class="menu">
            <p class="menu-label">Navigation</p>
            <ul class="menu-list">
              <li><a>Sidebar item</a></li>
            </ul>
          </aside>
        </div>
      </div>
    </div>
  </section>

  <section class="section is-light">
    <div class="container">
      <h2 class="title is-2">Secondary Content</h2>
      <p>Additional content section</p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="content has-text-centered">
        <p>Footer content</p>
      </div>
    </div>
  </footer>
</body>
</html>