Pure.CSS একটি ছোট, দ্রুত, এবং লাইটওয়েট সিএসএস ফ্রেমওয়ার্ক, যা রেসপন্সিভ এবং মোডুলার ডিজাইন তৈরি করতে সহায়ক। এটি fixed layout এবং fluid layout উভয় ধরনের লেআউট সাপোর্ট করে। এখানে আমরা দেখব কিভাবে Pure.CSS ব্যবহার করে Fixed Layout এবং Fluid Layout তৈরি করা যায়।
1. Fixed Layout in Pure.CSS
Fixed Layout এমন একটি লেআউট যেখানে সাইটের কন্টেন্টের প্রস্থ নির্দিষ্ট একটি মানে স্থির থাকে, অর্থাৎ স্ক্রীনের সাইজ বা রেজোলিউশন যাই হোক না কেন, কন্টেন্টের প্রস্থ একই থাকে। এটি সাধারণত width এর মান নির্দিষ্ট করে তৈরি করা হয়।
Fixed Layout Example with Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fixed Layout with Pure.CSS</title>
<style>
.container {
width: 960px; /* Fixed width */
margin: 0 auto; /* Center align */
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fixed Layout Example</h1>
</header>
<section>
<p>This is a fixed layout where the content width is fixed to 960px.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসেwidth: 960px;ব্যবহার করা হয়েছে, যার ফলে টেবিল বা কন্টেন্টের প্রস্থ 960px-এ সীমাবদ্ধ থাকবে।margin: 0 auto;ব্যবহার করা হয়েছে যাতে কন্টেন্টটি কেন্দ্রস্থলে অ্যালাইন করা থাকে।
এটি একটি Fixed Layout, যেটি সব স্ক্রীনে 960px প্রস্থে স্থির থাকবে এবং আপনি স্ক্রীন সাইজ পরিবর্তন করলে এটি ঠিকই মাঝখানে অবস্থান করবে।
2. Fluid Layout in Pure.CSS
Fluid Layout হল এমন একটি লেআউট যেখানে কন্টেন্টের প্রস্থ percentage-based হয়, অর্থাৎ স্ক্রীনের সাইজ বা রেজোলিউশন অনুযায়ী কন্টেন্টের প্রস্থ পরিবর্তিত হয়। এটি responsive লেআউট হিসেবে খুব জনপ্রিয়।
Fluid Layout Example with Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fluid Layout with Pure.CSS</title>
<style>
.container {
width: 80%; /* Fluid width */
margin: 0 auto; /* Center align */
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fluid Layout Example</h1>
</header>
<section>
<p>This is a fluid layout where the content width adjusts based on the viewport width.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসেwidth: 80%;ব্যবহার করা হয়েছে, যার ফলে কন্টেন্টের প্রস্থ পেজের ৮০% হবে। এটি স্ক্রীন সাইজ পরিবর্তিত হওয়ার সাথে সাথে কন্টেন্টের প্রস্থ পরিবর্তন করবে, অর্থাৎ একটি fluid (নমনীয়) লেআউট তৈরি হবে।margin: 0 auto;ব্যবহার করা হয়েছে যাতে কন্টেন্টটি এখনও কেন্দ্রস্থলে অ্যালাইন থাকে।
এই Fluid Layout স্ক্রীন সাইজ অনুযায়ী কন্টেন্টের প্রস্থ পরিবর্তিত হয়। ছোট স্ক্রীনে এটি অনেকটা বড় দেখাবে, এবং বড় স্ক্রীনে এটি ছোট হয়ে যাবে, তবে সর্বদা স্ক্রীনের ৮০% প্রস্থে থাকবে।
3. Fixed Layout with Fluid Elements in Pure.CSS
এখন আমরা Fixed Layout এবং Fluid Elements-এর একটি সংমিশ্রণ দেখব, যেখানে পুরো লেআউট Fixed থাকবে কিন্তু কিছু উপাদান (যেমন কলাম বা ইমেজ) fluid থাকবে।
Example: Fixed Layout with Fluid Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fixed Layout with Fluid Elements</title>
<style>
.container {
width: 960px; /* Fixed width */
margin: 0 auto;
}
.content {
width: 100%; /* Fluid content */
background-color: #f4f4f4;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fixed Layout with Fluid Elements</h1>
</header>
<section class="content">
<p>This section has a fluid width that adjusts with the viewport width, while the overall layout stays fixed.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
.containerক্লাসটি 960px স্থির প্রস্থের সাথে ফিক্সড লেআউট তৈরি করেছে।.contentক্লাসটিwidth: 100%;ব্যবহার করেছে, যা পুরো প্রস্থে fluid এবং viewport এর আকার অনুযায়ী পরিবর্তিত হয়।
এটি একটি Fixed Layout যেখানে কন্টেন্টের প্রধান অংশটি fluid হয়ে থাকে এবং স্ক্রীনের সাইজ পরিবর্তন হলেও কন্টেন্টের প্রস্থ পরিবর্তিত হয়।
4. Using Pure.CSS Grid System for Layout
Pure.CSS এ Grid System ব্যবহার করে আপনি আরও উন্নত এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারেন। এটি কেবলমাত্র একটি ফিক্সড অথবা ফ্লুইড লেআউট নয়, বরং অনেক বিভিন্ন কলাম এবং গ্রিড কাঠামো তৈরি করতে সাহায্য করে।
Grid Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Grid Layout with Pure.CSS</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">Column 1</div>
<div class="pure-u-1-3">Column 2</div>
<div class="pure-u-1-3">Column 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: এটি গ্রিডের কন্টেইনার, যা কলামগুলোর মধ্যে ব্যবধান তৈরি করে।.pure-u-1-3: এটি প্রতিটি কলামকে ১/৩ অংশ করে দেয়। এটি ফ্লেক্সিবল, এবং স্ক্রীন সাইজ পরিবর্তন হলে কলামগুলির আকারও পরিবর্তিত হবে।
Pure.CSS ব্যবহার করে Fixed Layout এবং Fluid Layout তৈরি করা খুবই সহজ এবং দ্রুত। আপনি যদি একটি fixed width চান, তবে একটি fixed layout ব্যবহার করুন, আর যদি স্ক্রীন সাইজ অনুযায়ী লেআউট পরিবর্তন করতে চান, তবে fluid layout ব্যবহার করুন। এর পাশাপাশি, Pure.CSS Grid System ব্যবহার করে আপনি আরও জটিল এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারবেন।
Read more
