Pure.CSS হল একটি ছোট, দ্রুত এবং অত্যন্ত কাস্টমাইজযোগ্য CSS ফ্রেমওয়ার্ক, যা মূলত responsive design এর জন্য ব্যবহৃত হয়। Pure.CSS এর মধ্যে একটি শক্তিশালী responsive grid system রয়েছে যা সোজা এবং সহজভাবে ওয়েব পেজের লেআউট তৈরি করতে সাহায্য করে। Pure.CSS এর গ্রিড সিস্টেমটি একটি ১২-কোলাম লেআউটের ওপর ভিত্তি করে কাজ করে এবং আপনাকে flexbox এবং media queries ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কন্টেন্ট অ্যাডজাস্ট করতে সহায়তা করে।
Pure.CSS Responsive Grid System:
Pure.CSS এর গ্রিড সিস্টেম একটি ১২-কোলাম গ্রিড সিস্টেমের উপর ভিত্তি করে কাজ করে, তবে এটি অত্যন্ত লাইটওয়েট এবং কাস্টমাইজযোগ্য। এখানে আপনি কিভাবে Pure.CSS এর responsive grid সিস্টেম ব্যবহার করে লেআউট তৈরি করতে পারেন তার একটি সাধারণ উদাহরণ দেওয়া হলো।
1. Pure.CSS Grid System এর মূল কাঠামো:
Pure.CSS এর গ্রিড সিস্টেম মূলত .pure-g ক্লাসের মাধ্যমে কাজ করে। .pure-u- ক্লাসগুলি বিভিন্ন কোলাম এবং ব্রেকপয়েন্ট অনুযায়ী কন্টেন্টের চওড়া নির্ধারণ করতে ব্যবহৃত হয়।
গ্রিড সিস্টেমের মৌলিক কাঠামো:
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<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>
এখানে .pure-g হল গ্রিড কন্টেইনার, এবং .pure-u-1-3 প্রতিটি কোলামের চওড়া নির্ধারণ করে। এই উদাহরণে, ৩টি কলামকে সমানভাবে ১/৩ অংশে ভাগ করা হয়েছে।
2. Responsive Grid Example:
Pure.CSS এর গ্রিড সিস্টেমটি media queries এবং flexbox এর সাহায্যে রেসপন্সিভ ডেভেলপমেন্টে ব্যবহার করা যায়। গ্রিডের কোলামগুলি স্ক্রীন সাইজ অনুসারে পরিবর্তিত হবে।
উদাহরণ ১: ১২-কোলাম গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4">Column 1</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4">Column 2</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4">Column 3</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4">Column 4</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: এটি গ্রিড কন্টেইনারের ক্লাস, যা আপনার সব গ্রিড আইটেম (কলাম) ধারণ করবে।.pure-u-1: এটা নির্দেশ করে যে কলামটি সম্পূর্ণ প্রস্থ (100%) গ্রহণ করবে।.pure-u-md-1-3: মিডিয়াম স্ক্রীনে (যেমন ট্যাবলেট বা ল্যাপটপে), এই কলামটি ১/৩ অংশ জায়গা নেবে।.pure-u-lg-1-4: লার্জ স্ক্রীনে (ডেস্কটপে), এই কলামটি ১/৪ অংশ জায়গা নেবে।
এই উদাহরণে, সাইটটি মোবাইল (100% প্রস্থ), ট্যাবলেট (1/3 প্রস্থ) এবং ডেস্কটপ (1/4 প্রস্থ) স্ক্রীনে উপযুক্তভাবে রেসপন্সিভ হবে।
3. Grid Layout with Offsets and Nesting:
Pure.CSS এর গ্রিড সিস্টেমে আপনি offsets এবং nesting ব্যবহার করতে পারেন।
উদাহরণ ২: Offsets এবং Nesting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Nested Grid Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-4">Column 1</div>
<div class="pure-u-1-2 pure-u-md-1-4">Column 2</div>
<div class="pure-u-1-2 pure-u-md-1-4">Column 3</div>
<div class="pure-u-1-2 pure-u-md-1-4">Column 4</div>
</div>
<!-- Nested Grid -->
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="pure-g">
<div class="pure-u-1-2">Nested 1</div>
<div class="pure-u-1-2">Nested 2</div>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে nesting ব্যবহৃত হয়েছে, যেখানে একটি গ্রিডের মধ্যে আরেকটি গ্রিড রয়েছে। প্রথম স্তরের গ্রিডের কলামগুলোর মধ্যে একটি কলামে দ্বিতীয় গ্রিড রয়েছে।
.pure-u-1-2: এটা 50% প্রস্থের জন্য ব্যবহার করা হয়েছে, যা সাধারণত মোবাইল ডিভাইসে ব্যবহার হবে।
4. Flexibility with Media Queries:
Pure.CSS গ্রিড সিস্টেমের মাধ্যমে আপনি নিজেই কাস্টম media queries ব্যবহার করে আরও স্পষ্ট নিয়ন্ত্রণ পেতে পারেন। যদিও Pure.CSS কিছু ডিফল্ট মিডিয়া কুয়েরি প্রদান করে, আপনি প্রয়োজনে নিজস্ব কুয়েরি ব্যবহার করতে পারেন।
@media (max-width: 768px) {
.pure-u-1-3 {
width: 100%;
}
}
Pure.CSS এর Responsive Grid System সহজ এবং কার্যকরী একটি গ্রিড সিস্টেম, যা খুবই লাইটওয়েট এবং মোবাইল-ফার্স্ট ওয়েবসাইট তৈরি করতে সহায়তা করে। এটি ব্যবহার করে আপনি খুব দ্রুত এবং সহজে রেসপন্সিভ ওয়েব পেজ তৈরি করতে পারেন। এটি 12-column layout, offsets, nesting এবং media queries এর মতো শক্তিশালী বৈশিষ্ট্য প্রদান করে, যা আপনাকে আরও কাস্টমাইজড এবং সাশ্রয়ী গ্রিড সিস্টেম তৈরি করতে সাহায্য করবে।
Grid System হল একটি ওয়েব ডিজাইন এবং লেআউট তৈরির মৌলিক উপাদান, যা একটি ওয়েব পেজের কন্টেন্ট এবং উপাদানগুলিকে একটি সুশৃঙ্খল ও সুবিন্যস্ত উপায়ে সাজানোর জন্য ব্যবহৃত হয়। Pure.CSS-এর Grid System ব্যবহার করে, আপনি খুব সহজে রেস্পন্সিভ ওয়েব পেজ তৈরি করতে পারেন যা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো প্রদর্শিত হবে। Pure.CSS এর Grid System সহজ, হালকা, এবং নমনীয়, যা ডেভেলপারদের দ্রুত এবং কার্যকরী লেআউট তৈরিতে সাহায্য করে।
Grid System কি এবং কেন ব্যবহার করবেন?
Grid System এমন একটি লেআউট স্ট্রাকচার যা একটি পৃষ্ঠার উপাদানগুলিকে গ্রিডের মতো কলাম এবং সারিতে বিভক্ত করে। এই গ্রিডের মাধ্যমে কন্টেন্ট সহজে সাজানো হয় এবং এটি রেস্পন্সিভ ডিজাইন নিশ্চিত করে, যাতে ওয়েবসাইটটি ডেস্কটপ, ট্যাবলেট বা মোবাইল যেকোনো ডিভাইসে সঠিকভাবে দেখায়।
Pure.CSS এর Grid System এর প্রধান বৈশিষ্ট্যসমূহ:
- মডুলার এবং নমনীয়: Pure.CSS একটি মডুলার গ্রিড সিস্টেম প্রদান করে, যেখানে আপনি সহজেই আপনার প্রয়োজন অনুযায়ী কলাম সিস্টেম নির্ধারণ করতে পারেন। Pure.CSS-এ flexbox এবং float এর সংমিশ্রণ ব্যবহৃত হয়েছে, যা গ্রিড সিস্টেমকে অত্যন্ত নমনীয় করে তোলে।
- ১২ কলাম গ্রিড: Pure.CSS এর গ্রিড সিস্টেম ১২টি কলামের উপর ভিত্তি করে কাজ করে। আপনি ১২টি কলাম থেকে বিভিন্ন উপায়ে আপনার কন্টেন্ট সাজাতে পারবেন, যেমন 1 কলাম, 2 কলাম, 3 কলাম, অথবা 6 কলাম ইত্যাদি।
- রেস্পন্সিভ ডিজাইন: Pure.CSS এর গ্রিড সিস্টেম সম্পূর্ণরূপে রেস্পন্সিভ ডিজাইন সাপোর্ট করে, অর্থাৎ এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনে একে অপরের সাথে সামঞ্জস্য রেখে উপাদানগুলি প্রদর্শন করতে সক্ষম।
- সহজ ব্যবহার: Pure.CSS এর গ্রিড সিস্টেম খুবই সহজ এবং স্বাভাবিকভাবে ব্যবহৃত হয়। কেবলমাত্র CSS ক্লাস ব্যবহার করে গ্রিডের কলাম এবং সারি তৈরী করা যায়।
Pure.CSS Grid System এর কিভাবে ব্যবহার করবেন?
Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করার জন্য, আপনাকে কেবলমাত্র কিছু সহজ CSS ক্লাস প্রয়োগ করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে ১২-কলাম গ্রিড সিস্টেম ব্যবহার করা হয়েছে:
উদাহরণ ১: বেসিক গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<div style="background-color: lightblue; padding: 20px;">Column 1 (50%)</div>
</div>
<div class="pure-u-1-2">
<div style="background-color: lightgreen; padding: 20px;">Column 2 (50%)</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-g ক্লাস গ্রিড সিস্টেমের জন্য ব্যবহৃত হচ্ছে।
- pure-u-1-2 ক্লাস দ্বারা দুটি কলাম তৈরি করা হয়েছে, যেখানে প্রতিটি কলাম পেজের ৫০% জায়গা দখল করবে।
উদাহরণ ২: ৩টি কলাম গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">
<div style="background-color: lightcoral; padding: 20px;">Column 1 (33%)</div>
</div>
<div class="pure-u-1-3">
<div style="background-color: lightgoldenrodyellow; padding: 20px;">Column 2 (33%)</div>
</div>
<div class="pure-u-1-3">
<div style="background-color: lightseagreen; padding: 20px;">Column 3 (33%)</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-u-1-3 ক্লাস ব্যবহার করে ৩টি কলাম তৈরি করা হয়েছে, প্রতিটি কলাম ৩৩.৩৩% স্পেস দখল করছে।
উদাহরণ ৩: রেস্পন্সিভ গ্রিড সিস্টেম
Pure.CSS এর গ্রিড সিস্টেম রেস্পন্সিভ ডিজাইন সাপোর্ট করে, তাই আপনি একটি নির্দিষ্ট ডিভাইসের জন্য আলাদা কলাম সাইজ নির্ধারণ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightblue; padding: 20px;">Column 1</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightgreen; padding: 20px;">Column 2</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightyellow; padding: 20px;">Column 3</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightcoral; padding: 20px;">Column 4</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-u-1: মোবাইল বা ছোট স্ক্রীনের জন্য পুরো পেজের ১০০% ব্যবহার করবে।
- pure-u-md-1-2: মিডিয়াম স্ক্রীন (ট্যাবলেট) এর জন্য ৫০% কলাম ব্যবহার করবে।
- pure-u-lg-1-4: বড় স্ক্রীন (ডেস্কটপ) এর জন্য ২৫% কলাম ব্যবহার করবে।
Pure.CSS Grid System এর সুবিধাসমূহ
- সহজ এবং নমনীয়: Pure.CSS-এর গ্রিড সিস্টেম খুব সহজ, এবং আপনি সহজেই বিভিন্ন স্ক্রীন সাইজে ওয়েবপেজ লেআউট তৈরি করতে পারেন। এটি সম্পূর্ণভাবে রেস্পন্সিভ, যাতে আপনার ওয়েব অ্যাপ্লিকেশন মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে কাজ করবে।
- কম্প্যাক্ট এবং হালকা: Pure.CSS একটি হালকা ওজনের ফ্রেমওয়ার্ক, যা দ্রুত লোড হয় এবং আপনার ওয়েব পেজের পারফরমেন্সে কোনও বিরূপ প্রভাব ফেলে না। এটি ছোট সাইজে আসে এবং খুব কম কোডের মাধ্যমে কার্যকরী গ্রিড সিস্টেম তৈরি করতে সক্ষম।
- মডুলার: Pure.CSS গ্রিড সিস্টেম মডুলারভাবে ডিজাইন করা হয়েছে। আপনি যেটুকু প্রয়োজন, সেটুকু ব্যবহার করতে পারেন এবং অন্যান্য অংশ বাদ দিয়ে খুব সহজে কাস্টমাইজ করতে পারেন।
- রেস্পন্সিভ এবং প্লাগএবল: Pure.CSS-এর গ্রিড সিস্টেম বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে রেস্পন্সিভ হয়ে যায়, এবং এতে প্লাগএবল মডিউল ব্যবহার করতে পারেন।
Pure.CSS Grid System হল একটি অত্যন্ত শক্তিশালী, নমনীয়, এবং রেস্পন্সিভ সিস্টেম, যা সহজভাবে ওয়েব লেআউট ডিজাইন করতে সাহায্য করে। এর হালকা ডিজাইন এবং ছোট সাইজ, আপনাকে ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত তৈরি এবং অপটিমাইজ করতে সহায়তা করে। Pure.CSS এর গ্রিড সিস্টেম ব্যবহারের মাধ্যমে আপনি একটি কার্যকরী, ব্যবহারবান্ধব এবং রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করতে পারবেন, যা বিভিন্ন ডিভাইসের সাথে উপযুক্তভাবে কাজ করবে।
Pure.CSS এর ১২-কোলাম Grid System একটি সিম্পল এবং লাইটওয়েট গ্রিড সিস্টেম, যা ওয়েব ডিজাইনে রেসপন্সিভ এবং মোবাইল-ফার্স্ট ডিজাইন তৈরি করতে সহায়তা করে। এটি modular এবং খুবই হালকা, এবং আপনি খুব সহজে রেসপন্সিভ লেআউট তৈরি করতে পারবেন। Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করার জন্য আপনাকে মাত্র কিছু ক্লাস ব্যবহার করতে হবে, যা দ্রুত এবং কার্যকরী লেআউট তৈরি করতে সক্ষম।
Pure.CSS ১২-কোলাম Grid সিস্টেম:
Pure.CSS এর গ্রিড সিস্টেম ১২টি কলামে বিভক্ত, এবং এটি Flexbox ভিত্তিক, যার মাধ্যমে আপনি সহজে বিভিন্ন স্ক্রীন সাইজে ওয়েব পেজের কন্টেন্টকে সঠিকভাবে প্রদর্শন করতে পারবেন।
গ্রিড সিস্টেমের মূল ক্লাস:
- pure-g: এটি গ্রিড কনটেইনারের জন্য ক্লাস। এর মধ্যে আপনি আপনার গ্রিডের কলামগুলি রাখবেন।
- pure-u-1-12: এটি একটি কলামের জন্য ১২-ভাগের মধ্যে ১ ভাগ প্রস্থ। আপনি এই ক্লাসের মাধ্যমে বিভিন্ন সাইজের কলাম তৈরি করতে পারবেন।
- pure-u-1-2: এটি কলামের জন্য ১২ ভাগের মধ্যে ৬ ভাগ, অর্থাৎ ৫০% প্রস্থ নির্ধারণ করবে।
- pure-u-1-3: এটি কলামের জন্য ১২ ভাগের মধ্যে ৪ ভাগ, অর্থাৎ ৩৩.৩% প্রস্থ নির্ধারণ করবে।
Pure.CSS এর ১২-কোলাম গ্রিড সিস্টেমের উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid System</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.grid-container {
margin: 20px;
}
.grid-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="grid-container pure-g">
<!-- First Column (1/12 of the width) -->
<div class="pure-u-1-12 grid-item">1</div>
<!-- Second Column (2/12 or 1/6 of the width) -->
<div class="pure-u-1-6 grid-item">2</div>
<!-- Third Column (3/12 or 1/4 of the width) -->
<div class="pure-u-1-4 grid-item">3</div>
<!-- Fourth Column (4/12 or 1/3 of the width) -->
<div class="pure-u-1-3 grid-item">4</div>
<!-- Fifth Column (5/12 of the width) -->
<div class="pure-u-5-12 grid-item">5</div>
<!-- Sixth Column (1/2 of the width) -->
<div class="pure-u-1-2 grid-item">6</div>
<!-- Seventh Column (7/12 of the width) -->
<div class="pure-u-7-12 grid-item">7</div>
<!-- Eighth Column (12/12 or full width) -->
<div class="pure-u-1 grid-item">8</div>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-g: এই ক্লাসটি গ্রিড কনটেইনারের জন্য ব্যবহৃত হয়, যার মধ্যে সমস্ত কলাম থাকবে।
- pure-u-1-12: এটি কলামটির প্রস্থ নির্ধারণ করে, যেখানে ১-১২ ভাগের মধ্যে ১ ভাগ ব্যবহার করা হয়েছে।
- pure-u-1-6: এটি কলামটির প্রস্থ ১-১২ ভাগের মধ্যে ২ ভাগ বা ১/৬ প্রস্থ নির্ধারণ করে।
- pure-u-1-2: এটি কলামটির প্রস্থ ১-১২ ভাগের মধ্যে ৬ ভাগ বা ১/২ প্রস্থ নির্ধারণ করে।
রেসপন্সিভিটি:
Pure.CSS গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে রেসপন্সিভ, অর্থাৎ এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করবে। উদাহরণস্বরূপ, ছোট স্ক্রীন বা মোবাইল ডিভাইসে এটি কলামগুলিকে ভেঙে একটি একক কলামে প্রদর্শন করবে। আপনি চাইলে ম্যানুয়ালি মিডিয়া কুয়েরি যোগ করে স্ক্রীন সাইজ অনুযায়ী গ্রিড সিস্টেম কাস্টমাইজও করতে পারেন।
একটি রেসপন্সিভ গ্রিড সিস্টেম উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Responsive Grid</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.grid-container {
margin: 20px;
}
.grid-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
border: 1px solid #ddd;
}
/* For mobile devices */
@media (max-width: 600px) {
.pure-u-1-2, .pure-u-1-3, .pure-u-1-4 {
width: 100% !important; /* Full width for mobile devices */
}
}
</style>
</head>
<body>
<div class="grid-container pure-g">
<div class="pure-u-1-2 grid-item">Column 1</div>
<div class="pure-u-1-2 grid-item">Column 2</div>
<div class="pure-u-1-3 grid-item">Column 3</div>
<div class="pure-u-1-3 grid-item">Column 4</div>
<div class="pure-u-1-3 grid-item">Column 5</div>
</div>
</body>
</html>
এখানে:
- বড় স্ক্রীনে, প্রথম দুটি কলাম 50% প্রস্থে প্রদর্শিত হবে এবং পরবর্তী তিনটি কলাম তৃতীয় অংশে প্রদর্শিত হবে।
- মোবাইল স্ক্রীনে, সমস্ত কলাম 100% প্রস্থে প্রদর্শিত হবে, যাতে প্রতিটি কলাম পুরো স্ক্রীন এলাকা পূর্ণ করে।
Pure.CSS এর ১২-কোলাম গ্রিড সিস্টেম খুবই সহজ এবং কার্যকরী, যা ওয়েব ডিজাইনার এবং ডেভেলপারদের জন্য একটি দ্রুত এবং রেসপন্সিভ লেআউট তৈরি করতে সহায়ক। এর ছোট আকার এবং মডুলার কাঠামো আপনাকে প্রজেক্টের সাইজ কমিয়ে দ্রুত কাজ করতে সাহায্য করে, এবং একই সঙ্গে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে কন্টেন্ট প্রদর্শন করে। Pure.CSS-এ গ্রিড সিস্টেম ব্যবহার করে আপনি দ্রুত এবং কার্যকরী ওয়েব ডিজাইন তৈরি করতে পারবেন।
Pure.CSS দিয়ে একটি Responsive Grid তৈরি করা খুবই সহজ, কারণ এটি একটি সহজ এবং লাইটওয়েট CSS ফ্রেমওয়ার্ক যা গ্রিড লেআউট সিস্টেম প্রদান করে। Pure.CSS এর গ্রিড সিস্টেম Flexbox এবং CSS Grid সাপোর্ট করে, তবে এর মধ্যে Pure Grid সিস্টেম ব্যবহার করা হয়, যা দ্রুত এবং সহজে রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে সহায়তা করে।
Pure.CSS Responsive Grid তৈরি করার জন্য পদক্ষেপ:
- Pure.CSS ইনক্লুড করা: প্রথমে আপনাকে Pure.CSS ফ্রেমওয়ার্ক ইনক্লুড করতে হবে। আপনি CDN বা লোকাল ফাইল ব্যবহার করতে পারেন। এখানে CDN ব্যবহারের উদাহরণ দেওয়া হলো:
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
- Grid Layout তৈরি করা: Pure.CSS এর গ্রিড সিস্টেমের জন্য
pure-gক্লাস ব্যবহার করা হয়। এর মধ্যেpure-u-*ক্লাস ব্যবহার করে কোলাম তৈরি করা হয়।
Responsive Grid উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles */
.pure-u-1-2 {
background-color: #f4f4f4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
.pure-u-1-3 {
background-color: #d4d4d4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
.pure-u-1-4 {
background-color: #b4b4b4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<!-- Column 1: 50% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-2">Column 1</div>
<!-- Column 2: 50% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-2">Column 2</div>
</div>
<div class="pure-g">
<!-- Column 1: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 1</div>
<!-- Column 2: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 2</div>
<!-- Column 3: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 3</div>
</div>
<div class="pure-g">
<!-- Column 1: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 1</div>
<!-- Column 2: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 2</div>
<!-- Column 3: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 3</div>
<!-- Column 4: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 4</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS Grid সিস্টেম:
pure-g: এটি গ্রিড কন্টেইনারের ক্লাস যা গ্রিডের মধ্যে বিভিন্ন উপাদানকে সাজানোর জন্য ব্যবহৃত হয়।pure-u-1,pure-u-md-1-2,pure-u-md-1-3,pure-u-md-1-4: এই ক্লাসগুলি বিভিন্ন স্ক্রীনে (বিশেষ করে মিডিয়াম স্ক্রীন এবং তার উপরের স্ক্রীন) উপাদানগুলির সাইজ এবং কলাম স্পেসিফাই করতে ব্যবহৃত হয়।pure-u-1: পুরো (100%) প্রস্থ দেবে (অর্থাৎ এক কলামে সম্পূর্ণ জায়গা দেবে)।pure-u-md-1-2: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 50% প্রস্থ নিবে।pure-u-md-1-3: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 33% প্রস্থ নিবে।pure-u-md-1-4: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 25% প্রস্থ নিবে।
- Responsive Design: Pure.CSS এর গ্রিড সিস্টেম মোবাইল-ফার্স্ট এবং রেসপনসিভ। অর্থাৎ, যখন স্ক্রীনের আকার ছোট হবে (যেমন মোবাইল), তখন প্রতিটি কলাম পূর্ণ প্রস্থে (100%) প্রদর্শিত হবে, এবং বড় স্ক্রীনে (যেমন ডেস্কটপ) এটি সঠিকভাবে বিভাগিত হবে (50%, 33%, বা 25%)।
- Custom Styles:
.pure-u-1-2,.pure-u-1-3,.pure-u-1-4: এখানে আমি CSS ব্যবহার করে প্রতিটি কলামের প্যাডিং, ব্যাকগ্রাউন্ড এবং টেক্সট অ্যালাইনমেন্ট কনফিগার করেছি যাতে এটি আরও সুন্দরভাবে প্রদর্শিত হয়।
Pure.CSS এর গ্রিড সিস্টেমের সুবিধা:
- Responsive: মোবাইল থেকে ডেস্কটপ পর্যন্ত স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে কলামগুলি অ্যাডজাস্ট হবে।
- Lightweight: Pure.CSS অত্যন্ত লাইটওয়েট ফ্রেমওয়ার্ক, যা ডেভেলপারদের কোডের অপ্রয়োজনীয় ভারী অংশ থেকে মুক্ত রাখে।
- Flexible: আপনি চাইলে কোনো একক কলাম বা একাধিক কলাম ব্যবহার করতে পারেন, এবং এটি অন্যান্য CSS ফ্রেমওয়ার্কের মতো স্টাইলিংয়ের জন্য অতিরিক্ত কনফিগারেশন ছাড়াই কাজ করে।
Pure.CSS দিয়ে রেসপনসিভ গ্রিড তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। এটি একটি লাইটওয়েট এবং মিনিমাল CSS ফ্রেমওয়ার্ক যা আপনাকে ছোট এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Pure.CSS Grid সিস্টেম আপনার ওয়েব পেজের বিভিন্ন স্ক্রীনে সঠিকভাবে উপাদানগুলি সাজাতে সহায়ক এবং এটির মাধ্যমে আপনি কার্যকরী এবং রেসপনসিভ ওয়েব পেজ তৈরি করতে পারবেন।
Pure.CSS একটি হালকা এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা মোবাইল-প্রথম ডিজাইনের ধারণায় কাজ করে এবং রেসপন্সিভ ওয়েব ডিজাইন তৈরির জন্য বেশ সহজ। Breakpoints এবং কাস্টম Responsive Layouts তৈরি করা Pure.CSS-এ খুবই সহজ এবং এর গ্রিড সিস্টেম ও মিডিয়া কোয়েরি ব্যবহারের মাধ্যমে এটি অর্জন করা সম্ভব।
Pure.CSS এর Breakpoints এবং কাস্টম Responsive Layouts তৈরি
1. Pure.CSS Grid System এবং Breakpoints
Pure.CSS একটি ১২ কলামের গ্রিড সিস্টেম প্রদান করে, যা রেসপন্সিভ ডিজাইন তৈরিতে খুব কার্যকর। গ্রিড সিস্টেমটি ছোট এবং বড় স্ক্রীনের জন্য ওয়েব পেজের লেআউট পরিবর্তন করতে সাহায্য করে। Pure.CSS এ ব্রেকপয়েন্ট বা মিডিয়া কোয়েরির মাধ্যমে এই গ্রিড সিস্টেমটি ব্যবহার করা যায়, যার মাধ্যমে অ্যাপ্লিকেশনটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে ফিট হয়।
Pure.CSS এর ডিফল্ট গ্রিড সিস্টেমে তিনটি ব্রেকপয়েন্ট (বড় স্ক্রীন, ট্যাবলেট, মোবাইল) রয়েছে। এই ব্রেকপয়েন্টগুলো media queries দ্বারা কন্ট্রোল করা হয়।
2. Pure.CSS ব্রেকপয়েন্টস:
Pure.CSS এর ব্রেকপয়েন্টস সাধারণত তিনটি প্রধান সাইজে কাজ করে:
- small (
@media (max-width: 40em)): মোবাইল ডিভাইসের জন্য। - medium (
@media (min-width: 40em)): ট্যাবলেট ডিভাইসের জন্য। - large (
@media (min-width: 64em)): ডেস্কটপ ডিভাইসের জন্য।
এগুলি মোবাইল ফার্স্ট পদ্ধতি অনুসরণ করে, অর্থাৎ প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করা হয় এবং পরে বড় স্ক্রীনগুলোর জন্য ডিজাইন অ্যাডজাস্ট করা হয়।
3. কাস্টম Responsive Layouts তৈরি করা:
Pure.CSS এ কাস্টম রেসপন্সিভ লেআউট তৈরি করতে আপনি নিম্নলিখিত কৌশলগুলি অনুসরণ করতে পারেন:
(i) গ্রিড সিস্টেম ব্যবহার:
Pure.CSS এর ১২ কলামের গ্রিড সিস্টেম ব্যবহার করে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 3</div>
</div>
</div>
<style>
.panel {
background-color: lightgray;
padding: 20px;
margin: 10px;
text-align: center;
font-size: 18px;
}
</style>
</body>
</html>
এখানে:
- pure-u-1: প্রতিটি কলাম পূর্ণ প্রস্থ নেবে।
- pure-u-sm-1-2: স্ক্রীনের সাইজ sm (মোবাইল) এর জন্য প্রতিটি কলাম অর্ধেক প্রস্থ নিবে।
- pure-u-md-1-3: স্ক্রীনের সাইজ md (ট্যাবলেট) এর জন্য প্রতিটি কলাম এক-তৃতীয়াংশ প্রস্থ নিবে।
এই কাস্টম গ্রিড সিস্টেমটি আপনার ওয়েবসাইটের লেআউটকে রেসপন্সিভ করে তুলবে, এবং এটা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো কাজ করবে।
(ii) কাস্টম মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট তৈরি:
Pure.CSS এর ডিফল্ট মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট সিস্টেমের সাথে আপনি কাস্টম ব্রেকপয়েন্ট তৈরি করতে পারেন, যাতে আপনার সাইট আরো কাস্টমাইজড এবং ফ্লেক্সিবল হয়।
উদাহরণস্বরূপ, যদি আপনি একটি নতুন ব্রেকপয়েন্ট তৈরি করতে চান, তাহলে আপনাকে একটি নতুন মিডিয়া কোয়েরি ব্যবহার করতে হবে। নিচে একটি কাস্টম মিডিয়া কোয়েরি তৈরি করার উদাহরণ দেওয়া হল:
@media (min-width: 768px) {
/* Tablet and larger devices */
.my-class {
background-color: lightblue;
}
}
@media (min-width: 1024px) {
/* Desktop devices */
.my-class {
background-color: lightgreen;
}
}
এখানে, min-width: 768px এবং min-width: 1024px মিডিয়া কোয়েরির মাধ্যমে আমরা ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য কাস্টম লেআউট তৈরি করেছি।
(iii) Flexbox ব্যবহার:
Pure.CSS এর গ্রিড সিস্টেমের পাশাপাশি আপনি Flexbox ব্যবহার করতে পারেন কাস্টম লেআউট তৈরি করার জন্য, যা অনেক বেশি ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য। Flexbox মাধ্যমে আপনি উপাদানগুলিকে আরও বেশি নিয়ন্ত্রণ করতে পারবেন।
Flexbox উদাহরণ:
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 3</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 4</div>
</div>
</div>
এখানে pure-u-1, pure-u-sm-1-2 এবং pure-u-md-1-4 ব্যবহার করে আপনার ওয়েব পেজে চারটি কলাম তৈরি হয়েছে, এবং এটি রেসপন্সিভভাবে কাজ করবে।
Pure.CSS খুবই হালকা এবং ব্যবহারযোগ্য একটি ফ্রেমওয়ার্ক, যা ব্রেকপয়েন্ট এবং কাস্টম রেসপন্সিভ লেআউট তৈরি করার জন্য বেশ কার্যকরী। এর গ্রিড সিস্টেম এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি আপনার ওয়েবসাইটের ডিজাইনকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত করতে পারেন। এই ফ্রেমওয়ার্কটি বিশেষভাবে দ্রুত লোড হওয়া ওয়েবসাইট তৈরির জন্য উপযুক্ত, এবং এটি সিম্পল, ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য লেআউট ডিজাইন করতে সহায়তা করে।
Read more
