CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-bulma

Modern CSS framework based on Flexbox

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

layout.mddocs/

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>

Install with Tessl CLI

npx tessl i tessl/npm-bulma

docs

base.md

components.md

customization.md

elements.md

form.md

grid.md

helpers.md

index.md

layout.md

tile.json