Getting started

Install b-style, load the stylesheet, and use the b- class prefix.

b-style is a Bulma-based theme with a custom b- prefix on all classes. Breakpoints: tablet 768px, desktop 1152px, touch below 1152px. Set data-b-theme="light" or "dark" on <html>.

CSS: link dist/b-style.css or the minified build.
SCSS: @use "b-style/bulma" as *; in your Sass entry.
Alpine (optional): dist/alpine.js includes bundled plugins.

Install

npm install github:aavendano/b-style

CSS

<link rel="stylesheet" href="node_modules/b-style/dist/b-style.min.css">

SCSS

@use "b-style/bulma" as *;

Theme

<html lang="en" data-b-theme="light">
  <!-- Toggle: document.documentElement.setAttribute('data-b-theme', 'dark') -->
</html>

Typography

Fluid Major Third scale exposed through b-style typography helpers.

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox

Heading 3 - The quick brown fox

Heading 4 - The quick brown fox

Body text uses the primary family from b-style. Pack my box with five dozen liquor jugs.

Small text and captions inherit the same theme tokens.

Title with .b-title

Subtitle with .b-subtitle

is-1 - XL

is-2 - L

is-3 - M

is-4 - S

is-5 - XS

is-6 - Normal

Light 300 Normal 400 Semibold 600 Bold 700

Semantic content

<div class="b-content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <p>Body text paragraph.</p>
  <p><small>Small caption text.</small></p>
</div>

Title sizes

<p class="b-title">Title with .b-title</p>
<p class="b-subtitle">Subtitle with .b-subtitle</p>
<p class="b-title b-is-1">is-1 - XL</p>
<p class="b-title b-is-2">is-2 - L</p>
<p class="b-title b-is-3">is-3 - M</p>
<p class="b-title b-is-4">is-4 - S</p>
<p class="b-title b-is-5">is-5 - XS</p>
<p class="b-title b-is-6">is-6 - Normal</p>

Colors

Color tokens shown through b-style tags, notifications, and helper classes.

primary link info success warning danger dark light

Primary background

Info background

Success background

Color tags and backgrounds

<span class="b-tag b-is-primary">primary</span>
<span class="b-tag b-is-link">link</span>
<span class="b-tag b-is-info">info</span>
<span class="b-tag b-is-success">success</span>
<span class="b-tag b-is-warning">warning</span>
<span class="b-tag b-is-danger">danger</span>
<span class="b-tag b-is-dark">dark</span>
<span class="b-tag b-is-light">light</span>

<div class="b-box b-has-background-primary b-has-text-primary-invert">Primary background</div>
<div class="b-box b-has-background-info b-has-text-info-invert">Info background</div>
<div class="b-box b-has-background-success b-has-text-success-invert">Success background</div>

Elements

Standalone primitives available in b-style.

Buttons

Button colors

<div class="b-buttons">
  <button class="b-button">Default</button>
  <button class="b-button b-is-primary">Primary</button>
  <button class="b-button b-is-link">Link</button>
  <button class="b-button b-is-info">Info</button>
  <button class="b-button b-is-success">Success</button>
  <button class="b-button b-is-warning">Warning</button>
  <button class="b-button b-is-danger">Danger</button>
  <button class="b-button b-is-dark">Dark</button>
  <button class="b-button b-is-light">Light</button>
</div>

Button modifiers

<div class="b-buttons">
  <button class="b-button b-is-primary b-is-outlined">Outlined</button>
  <button class="b-button b-is-primary b-is-light">Light</button>
  <button class="b-button b-is-primary b-is-rounded">Rounded</button>
  <button class="b-button b-is-info b-is-loading">Loading</button>
  <button class="b-button" disabled>Disabled</button>
  <button class="b-button b-is-text">Text</button>
  <button class="b-button b-is-ghost">Ghost</button>
</div>

Button sizes

<div class="b-buttons">
  <button class="b-button b-is-small">Small</button>
  <button class="b-button">Normal</button>
  <button class="b-button b-is-medium">Medium</button>
  <button class="b-button b-is-large">Large</button>
</div>

Success - The operation completed successfully.

Warning - Review this item before continuing.

Danger - An error occurred. Try again.

Info - Additional information relevant to the user.

Notifications

<div class="b-notification b-is-primary">
  <button class="b-delete"></button>
  <strong>Primary</strong> - General-purpose informational notification.
</div>
<div class="b-notification b-is-success">
  <button class="b-delete"></button>
  <strong>Success</strong> - The operation completed successfully.
</div>
<div class="b-notification b-is-warning">
  <button class="b-delete"></button>
  <strong>Warning</strong> - Review this item before continuing.
</div>
<div class="b-notification b-is-danger">
  <button class="b-delete"></button>
  <strong>Danger</strong> - An error occurred. Try again.
</div>
<div class="b-notification b-is-info">
  <button class="b-delete"></button>
  <strong>Info</strong> - Additional information relevant to the user.
</div>

Messages

Information

