g11-m3

This guide will walk you through the process of transforming a basic HTML structure ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html)) into a fully styled modern social media platform ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html)) using the Bulma CSS framework.

What is Bulma?

Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components for building modern, responsive websites. Unlike some other CSS frameworks, Bulma is pure CSS and does not require JavaScript to function, making it lightweight and easy to implement.

Key Features of Bulma:

Responsive: Works on mobile, tablet, and desktop
Flexbox-based: Uses modern CSS technology for layout
Pure CSS: No JavaScript dependency
Modular: Pick and choose only the components you need
Modern: Clean, minimalist design by default

Prerequisites

Basic understanding of HTML
A text editor (like VS Code, Sublime Text, etc.)
A modern web browser for testing

Setting Up Your Project Files

Before adding Bulma classes to your HTML, you need to properly set up your project structure and CSS files.

Step 1: Create the Proper Folder Structure

Create the following folder structure in your project:

your-project-folder/
├── assets/
│   └── css/
│       ├── bulma.min.css      # Bulma framework CSS
│       └── style.css          # Your custom CSS
├── index.html                 # Your main HTML file
├── starter_index.html         # Your starter HTML template
└── assets/
    └── image/
        └── logo.png           # Your logo image

Step 2: Obtain Bulma CSS Files

You have two options to get the Bulma CSS file:

Option A: Download and Place Locally (Recommended for Beginners)

Go to the official Bulma website: https://bulma.io/
Click on "Download" and select "Standalone version"
Extract the downloaded file and find the bulma.min.css file
Place the bulma.min.css file in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder

Alternatively, you can download it directly from: https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css

Option B: Use CDN (Content Delivery Network)

Instead of downloading the file, you can link directly to Bulma hosted on a CDN by replacing the local link with:

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

Advantages of CDN approach:

No need to download and store files locally
Potentially faster loading if users have already cached the file from another site
Automatic updates when you change the version in the URL

Disadvantages of CDN approach:

Requires an internet connection to load the styles
Slight dependency risk if the CDN goes down (though rare with major CDNs)
Less control over the exact version used

Step 3: Create Your Custom Style Sheet

