Pure.CSS হল একটি ছোট, দ্রুত, এবং প্রভাবশালী CSS ফ্রেমওয়ার্ক যা সিম্পল এবং মডুলার স্টাইলশিট সরবরাহ করে, যা ওয়েব ডেভেলপমেন্টে ব্যবহার করা সহজ। Pure.CSS এর মূল লক্ষ্য হল লাইটওয়েট এবং রেস্পন্সিভ ডিজাইন। আপনি Pure.CSS আপনার প্রোজেক্টে লোকালি ডাউনলোড এবং ব্যবহার করতে পারেন। নিচে Pure.CSS ডাউনলোড এবং ব্যবহার করার পুরো প্রক্রিয়া তুলে ধরা হয়েছে।
Step 1: Pure.CSS ডাউনলোড করা
- Pure.CSS অফিসিয়াল ওয়েবসাইটে যান: Pure.CSS ডাউনলোড করার জন্য, আপনি Pure এর অফিসিয়াল ওয়েবসাইটে যেতে পারেন: https://purecss.io/
Pure.CSS এর স্টাইলশিট ডাউনলোড করুন: ওয়েবসাইটে গেলে, "Download" বাটনে ক্লিক করে Pure.CSS এর স্টাইলশিট ফাইলটি ডাউনলোড করতে পারবেন। এছাড়া, আপনি CDN এর মাধ্যমে লাইভ স্টাইলশিট ব্যবহারও করতে পারেন, তবে লোকালভাবে ব্যবহারের জন্য ফাইলটি ডাউনলোড করাই উত্তম।
Direct Download Link: আপনি সরাসরি Pure.CSS এর CSS ফাইলটি এখান থেকে ডাউনলোড করতে পারেন।
ডাউনলোড করার পরে, আপনি
pure-min.cssনামের একটি ফাইল পাবেন।
Step 2: Pure.CSS ফাইল লোকালি ব্যবহার করা
- আপনার প্রোজেক্টে Pure.CSS যুক্ত করুন: একবার Pure.CSS ফাইলটি ডাউনলোড করা হলে, আপনাকে এই CSS ফাইলটি আপনার প্রোজেক্টে যুক্ত করতে হবে।
- প্রথমে, আপনার প্রোজেক্ট ফোল্ডারে একটি
css/ফোল্ডার তৈরি করুন (যদি না থাকে) এবং সেখানে pure-min.css ফাইলটি পেস্ট করুন।
- প্রথমে, আপনার প্রোজেক্ট ফোল্ডারে একটি
Pure.CSS ফাইলটি HTML ফাইলে লিঙ্ক করুন: এবার আপনার HTML ফাইলের
<head>সেকশনে এই CSS ফাইলটি লিঙ্ক করুন:<link rel="stylesheet" href="css/pure-min.css">নিশ্চিত করুন যে আপনি সঠিক পাথ ব্যবহার করছেন যেখান থেকে ফাইলটি ডাউনলোড করেছেন। এই কোডটি আপনার HTML ডকুমেন্টে Pure.CSS এর স্টাইলশিট লোড করবে।
Step 3: Pure.CSS ব্যবহার শুরু করা
Pure.CSS এর মধ্যে কিছু সাধারণ উপাদান রয়েছে, যেমন গ্রিড সিস্টেম, বাটন, ফর্ম স্টাইলিং ইত্যাদি। এখানে একটি সিম্পল উদাহরণ দেওয়া হলো যেখানে 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 Example</title>
<link rel="stylesheet" href="css/pure-min.css">
</head>
<body>
<div class="pure-u-1-2">
<h1>Welcome to Pure.CSS</h1>
<p>This is a simple example using Pure.CSS.</p>
<button class="pure-button pure-button-primary">Click Me</button>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-u-1-2: এটি Pure CSS এর গ্রিড সিস্টেমের অংশ, যেখানে এই ক্লাসটি উপাদানটি প্রস্থের 50% দখল করবে।.pure-buttonএবং.pure-button-primary: এই ক্লাসগুলি Pure.CSS এর বাটন স্টাইলিং এর অংশ।
Step 4: Additional Customization
যদি আপনি Pure.CSS এর ডিফল্ট স্টাইলিংয়ের বাইরে কিছু কাস্টম স্টাইল ব্যবহার করতে চান, তবে আপনি নিজের CSS ফাইল তৈরি করে সেই ফাইলটিও HTML ফাইলে লিঙ্ক করতে পারেন।
Custom CSS Example:
- প্রথমে আপনার
style.cssফাইল তৈরি করুন।
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
- এরপর এই কাস্টম স্টাইলশিটটি HTML ফাইলে যুক্ত করুন:
<link rel="stylesheet" href="css/style.css">
এভাবে, আপনি Pure.CSS এর সাথে নিজের কাস্টম স্টাইলও প্রয়োগ করতে পারবেন।
Step 5: Pure.CSS এর মডিউলার ফিচার ব্যবহার করা
Pure.CSS এর একটি শক্তিশালী ফিচার হল এটি মডুলার। অর্থাৎ, আপনি শুধুমাত্র সেই অংশগুলি ব্যবহার করতে পারেন যা আপনার প্রকল্পে দরকার।
মডিউল ইনক্লুড করা:
Pure.CSS এর বিভিন্ন মডিউল রয়েছে যেমন Pure Grids, Forms, Buttons, Tables ইত্যাদি। আপনি কেবল যেগুলি ব্যবহার করতে চান তা ইনক্লুড করতে পারেন।
যেমন:
Grids: যদি আপনি শুধুমাত্র গ্রিড সিস্টেম ব্যবহার করতে চান:
<link rel="stylesheet" href="https://unpkg.com/purecss/build/grids-min.css">Buttons: যদি শুধুমাত্র বাটন ব্যবহার করতে চান:
<link rel="stylesheet" href="https://unpkg.com/purecss/build/buttons-min.css">
এটি আপনার ওয়েবসাইটের পারফরম্যান্সের জন্য উপকারী হতে পারে কারণ আপনি শুধুমাত্র প্রয়োজনীয় ফাইলগুলো লোড করবেন, যার ফলে পেজ লোড টাইম কমবে।
Pure.CSS একটি হালকা ওজনের CSS ফ্রেমওয়ার্ক, যা ব্যবহার করা সহজ এবং দ্রুত। আপনি এটি লোকালি ডাউনলোড করে আপনার প্রোজেক্টে ব্যবহার করতে পারেন, এবং কাস্টমাইজেশন করতে পারেন যেভাবে আপনি চান। Pure.CSS ডাউনলোড এবং ব্যবহারের মাধ্যমে আপনার ওয়েবসাইট দ্রুত এবং সাশ্রয়ী হতে পারে।
Read more