This is an informational message. It can contain rich content and links.

Success

The data was saved successfully in the system.

Warning

You are about to delete a record. This action cannot be undone.

Error

A validation error occurred. Check the form fields.

Messages

<div class="b-message b-is-info">
  <div class="b-message-header">
    <p>Information</p>
    <button class="b-delete" aria-label="delete"></button>
  </div>
  <div class="b-message-body">
    This is an informational message. It can contain <strong>rich content</strong> and <a href="#">links</a>.
  </div>
</div>

<div class="b-message b-is-success">
  <div class="b-message-header"><p>Success</p></div>
  <div class="b-message-body">The data was saved successfully in the system.</div>
</div>

Progress Bars

70% 55% 85% 40% 25% Small Medium Large Loading

Progress bars

<progress class="b-progress b-is-primary" value="70" max="100">70%</progress>
<progress class="b-progress b-is-info" value="55" max="100">55%</progress>
<progress class="b-progress b-is-success" value="85" max="100">85%</progress>
<progress class="b-progress b-is-primary b-is-small" value="70" max="100">Small</progress>
<progress class="b-progress b-is-primary b-is-medium" value="70" max="100">Medium</progress>
<progress class="b-progress b-is-primary b-is-large" value="70" max="100">Large</progress>
<progress class="b-progress b-is-primary b-is-small">Loading</progress>

Box

Box title

This is content inside a .b-box component.

Box

<div class="b-box">
  <p class="b-title b-is-4">Box title</p>
  <p>This is content inside a <code>.b-box</code> component.</p>
  <div class="b-buttons">
    <button class="b-button b-is-primary">Action</button>
    <button class="b-button b-is-outlined">Cancel</button>
  </div>
</div>

Title and Subtitle

Title

Subtitle that accompanies the main title

Title is-3

Subtitle is-5

Title and subtitle

<p class="b-title">Title</p>
<p class="b-subtitle">Subtitle that accompanies the main title</p>

<p class="b-title b-is-3">Title is-3</p>
<p class="b-subtitle b-is-5">Subtitle is-5</p>

Components

Composite components and structured UI patterns.

Cards

Complete card

Card content can include text, images, forms, and other components.

Second paragraph with more relevant information.

Metrics

Users

1,240

Sessions

3,872

Rate

68%

Complete card

<div class="b-card">
  <div class="b-card-header">
    <p class="b-card-header-title">Complete card</p>
    <button class="b-card-header-icon" aria-label="more options">
      <span class="b-icon">...</span>
    </button>
  </div>
  <div class="b-card-content">
    <div class="b-content">
      <p>Card content can include text, images, forms, and other components.</p>
    </div>
  </div>
  <footer class="b-card-footer">
    <a href="#" class="b-card-footer-item">Edit</a>
    <a href="#" class="b-card-footer-item">Duplicate</a>
    <a href="#" class="b-card-footer-item b-has-text-danger">Delete</a>
  </footer>
</div>

Metrics card

<div class="b-card">
  <div class="b-card-header">
    <p class="b-card-header-title">Metrics</p>
  </div>
  <div class="b-card-content">
    <div class="b-level b-is-mobile">
      <div class="b-level-item b-has-text-centered">
        <div>
          <p class="b-heading">Users</p>
          <p class="b-title">1,240</p>
        </div>
      </div>
    </div>
    <progress class="b-progress b-is-success b-is-small" value="68" max="100">68%</progress>
  </div>
</div>

Tables

Product	Category	Price	Status
Laptop Pro 15"	Electronics	$1,299.00	Active	Edit
Mechanical keyboard	Peripherals	$149.00	Active	Edit
Monitor 4K 27"	Monitors	$499.00	Pending	Edit
BT Headphones	Audio	$89.00	Inactive	Edit

Table

<div class="b-table-container">
  <table class="b-table b-is-striped b-is-hoverable b-is-fullwidth">
    <thead>
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>Price</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>Laptop Pro 15"</strong></td>
        <td>Electronics</td>
        <td>$1,299.00</td>
        <td><span class="b-tag b-is-success b-is-light">Active</span></td>
        <td><a class="b-button b-is-small b-is-primary b-is-outlined">Edit</a></td>
      </tr>
    </tbody>
  </table>
</div>

Forms

Full name

Email address

Email verified successfully.

Password

The password must be at least 8 characters long.

Dashboard
Reports
Users
Settings

Monthly
Quarterly
Yearly

Tabs

<div class="b-tabs">
  <ul>
    <li class="b-is-active"><a>Home</a></li>
    <li><a>Profile</a></li>
  </ul>
</div>

<div class="b-tabs b-is-boxed">
  <ul>
    <li class="b-is-active"><a>Dashboard</a></li>
    <li><a>Reports</a></li>
  </ul>
</div>

<div class="b-tabs b-is-toggle b-is-toggle-rounded">
  <ul>
    <li class="b-is-active"><a>Monthly</a></li>
    <li><a>Quarterly</a></li>
  </ul>
