Bulma একটি হালকা এবং শক্তিশালী CSS ফ্রেমওয়ার্ক যা দিয়ে আপনি সহজে সুন্দর এবং রেসপনসিভ ওয়েবসাইট ডিজাইন করতে পারবেন। এখানে একটি বেসিক Bulma প্রজেক্ট তৈরি করার প্রক্রিয়া দেখানো হয়েছে, যাতে আপনি খুব সহজেই আপনার প্রথম Bulma প্রজেক্ট তৈরি করতে পারেন।
১. Bulma ইনস্টলেশন (CDN পদ্ধতিতে)
প্রথমেই Bulma ইনস্টল করতে হবে। সবচেয়ে সহজ পদ্ধতি হলো CDN ব্যবহার করা, যাতে আপনি Bulma এর স্টাইলশিট সরাসরি ইন্টারনেট থেকে লোড করতে পারেন।
HTML ফাইল তৈরি করা
নতুন একটি HTML ফাইল তৈরি করুন, যেমন index.html।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Bulma Project</title>
<!-- Bulma CSS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<!-- Hero Section -->
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Welcome to My Bulma Project
</h1>
<h2 class="subtitle">
This is a simple project using Bulma CSS framework.
</h2>
</div>
</div>
</section>
<!-- Columns Section -->
<div class="container">
<div class="columns">
<div class="column is-half">
<div class="box">
<h3 class="title is-3">Column 1</h3>
<p>This is the first column with some content.</p>
</div>
</div>
<div class="column is-half">
<div class="box">
<h3 class="title is-3">Column 2</h3>
<p>This is the second column with some content.</p>
</div>
</div>
</div>
<!-- Button -->
<button class="button is-success">Click Me</button>
</div>
</body>
</html>
২. HTML ফাইল ব্যাখ্যা
Hero Section: Bulma এর
heroক্লাস একটি বড় ব্যানার তৈরি করতে ব্যবহৃত হয়।is-primaryক্লাসটি এই সেকশনের ব্যাকগ্রাউন্ড কালার নির্ধারণ করে।<section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title">Welcome to My Bulma Project</h1> <h2 class="subtitle">This is a simple project using Bulma CSS framework.</h2> </div> </div> </section>Columns: Bulma এর
columnsএবংcolumnক্লাস ব্যবহৃত হয়েছে দুটি কলাম তৈরি করতে। এখানে দুটি কলাম দেখানো হয়েছে, প্রত্যেকটিতেboxক্লাস রয়েছে যা একটি শেডো সহ বক্স তৈরি করে।<div class="columns"> <div class="column is-half"> <div class="box"> <h3 class="title is-3">Column 1</h3> <p>This is the first column with some content.</p> </div> </div> <div class="column is-half"> <div class="box"> <h3 class="title is-3">Column 2</h3> <p>This is the second column with some content.</p> </div> </div> </div>Button:
button is-successক্লাস ব্যবহার করা হয়েছে একটি সবুজ বাটন তৈরি করতে। Bulma এর বিভিন্ন বাটন স্টাইল রয়েছে, যা সহজেই ব্যবহার করা যায়।<button class="button is-success">Click Me</button>
৩. Bulma এর অন্যান্য উপাদান
Bulma ফ্রেমওয়ার্কে আরও অনেক ধরনের উপাদান রয়েছে যা আপনি আপনার প্রজেক্টে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি Card, Navbar, Modal ইত্যাদি উপাদান ব্যবহার করতে পারেন।
Card উদাহরণ:
<div class="card">
<div class="card-content">
<p class="title">Card Title</p>
<p class="subtitle">Card Subtitle</p>
<p>This is a simple card component created using Bulma.</p>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Read More</a>
<a href="#" class="card-footer-item">Share</a>
</footer>
</div>
এটি একটি সাধারণ Card কম্পোনেন্ট যা শিরোনাম, সাবটাইটেল এবং কিছু কনটেন্ট দেখায়। ফুটারে দুটি লিঙ্ক দেয়া হয়েছে।
৪. Custom CSS ব্যবহার
আপনি যদি Bulma এর সাথে কাস্টম CSS ব্যবহার করতে চান, তবে আপনি একটি আলাদা styles.css ফাইল তৈরি করতে পারেন। নিচে এর একটি উদাহরণ দেয়া হলো:
উদাহরণ: styles.css
/* Custom button style */
.custom-button {
background-color: #ff6347; /* Tomato Red */
color: white;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
}
এখন HTML ফাইলে এই কাস্টম CSS ফাইলটি লিঙ্ক করুন:
<head>
<link rel="stylesheet" href="styles.css">
</head>
এখানে .custom-button ক্লাসটি আপনি HTML ফাইলে ব্যবহৃত বাটনে প্রয়োগ করতে পারবেন।
৫. প্রজেক্ট রান করা
এখন আপনার প্রজেক্ট সম্পূর্ণ। index.html ফাইলটি ব্রাউজারে খুলে দেখুন, যেখানে আপনি Bulma এর স্টাইল এবং কাস্টম স্টাইল একসাথে দেখতে পাবেন।
সারাংশ
এই বেসিক Bulma প্রজেক্টে আমরা CDN এর মাধ্যমে Bulma ইনস্টল করেছি এবং কিছু প্রাথমিক উপাদান যেমন Hero, Columns, Button এবং Card ব্যবহার করেছি। আপনি চাইলে আরও অনেক কম্পোনেন্ট এবং কাস্টম CSS ব্যবহার করে এই প্রজেক্টটি আরও কাস্টমাইজ করতে পারবেন। Bulma এর মাধ্যমে একটি রেসপনসিভ এবং আকর্ষণীয় ওয়েবসাইট তৈরি করা খুবই সহজ।
Read more
