🎨 Getting Started with Bulma

Lesson 2: Build Beautiful Websites with Minimal CSS

Grade 11 Web Development

📏 Classroom Rules

  • Experiment with every code example
  • Help classmates with Bulma classes
  • Share what you build
  • Ask "what if" questions

🎯 Learning Outcomes

  • Set up Bulma in a project
  • Use Bulma's modifier classes
  • Build responsive layouts with columns
  • Style common components
  • Create a navigation bar

💡 Why Bulma Matters

Bulma's human-readable classes make it perfect for beginners. It's CSS-only (no JavaScript required) and built with modern Flexbox.

✨ Quick Bulma Demo

Column 1
Column 2
Column 3

🚀 Bulma Setup

📦 Method 1: CDN (Easiest)

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css"> </head> <body> <!-- Your Bulma-powered HTML here --> </body> </html>

🔧 Method 2: NPM (Advanced)

# Install via npm npm install bulma # Import in your CSS @import 'bulma/css/bulma.css'; # Or import only what you need @import 'bulma/sass/utilities/_all.sass'; @import 'bulma/sass/components/navbar.sass';

🎯 Bulma's Philosophy

Bulma uses modifier classes that start with is- or has-

is-* modifiers

Change element's appearance

is-primary
is-large
is-rounded

has-* modifiers

Change element's content

has-text-white
has-background-dark
has-text-weight-bold

✏️ Quick Practice

Add classes to this button to make it:

  1. Large size
  2. Danger color
  3. Rounded corners
  4. Outlined style

Your Code:

Preview:

Solution: class="button is-large is-danger is-rounded is-outlined"

📐 Bulma Layout System

🎯 Bulma's Secret: Flexbox

Bulma uses Flexbox for all layouts. The columns and column classes create responsive grids automatically.

<!-- Basic 3-column layout --> <div class="columns"> <div class="column">Auto-width</div> <div class="column">Auto-width</div> <div class="column">Auto-width</div> </div> <!-- Responsive column sizing --> <div class="columns"> <div class="column is-half">Half width</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> <!-- Mobile columns --> <div class="columns is-mobile"> <div class="column">Mobile column</div> <div class="column">Mobile column</div> </div>
Column 1
Column 2
Column 3
Column 4

Half width

Auto width

Auto width

👨‍💻 Grid Builder

Create a 4-column layout where:

  • First column takes 1/4 of space
  • Second column takes 1/2 of space
  • Last two columns share remaining space

Your Code:

Preview:

Column 1
Column 2
Column 3
Column 4

Solution: Use is-one-quarter and is-half classes

✨ Bulma Components

🎯 Ready-to-Use Components

Bulma includes styled components that work out of the box:

Navigation Bar

<nav class="navbar"> <div class="navbar-brand"> <a class="navbar-item">Logo</a> </div> </nav>

Card Component

Image

Card Title

Card content goes here

<div class="card"> <div class="card-content"> <p class="title">Title</p> <p>Content</p> </div> </div>

Form Elements

Message & Notifications

Info Message

This is an info message
Success notification!

🎯 Student Project: Blog Layout

📝 Project Brief

Create a blog homepage with Bulma that includes:

  1. Navigation bar with logo and 3 links
  2. Hero section with title and subtitle
  3. 3-column grid of blog posts
  4. Footer with copyright

👨‍💻 Build Your Blog

Your HTML:

Preview:

Preview will appear here

✅ Lesson 2 Checklist

  • ☑️ Understand Bulma setup
  • ☑️ Use is-* and has-* modifiers
  • ☑️ Create responsive grids
  • ☑️ Style buttons and forms
  • ☑️ Build a navigation bar
  • ☑️ Create a complete blog layout

Next Lesson: Tailwind CSS - Utility-First Approach!

Slide 1 of 5