Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Counter Example - Bulma Typing CST Test
Counter Example — Bulma Code
Demonstrates a simple counter layout using Bulma classes and minimal JavaScript for interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
<title>Bulma Counter</title>
</head>
<body class="has-background-light">
<section class="section">
<div id="container" class="container has-text-centered box">
<h2 class="title is-4">Counter: <span id="count">0</span></h2>
<div class="buttons is-centered mb-4">
<button id="increment" class="button is-primary">+</button>
<button id="decrement" class="button is-danger">-</button>
<button id="reset" class="button is-link">Reset</button>
</div>
<button id="theme-btn" class="button is-warning">Switch Theme</button>
</div>
</section>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
isDark = !isDark;
container.classList.toggle('has-background-dark', isDark);
container.classList.toggle('has-text-white', isDark);
container.classList.toggle('has-background-light', !isDark);
container.classList.toggle('has-text-black', !isDark);
};
</script>
</body>
</html>Bulma Language Guide
Bulma is a modern, open-source CSS framework based entirely on Flexbox. It provides a clean, responsive, and modular approach to building web interfaces without any JavaScript dependencies.
Primary Use Cases
- ▸Responsive websites and web apps
- ▸Landing pages and marketing sites
- ▸Admin dashboards
- ▸Rapid prototyping
- ▸Projects requiring minimal JavaScript dependencies
Notable Features
- ▸Flexbox-based responsive grid
- ▸Pre-styled components and elements
- ▸Modular CSS import system
- ▸No JavaScript dependencies
- ▸Customizable via Sass variables
Origin & Creator
Created by Jeremy Thomas in 2016 to provide a simple, modern, and fully Flexbox-based CSS framework.
Industrial Note
Bulma is often used in lightweight web apps, marketing sites, admin dashboards, and projects where JS-free CSS frameworks are preferred.
Quick Explain
- ▸Bulma uses a mobile-first responsive design powered by Flexbox.
- ▸It provides prebuilt components like buttons, forms, modals, and navbars.
- ▸Its modular structure allows developers to import only what they need, keeping projects lightweight.
Core Features
- ▸Responsive columns with `.columns` and `.column`
- ▸Utility classes for spacing, colors, and typography
- ▸Built-in modifiers for responsive behavior
- ▸Sass-based customization
- ▸Flexbox-powered layout and alignment
Learning Path
- ▸Learn Flexbox fundamentals
- ▸Understand `.columns` and `.column`
- ▸Explore prebuilt components and helpers
- ▸Practice responsive modifiers
- ▸Customize Bulma with Sass variables
Practical Examples
- ▸Responsive navbar with menu items
- ▸Card-based content layout
- ▸Form with styled inputs and buttons
- ▸Hero section with full-width columns
- ▸Flexbox-aligned media objects
Comparisons
- ▸Lighter than Bootstrap
- ▸No JS dependencies unlike Bootstrap
- ▸Flexbox-first layout system
- ▸Smaller ecosystem than Bootstrap
- ▸Simple syntax for rapid prototyping
Strengths
- ▸Fully Flexbox-based for easy layouts
- ▸No JavaScript required, lightweight
- ▸Simple syntax and modular structure
- ▸Responsive and mobile-first by default
- ▸Easy to learn for CSS beginners
Limitations
- ▸No native JavaScript components
- ▸Smaller ecosystem than Bootstrap
- ▸Some advanced UI components need custom implementation
- ▸Limited official themes/templates
- ▸Requires additional JS libraries for dynamic interactivity
When NOT to Use
- ▸When requiring prebuilt JavaScript components
- ▸If a large community ecosystem is needed
- ▸Projects with heavy UI interactions needing JS
- ▸When migrating from Bootstrap-heavy projects
- ▸Enterprise projects needing extensive themes and templates
Cheat Sheet
- ▸`.columns` - wrapper for Flexbox columns
- ▸`.column` - single column inside `.columns`
- ▸`.is-primary`, `.is-success` - color modifiers
- ▸`.is-mobile`, `.is-desktop` - responsive modifiers
- ▸Helper classes like `.has-text-centered`, `.is-flex`
FAQ
- ▸Is Bulma free?
- ▸Yes - open-source under MIT license.
- ▸Does Bulma include JS?
- ▸No - purely CSS framework.
- ▸Is Bulma responsive?
- ▸Yes - mobile-first Flexbox grid system.
- ▸Can I customize Bulma?
- ▸Yes - using Sass variables and modular imports.
- ▸Which browsers does Bulma support?
- ▸All modern browsers with Flexbox support.
30-Day Skill Plan
- ▸Week 1: Basic layout with columns
- ▸Week 2: Components and helpers
- ▸Week 3: Responsive design practice
- ▸Week 4: Sass customization
- ▸Week 5: Advanced modular projects
Final Summary
- ▸Bulma is a lightweight, Flexbox-based CSS framework.
- ▸No JavaScript dependencies, fully modular.
- ▸Easy to learn and use for responsive layouts.
- ▸Customizable via Sass and utility classes.
- ▸Ideal for small-to-medium projects, dashboards, and marketing sites.
Project Structure
- ▸index.html - main layout
- ▸assets/css/ - custom styles or Sass
- ▸node_modules/bulma - installed framework
- ▸partials/ - reusable components (navbar, footer)
- ▸custom.scss - optional theme overrides
Monetization
- ▸Create Bulma templates for sale
- ▸Develop landing page kits
- ▸Rapid prototyping services
- ▸Custom dashboards for clients
- ▸CSS-only website development
Productivity Tips
- ▸Use helper classes instead of custom CSS
- ▸Leverage prebuilt components for faster UI
- ▸Customize Sass variables early
- ▸Import only needed modules
- ▸Test layout alignment frequently
Basic Concepts
- ▸Containers (`.container`)
- ▸Columns (`.columns` and `.column`)
- ▸Modifiers (`.is-primary`, `.is-flex`, `.is-hidden`) for utilities
- ▸Prebuilt components (buttons, cards, navbars)
- ▸Responsiveness with breakpoints (`is-mobile`, `is-desktop`)