# Building a Modern Social Media Platform with Bulma CSS

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)

1. Go to the official Bulma website: https://bulma.io/
2. Click on "Download" and select "Standalone version"
3. Extract the downloaded file and find the `bulma.min.css` file
4. 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:

```html
<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:

```html
<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.

### Step 2: Applying Bulma Classes to Your Navigation

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:

```css
/* 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

1. **Responsive by Default**: Everything automatically adapts to different screen sizes
2. **No JavaScript Required**: Pure CSS framework means faster loading and fewer conflicts
3. **Modern Design**: Clean aesthetic without additional customization needed
4. **Flexbox-Based**: Modern CSS technology for reliable layouts
5. **Extensive Documentation**: Well-documented with many examples
6. **Modular Approach**: Only use the parts you need
7. **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

1. **Layout Not Responsive**: Ensure you're using the `columns` and `column` classes correctly
2. **Elements Overlapping**: Check that you're using proper spacing classes (`mt-*`, `mb-*`, `pt-*`, `pb-*`)
3. **Buttons Not Styled**: Make sure you've added the `button` class
4. **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.