or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

base.mdcomponents.mdcustomization.mdelements.mdform.mdgrid.mdhelpers.mdindex.mdlayout.md
tile.json

tessl/npm-bulma

Modern CSS framework based on Flexbox

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bulma@1.0.x

To install, run

npx @tessl/cli install tessl/npm-bulma@1.0.0

index.mddocs/

Bulma

Bulma is a modern CSS framework based on Flexbox that provides a comprehensive set of responsive, mobile-first CSS components and utilities. The framework features a modular architecture with semantic class names, extensive customization options, and no JavaScript dependencies.

Package Information

  • Package Name: bulma
  • Package Type: npm
  • Language: SCSS/CSS
  • Installation: npm install bulma

Core Imports

SCSS Import (Recommended)

@import 'bulma/bulma.scss';

Selective SCSS Import

@use 'bulma/sass/utilities';
@use 'bulma/sass/base';
@use 'bulma/sass/elements/button';
@use 'bulma/sass/components/navbar';

CSS Import

@import 'bulma/css/bulma.css';

CDN Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.3/css/bulma.min.css">

Basic Usage

HTML with Bulma Classes

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.3/css/bulma.min.css">
</head>
<body>
  <div class="container">
    <h1 class="title">Hello Bulma!</h1>
    <button class="button is-primary">Primary Button</button>
    
    <div class="columns">
      <div class="column">First column</div>
      <div class="column">Second column</div>
    </div>
  </div>
</body>
</html>

SCSS Customization

// Override variables before importing
$primary: #ff6b6b;
$family-sans-serif: "Helvetica Neue", sans-serif;

@import 'bulma/bulma.scss';

Architecture

Bulma is organized into several key modules:

  • Utilities: Core variables, functions, and mixins for customization
  • Base: Reset styles, animations, and foundational elements
  • Elements: Individual UI components (buttons, tables, icons, etc.)
  • Form: Input fields, form controls, and form layout utilities
  • Components: Complex multi-element components (navbar, modal, card)
  • Layout: Page structure components (container, section, hero)
  • Grid: Flexbox columns and CSS Grid systems
  • Helpers: Utility classes for spacing, typography, and layout

Capabilities

Base Styles and Reset

Foundation styles including CSS reset, animations, and base HTML element styling that normalizes cross-browser appearance.

// CSS Reset and base styles
@use 'bulma/sass/base';

Base Styles

UI Elements

Individual interface components including buttons, forms, tables, and other standalone elements with consistent styling and behavior.

// Element imports
@use 'bulma/sass/elements/button';
@use 'bulma/sass/elements/box';
@use 'bulma/sass/elements/notification';
<!-- Button variants -->
<button class="button">Default</button>
<button class="button is-primary">Primary</button>
<button class="button is-large">Large</button>

<!-- Form elements -->
<input class="input" type="text" placeholder="Text input">
<textarea class="textarea" placeholder="Textarea"></textarea>

UI Elements

Form Controls

Input fields, form elements, and form layout utilities for creating comprehensive forms with consistent styling and validation states.

// Form control imports
@use 'bulma/sass/form/input-textarea';
@use 'bulma/sass/form/select';
@use 'bulma/sass/form/checkbox-radio';
@use 'bulma/sass/form/file';
<!-- Form elements -->
<input class="input" type="text" placeholder="Text input">
<textarea class="textarea" placeholder="Textarea"></textarea>

<div class="select">
  <select>
    <option>Select dropdown</option>
  </select>
</div>

<label class="checkbox">
  <input type="checkbox">
  I agree to the terms
</label>

<label class="radio">
  <input type="radio" name="question">
  Yes
</label>

Form Controls

Complex Components

Multi-element components like navigation bars, modals, cards, and dropdowns that combine multiple parts into cohesive interface patterns.

// Component imports  
@use 'bulma/sass/components/navbar';
@use 'bulma/sass/components/modal';
@use 'bulma/sass/components/card';
<!-- Navbar structure -->
<nav class="navbar" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item">Brand</a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
    </div>
  </div>
</nav>

<!-- Card structure -->
<div class="card">
  <div class="card-content">
    <p class="title">Card Title</p>
  </div>
</div>

Complex Components

Grid Systems

Flexbox-based columns system and CSS Grid implementation for creating responsive layouts with flexible sizing and alignment options.

// Grid system imports
@use 'bulma/sass/grid/columns';
@use 'bulma/sass/grid/grid';
<!-- Flexbox columns -->
<div class="columns">
  <div class="column is-half">Half width</div>
  <div class="column">Auto width</div>
</div>

<!-- CSS Grid -->
<div class="grid">
  <div class="cell">Grid cell</div>
  <div class="cell">Grid cell</div>
</div>

Grid Systems

Layout Components

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

// Layout imports
@use 'bulma/sass/layout/container';
@use 'bulma/sass/layout/hero';
@use 'bulma/sass/layout/section';
<!-- Page structure -->
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Hero Title</h1>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <p>Section content</p>
  </div>
</section>

Layout Components

Utility Helpers

CSS utility classes for spacing, typography, colors, flexbox alignment, and other common styling needs that can be applied directly to HTML elements.

// Helper imports
@use 'bulma/sass/helpers/spacing';
@use 'bulma/sass/helpers/typography';
@use 'bulma/sass/helpers/color';
<!-- Spacing utilities -->
<div class="p-4 m-2">Padding 4, Margin 2</div>

<!-- Typography utilities -->
<p class="has-text-centered is-size-3">Centered large text</p>

<!-- Color utilities -->
<div class="has-background-primary has-text-white">Colored background</div>

Utility Helpers

Customization and Theming

SCSS variables, CSS custom properties, functions, and mixins for customizing colors, typography, spacing, and component appearance.

// Customization variables
$primary: #00d1b2;
$family-sans-serif: "Inter", sans-serif;
$radius: 4px;

// CSS custom properties
:root {
  --bulma-primary-h: 171;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
}

// Utility functions
@function mergeColorMaps($bulma-colors, $custom-colors);

Customization and Theming