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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bulma@1.0.x
Publish Source
CLI
Badge
tessl/npm-bulma badge