</div>

Breadcrumb

<nav class="b-breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Store</a></li>
    <li class="b-is-active"><a href="#" aria-current="page">Laptop Pro 15"</a></li>
  </ul>
</nav>

<nav class="b-breadcrumb b-has-arrow-separator" aria-label="breadcrumbs">...</nav>
<nav class="b-breadcrumb b-has-bullet-separator" aria-label="breadcrumbs">...</nav>

Panel

Repositories

All Public Private

b-style b-components b-tokens Only with recent activity

Recent activity

Merge #42 - feature/typography PR #41 opened - fix/navbar Build failed - deploy/staging Release v0.1.0 published

Panel

<div class="b-panel b-is-primary">
  <p class="b-panel-heading">Repositories</p>
  <div class="b-panel-block">
    <div class="b-control b-is-expanded">
      <input class="b-input b-is-small" type="search" placeholder="Search" />
    </div>
  </div>
  <p class="b-panel-tabs">
    <a class="b-is-active">All</a>
    <a>Public</a>
    <a>Private</a>
  </p>
  <a class="b-panel-block b-is-active">b-style</a>
  <a class="b-panel-block">b-components</a>
</div>

Navbar

<nav class="b-navbar" role="navigation" aria-label="demo navigation">
  <div class="b-navbar-brand">
    <a class="b-navbar-item" href="#"><strong>b-style</strong></a>
    <a role="button" class="b-navbar-burger" aria-label="menu" aria-expanded="false">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
  <div class="b-navbar-menu">
    <div class="b-navbar-start">
      <a class="b-navbar-item b-is-active">Home</a>
      <a class="b-navbar-item">Documentation</a>
      <div class="b-navbar-item b-has-dropdown b-is-hoverable">
        <a class="b-navbar-link">More</a>
        <div class="b-navbar-dropdown">
          <a class="b-navbar-item">About us</a>
        </div>
      </div>
    </div>
    <div class="b-navbar-end">
      <div class="b-navbar-item">
        <a class="b-button b-is-primary">Sign up</a>
      </div>
    </div>
  </div>
</nav>

Layout

Layout primitives from b-style.

Columns

.b-column

is-three-quarters

auto

is-half

auto

Columns

<div class="b-columns b-is-multiline">
  <div class="b-column"><div class="b-box">.b-column</div></div>
  <div class="b-column"><div class="b-box">.b-column</div></div>
</div>

<div class="b-columns b-is-multiline">
  <div class="b-column b-is-three-quarters"><div class="b-box">is-three-quarters</div></div>
  <div class="b-column"><div class="b-box">auto</div></div>
</div>

<div class="b-columns b-is-multiline">
  <div class="b-column b-is-half"><div class="b-box">is-half</div></div>
  <div class="b-column"><div class="b-box">auto</div></div>
</div>

Section and Hero

b-style design system

Built on Bulma with fluid typography.

Dark hero

Components inherit light and dark theme tokens.

Hero

<section class="b-hero b-is-info b-is-small">
  <div class="b-hero-body">
    <p class="b-title">b-style design system</p>
    <p class="b-subtitle">Built on Bulma with fluid typography.</p>
  </div>
</section>

<section class="b-hero b-is-dark b-is-small">
  <div class="b-hero-body">
    <p class="b-title">Dark hero</p>
    <p class="b-subtitle">Components inherit light and dark theme tokens.</p>
  </div>
</section>

Helpers

Utility classes for typography, color, spacing, and layout.

.b-has-text-left - Text aligned to the left.

.b-has-text-centered - Centered text.

.b-has-text-right - Text aligned to the right.

text in capitalize

text in uppercase

TEXT IN LOWERCASE

text in italics

underlined text

Light (300) - The quick brown fox

Normal (400) - The quick brown fox

Medium (500) - The quick brown fox

Semibold (600) - The quick brown fox

Bold (700) - The quick brown fox

Extrabold (800) - The quick brown fox

primary text

link text

info text

success text

warning text

danger text

dark text

grey text

Helper classes

<p class="b-has-text-left">Text aligned to the left.</p>
<p class="b-has-text-centered">Centered text.</p>
<p class="b-has-text-right">Text aligned to the right.</p>

<p class="b-is-capitalized">text in capitalize</p>
<p class="b-is-uppercase">text in uppercase</p>
<p class="b-is-italic">text in italics</p>

<p class="b-has-text-weight-light">Light (300)</p>
<p class="b-has-text-weight-bold">Bold (700)</p>

<p class="b-has-text-primary">primary text</p>
<p class="b-has-text-success">success text</p>
<p class="b-has-text-danger">danger text</p>

Getting started

Typography

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox

Heading 3 - The quick brown fox

Heading 4 - The quick brown fox

Colors

Elements

Buttons

Tags

Notifications

Messages

Progress Bars

Box

Title and Subtitle

Components

Cards

Tables

Forms

Tabs

Breadcrumb

Panel

Navbar

Layout

Columns

Section and Hero

Helpers