Create a file called [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder to add your custom styles that complement Bulma.

Step-by-Step Transformation Guide

Step 1: Setting Up Bulma in Your Project

First, you need to add the Bulma CSS framework to your HTML file. In the [head](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/simple_version.html#L7-L11) section of your HTML document, add the following links:

<head>
    <!-- ... existing code ... -->
    
    <!-- BULMA LOCAL FILE -->
    <link rel="stylesheet" href="./assets/css/bulma.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

The first link imports the Bulma CSS framework from your local assets folder, and the second imports your custom styles that complement Bulma.

In the [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) file, the navigation is basic HTML. Transform it using Bulma classes:

Before (starter version):

<!-- Navigation Bar -->
<nav>
    <div>
        <div>
            <a href="#">
                <!-- Logo Image -->
                <div>
                  M
                </div>
                <span>Maxy</span>
            </a>
            
            <!-- Mobile menu button -->
            <a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
    </div>
</nav>

After (improved version):

<nav class="navbar is-fixed-top has-shadow">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="#">
                <!-- Logo Image -->
                <div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
                  M
                </div>
                <span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span>
            </a>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        
        <div id="navbarMenu" class="navbar-menu">
            <div class="navbar-end">
                <a class="navbar-item is-active">
                    <span class="icon">
                        <!-- Home icon would go here -->
                    </span>
                    <span class="ml-2">Home</span>
                </a>
                <!-- More navigation items -->
            </div>
        </div>
    </div>
</nav>

Key Bulma Classes Used:

navbar: Creates a navigation bar component
is-fixed-top: Fixes the navbar at the top of the page
has-shadow: Adds a shadow to the navbar
container: Centers content and adds padding
navbar-brand: Contains the logo and brand name
navbar-item: An item inside the navbar (links, buttons, etc.)
navbar-burger: Creates a responsive hamburger menu for mobile
navbar-menu: Contains the navigation items
navbar-end: Aligns navbar items to the right
is-active: Highlights the currently active page
icon: Creates an icon container
ml-2: Adds left margin (margin-left: 0.5rem)
has-text-weight-bold: Makes text bold
is-size-4: Sets font size to level 4

Step 3: Creating Responsive Layout with Columns

Let's compare the transformation of the main content area using Bulma's grid system:

Before (Basic HTML Structure)

<section>
    <div>
        <div>
            <!-- Left Sidebar -->
            <div>
                <!-- Profile Card -->
            </div>
        </div>
    </div>
</section>

After (Bulma Styled Version)

<section class="section" style="padding-top: 80px;">
    <div class="container">
        <div class="columns is-variable is-5">
            <div class="column is-one-quarter">
                <!-- Left Sidebar -->
                <div class="card has-text-centered mb-5">
                    <!-- Profile Card Content -->
                </div>
            </div>
            <div class="column">
                <!-- Main Feed Content -->
            </div>
            <div class="column is-one-quarter">
                <!-- Right Sidebar -->
            </div>
        </div>
    </div>
</section>

Key Bulma Classes Used:

section: Adds padding around content
columns: Creates a row of columns
column: Defines a column within the row
is-one-quarter: Makes the column take up 1/4 of the row width
is-variable: Allows spacing between columns to be adjusted
is-5: Sets column spacing to level 5 (2rem)
card: Creates a box with shadow for content
has-text-centered: Centers text alignment
mb-5: Adds bottom margin (margin-bottom: 1.5rem)

Step 4: Creating Responsive Layout with Columns

Transform your main content area to use Bulma's grid system:

Before:

<section>
    <div>
        <div>
            <!-- Left Sidebar -->
            <div>
                <!-- Profile Card -->
            </div>
        </div>
    </div>
</section>

After:

<section class="section" style="padding-top: 80px;">
    <div class="container">
        <div class="columns is-variable is-5">
            <div class="column is-one-quarter">
                <!-- Left Sidebar -->
                <div class="card has-text-centered mb-5">
                    <!-- Profile Card Content -->
                </div>
            </div>
            <div class="column">
                <!-- Main Feed Content -->
            </div>
            <div class="column is-one-quarter">
                <!-- Right Sidebar -->
            </div>
        </div>
    </div>
</section>

Key Bulma Classes Used:

section: Adds padding around content
columns: Creates a row of columns
column: Defines a column within the row
is-one-quarter: Makes the column take up 1/4 of the row width
is-variable: Allows spacing between columns to be adjusted
is-5: Sets column spacing to level 5 (2rem)
card: Creates a box with shadow for content
has-text-centered: Centers text alignment
mb-5: Adds bottom margin (margin-bottom: 1.5rem)

Step 5: Styling Cards and Content Elements

Apply Bulma classes to make cards and content look professional:

Before:

<div>
    <div>
        <div>JS</div>
        <h2>John Smith</h2>
        <p>@johnsmith</p>
        <div>
            <div>
                <div>
                    <p>Posts</p>
                    <p>245</p>
                </div>
            </div>
            <!-- More stats -->
        </div>
    </div>
</div>

After:

<div class="card has-text-centered mb-5">
    <div class="card-content">
        <div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;">
            JS
        </div>
        <h2 class="title is-5">John Smith</h2>
        <p class="subtitle is-6 has-text-grey">@johnsmith</p>
        
        <div class="level is-mobile profile-stats mt-4">
            <div class="level-item has-text-centered">
                <div>
                    <p class="heading">Posts</p>
                    <p class="title is-5">245</p>
                </div>
            </div>
            <div class="level-item has-text-centered">
                <div>
                    <p class="heading">Followers</p>
                    <p class="title is-5">1.2K</p>
                </div>
            </div>
            <div class="level-item has-text-centered">
                <div>
                    <p class="heading">Following</p>
                    <p class="title is-5">562</p>
                </div>
            </div>
        </div>
    </div>
</div>

Key Bulma Classes Used:

title: Styles heading text
subtitle: Styles subheading text
is-5: Font size level 5
is-6: Font size level 6
has-text-grey: Grey text color
level: Flexible horizontal layout component
is-mobile: Makes level responsive for mobile
level-item: Individual item in a level component
mx-auto: Margin left and right auto (centers element)
mt-4: Top margin (margin-top: 1rem)
heading: Smaller heading text for labels

Step 6: Adding Buttons with Bulma

Replace basic buttons with styled Bulma buttons:

Before:

<button>Message</button>

After:

<button class="button maxy-primary">Message</button>

Key Bulma Classes Used:

button: Creates a styled button
maxy-primary: Custom class defined in style.css for our brand color

Step 7: Understanding Custom CSS

While Bulma provides many built-in styles, we've added custom CSS in [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) to enhance the design:

/* Custom button styles */
.maxy-primary {
    background-color: #3273dc;
    color: white;
}

.maxy-primary:hover {
    background-color: #2761bb;
}

/* Avatar styles - Fixed distortion */
.post-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

Advantages of Using Bulma

Responsive by Default: Everything automatically adapts to different screen sizes
No JavaScript Required: Pure CSS framework means faster loading and fewer conflicts
Modern Design: Clean aesthetic without additional customization needed
Flexbox-Based: Modern CSS technology for reliable layouts
Extensive Documentation: Well-documented with many examples
Modular Approach: Only use the parts you need
Consistent Spacing: Built-in spacing utilities make design consistent

Common Bulma Utilities

Throughout the project, you'll see various utility classes:

Spacing: m-* (margin), p-* (padding), combined with directions (t, b, l, r) and sizes (1-6)
Text: has-text-centered, has-text-weight-bold, is-capitalized
Colors: has-text-primary, has-background-info, etc.
Typography: title, subtitle, is-size-1 through is-size-7

Troubleshooting Tips

Layout Not Responsive: Ensure you're using the columns and column classes correctly
Elements Overlapping: Check that you're using proper spacing classes (mt-*, mb-*, pt-*, pb-*)
Buttons Not Styled: Make sure you've added the button class
Navigation Not Working on Mobile: Verify that your navbar-burger and navbar-menu IDs match

Next Steps

Once you've successfully transformed your [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) into the full featured [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html), consider exploring more Bulma components like modals, dropdowns, panels, and tabs to further enhance your social media platform.

README.md

Building a Modern Social Media Platform with Bulma CSS

What is Bulma?

Key Features of Bulma:

Prerequisites

Setting Up Your Project Files

Step 1: Create the Proper Folder Structure

Step 2: Obtain Bulma CSS Files

Option A: Download and Place Locally (Recommended for Beginners)

Option B: Use CDN (Content Delivery Network)

Advantages of CDN approach:

Disadvantages of CDN approach:

Step 3: Create Your Custom Style Sheet

Step-by-Step Transformation Guide

Step 1: Setting Up Bulma in Your Project

Step 2: Applying Bulma Classes to Your Navigation

Key Bulma Classes Used:

Step 3: Creating Responsive Layout with Columns

Before (Basic HTML Structure)

After (Bulma Styled Version)

Key Bulma Classes Used:

Step 4: Creating Responsive Layout with Columns

Key Bulma Classes Used:

Step 5: Styling Cards and Content Elements

Key Bulma Classes Used:

Step 6: Adding Buttons with Bulma

Key Bulma Classes Used:

Step 7: Understanding Custom CSS

Advantages of Using Bulma

Common Bulma Utilities

Troubleshooting Tips

Next Steps