Pure.CSS একটি ছোট, দ্রুত, এবং সহজ সিএসএস লাইব্রেরি যা ওয়েব ডেভেলপমেন্টে স্টাইলিং করার জন্য ব্যবহৃত হয়। এটি YUI (Yahoo User Interface) ফ্রেমওয়ার্কের অংশ হিসেবে তৈরি হয়েছিল এবং তার পরবর্তীতে এটি একটি স্ট্যান্ডঅ্যালোন লাইব্রেরি হিসেবে আলাদা হয়ে যায়। Pure.CSS এর মূল লক্ষ্য হলো সিম্পল এবং মিনিমালিস্ট স্টাইলিং প্রদান করা, যা খুব দ্রুত লোড হয় এবং রেসপন্সিভ ওয়েব ডিজাইন সহজে করতে সহায়তা করে।
এখানে Pure.CSS ডাউনলোড এবং ব্যবহারের জন্য ধাপসমূহ এবং এর স্ট্রাকচার ও ফাইল স্ট্রাকচার সম্পর্কে বিস্তারিত আলোচনা করা হলো।
Pure.CSS ডাউনলোড এবং লোকালভাবে ব্যবহার করা
1. Pure.CSS ডাউনলোড করা:
আপনি Pure.CSS এর সর্বশেষ সংস্করণটি Pure.CSS GitHub Repository থেকে ডাউনলোড করতে পারেন অথবা তাদের অফিসিয়াল ওয়েবসাইট থেকেও ডাউনলোড করতে পারেন। আপনি চাইলে CDN (Content Delivery Network) থেকেও সরাসরি লিংক ব্যবহার করতে পারেন।
অথবা CDN থেকে Pure.CSS ব্যবহার:
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/pure-min.css">
2. লোকালভাবে Pure.CSS ডাউনলোড করা:
Pure.CSS ডাউনলোড করতে, আপনি তাদের GitHub রিপোজিটরি থেকে ZIP ফাইল ডাউনলোড করতে পারেন অথবা npm ব্যবহার করে এটি ইনস্টল করতে পারেন।
Pure.CSS ডাউনলোড করার জন্য GitHub রিপোজিটরি থেকে ZIP ফাইল ডাউনলোড:
- GitHub থেকে ZIP ফাইল ডাউনলোড করুন: Pure.CSS GitHub
- ZIP ফাইলটি আনজিপ করুন এবং আপনার প্রোজেক্ট ফোল্ডারে রাখুন।
নোড প্যাকেজ ম্যানেজার (npm) দিয়ে Pure.CSS ইনস্টল করা:
npm install purecss
3. লোকালভাবে Pure.CSS ফাইল অন্তর্ভুক্ত করা:
আপনি যখন Pure.CSS ফাইলটি ডাউনলোড বা ইনস্টল করবেন, তখন আপনাকে এটি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে। এটি <link> ট্যাগের মাধ্যমে করা হয়।
Example:
<head>
<link rel="stylesheet" href="path/to/pure-min.css">
</head>
এখানে "path/to/pure-min.css" আপনার প্রোজেক্টের ফোল্ডার স্ট্রাকচারের মধ্যে থাকা Pure.CSS ফাইলের লোকাল পাথ হবে।
Pure.CSS স্ট্রাকচার
Pure.CSS এর স্ট্রাকচার অনেক সহজ এবং মিনিমালিস্ট। এর মূল উদ্দেশ্য হলো প্রয়োজনীয় সিএসএস ক্লাসগুলো সহজে প্রদান করা যা আপনাকে বেসিক ওয়েব ডিজাইন তৈরি করতে সহায়তা করবে। Pure.CSS একটি ছোট এবং ফোকাসড সিএসএস লাইব্রেরি, যার মধ্যে কিছু উপাদান অন্তর্ভুক্ত থাকে:
1. Grid System:
Pure.CSS এর grid system সহজেই রেসপন্সিভ ওয়েব লেআউট তৈরি করতে সহায়তা করে। এটি ১২ কলামের গ্রিড সিস্টেম ব্যবহার করে, যার মাধ্যমে আপনি ফ্লেক্সিবল ওয়েব পেজ ডিজাইন করতে পারেন।
2. Forms:
Pure.CSS এ ফর্ম স্টাইলিংয়ের জন্য একটি সহজ এবং মিনিমালিস্ট সেটআপ রয়েছে। এটি input, textarea, button, এবং অন্যান্য ফর্ম এলিমেন্টগুলির জন্য স্টাইল প্রদান করে।
3. Buttons:
Pure.CSS এর বাটন ক্লাসগুলি খুবই সিম্পল এবং স্টাইলড, যা সাইটে প্রফেশনাল লুক প্রদান করে।
4. Tables:
Pure.CSS ব্যবহার করে সহজে স্টাইল করা টেবিল তৈরি করা যায়, যা বেসিক টেবিল স্টাইলিং প্রদান করে।
5. Menus:
Pure.CSS এ বিভিন্ন ধরনের সিম্পল এবং সুন্দর মেনু সিস্টেমের জন্য স্টাইল আছে, যেমন ড্রপডাউন মেনু, সাইডবার মেনু ইত্যাদি।
Pure.CSS ফাইল স্ট্রাকচার
Pure.CSS সাধারণত একটি সিম্পল ফোল্ডার স্ট্রাকচারে থাকে যা বিভিন্ন স্টাইল শীটকে পৃথকভাবে সংরক্ষণ করে। যখন আপনি Pure.CSS ডাউনলোড করেন বা ইনস্টল করেন, তখন সাধারণত নিচের স্ট্রাকচারটি পাবেন:
pure/
├── pure-min.css # মিনিফাইড CSS ফাইল
├── pure.css # রেগুলার CSS ফাইল (পূর্ন স্কেল ফাইল)
├── pure.css.map # সোর্স ম্যাপ
└── pure-grids.css # Pure CSS Grid ফাইল
ফাইল স্ট্রাকচারের বিস্তারিত:
pure-min.css: এটি মিনিফাইড (compressed) সিএসএস ফাইল যা প্রোডাকশন পরিবেশে ব্যবহৃত হয়। এটি কমপ্যাক্ট এবং দ্রুত লোড হয়।pure.css: এটি ফুল সিএসএস ফাইল যা ডেভেলপমেন্ট পরিবেশে ব্যবহৃত হয়। এই ফাইলে সমস্ত স্টাইল এবং কোড থাকে যা কমপাইল এবং মিনিফাইড সংস্করণে রূপান্তরিত হয়।pure-grids.css: এই ফাইলটি Pure.CSS গ্রিড সিস্টেমের জন্য ব্যবহৃত হয়, যা ওয়েব পেজে লেআউট ডিজাইন করার জন্য ব্যবহার করা হয়।pure.css.map: এটি সোর্স ম্যাপ ফাইল যা ডেভেলপারদের জন্য ব্যবহৃত হয়, যখন তারা ডিবাগিং বা ব্রাউজার ডেভেলপার টুলস ব্যবহার করে কোড পরীক্ষা করেন।
Pure.CSS এর জন্য কিছু বেসিক ব্যবহার উদাহরণ:
Grid System 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>Pure.CSS Grid Example</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">Content 1</div>
<div class="pure-u-1-2">Content 2</div>
</div>
</body>
</html>
Button Example:
<button class="pure-button">Click Me</button>
<button class="pure-button pure-button-primary">Primary Button</button>
Forms Example:
<form class="pure-form">
<fieldset>
<legend>Login</legend>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" class="pure-button pure-button-primary">Login</button>
</fieldset>
</form>
Pure.CSS একটি সহজ এবং হালকা সিএসএস লাইব্রেরি যা ওয়েব অ্যাপ্লিকেশন ও ওয়েবসাইট ডিজাইন করার জন্য প্রয়োজনীয় স্টাইলগুলি সরবরাহ করে। এটি মিনিমালিস্ট ফ্রেমওয়ার্কের মধ্যে দ্রুত এবং রেসপন্সিভ ওয়েব ডিজাইন তৈরি করতে সহায়ক। আপনি Pure.CSS ডাউনলোড বা CDN থেকে সরাসরি ব্যবহার করতে পারেন এবং সহজে আপনার প্রোজেক্টে অন্তর্ভুক্ত করতে পারবেন। এর ফাইল স্ট্রাকচার এবং প্রোডাকশন ব্যবহারের জন্য খুবই পরিষ্কার এবং সোজা।
Read more
