technolyceum/g11-m3
Template
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
b666a45f4ee39a187a7d67a150bde1cc740b9794
g11-m3/README.md
root b666a45f4e Added starter_index.html
2026-01-14 22:17:01 +03:00

15 KiB
Raw Blame History

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:

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

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:

/* 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.

Reference in New Issue View Git Blame Copy Permalink