Pure.CSS একটি ছোট, দ্রুত এবং সহজ ব্যবহারযোগ্য CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টে দ্রুত, এক্সটেনসিবল এবং মোবাইল-ফ্রেন্ডলি লেআউট তৈরি করতে সাহায্য করে। এটি YUI (Yahoo User Interface) থেকে এসেছে এবং খুবই লাইটওয়েট, অর্থাৎ এর আকার কম, তাই এটি ওয়েব পেজের লোডিং টাইমে কোনো নেতিবাচক প্রভাব ফেলবে না।
Pure.CSS ব্যবহার করে আপনি সহজেই রেসপন্সিভ ওয়েব ডিজাইন এবং বিভিন্ন ইউআই উপাদান তৈরি করতে পারবেন। Pure.CSS ফ্রেমওয়ার্ক এমনকি আপনার কাস্টম ডিজাইনের সঙ্গে একত্রে কাজ করতে পারবে, কারণ এটি অন্য ফ্রেমওয়ার্কগুলির মতো 'bloat' বা অতিরিক্ত কোড ব্যবহার করে না।
কেন Pure.CSS ব্যবহার করবেন?
- লাইটওয়েট এবং দ্রুত: Pure.CSS খুবই ছোট, সাধারণ এবং দ্রুত কাজ করে। এটি মাত্র কয়েক কিলোবাইট আকারে আসে (এটি মূলত 4KB থেকে 10KB এর মধ্যে থাকে), তাই এটি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের লোডিং স্পিড কমায় না।
- মডুলার ডিজাইন: Pure.CSS মডুলার। অর্থাৎ, আপনি যদি সব ফিচার ব্যবহার না করতে চান তবে আপনি শুধু প্রয়োজনীয় অংশগুলো ইনক্লুড করতে পারেন। এটি আপনাকে অ্যাপ্লিকেশনকে কাস্টমাইজ করতে এবং বাকি অংশগুলি বাদ দিতে সাহায্য করে।
- মোবাইল ফ্রেন্ডলি এবং রেসপন্সিভ: Pure.CSS রেসপন্সিভ ডিজাইন এবং লেআউট প্রাধান্য দেয়, তাই এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সমানভাবে কাজ করবে।
- সহজ এবং ক্লিন কোড: Pure.CSS কোড খুবই পরিষ্কার এবং সংক্ষিপ্ত, তাই এটি ব্যবহার এবং কাস্টমাইজ করা সহজ। আপনার নিজস্ব ডিজাইন, ইউআই উপাদান এবং ফিচার যোগ করতে খুবই সহজ।
- সহজ ইন্টিগ্রেশন: Pure.CSS অন্য কোনো ফ্রেমওয়ার্কের সাথে সহজেই ইন্টিগ্রেট করা যায়, যেমন React, Angular, বা Vue.js-এর সাথে।
- ফ্রি এবং ওপেন সোর্স: Pure.CSS একটি ওপেন সোর্স প্রজেক্ট, তাই আপনি বিনামূল্যে এটি ব্যবহার করতে পারবেন এবং প্রয়োজন হলে কাস্টমাইজ করতে পারবেন।
Pure.CSS সেটআপ এবং ইনস্টলেশন
Pure.CSS ব্যবহার শুরু করতে বেশ কয়েকটি সহজ উপায় রয়েছে। এখানে আমরা ৩টি প্রধান পদ্ধতি দেখব:
1. CDN (Content Delivery Network) ব্যবহার করে Pure.CSS ইনস্টল করা
এই পদ্ধতিতে, আপনি Pure.CSS সরাসরি CDN (Content Delivery Network) থেকে ব্যবহার করতে পারেন। এটি খুবই সহজ এবং দ্রুত পদ্ধতি।
ধাপ 1: Pure.CSS CDN যুক্ত করা যেকোনো HTML ফাইলে <head> ট্যাগের মধ্যে Pure.CSS এর CDN লিংকটি যুক্ত করুন:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
এখানে, pure-min.css একটি মিনিফাইড সংস্করণ, যা ছোট এবং দ্রুত লোড হয়। এখন আপনার HTML ফাইলটি Pure.CSS ব্যবহার করতে প্রস্তুত।
2. Pure.CSS ফাইল ডাউনলোড করে সেটআপ করা
এটি আরও কাস্টমাইজেবল পদ্ধতি যেখানে আপনি ফাইলটি সরাসরি ডাউনলোড করে আপনার প্রজেক্টে যুক্ত করবেন।
ধাপ 1: Pure.CSS ফাইল ডাউনলোড করা
- Pure.CSS এর অফিসিয়াল সাইট থেকে Pure.CSS ফাইলটি ডাউনলোড করুন।
ধাপ 2: Pure.CSS ফাইল ইন্টিগ্রেট করা ডাউনলোড করা Pure.CSS ফাইলটি আপনার প্রজেক্টের css/ ফোল্ডারে রাখুন এবং HTML ফাইলে তা লিঙ্ক করুন:
<head>
<link rel="stylesheet" href="css/pure.css">
</head>
এখন, আপনি আপনার HTML ফাইলে Pure.CSS ব্যবহার করতে পারবেন।
3. NPM (Node Package Manager) ব্যবহার করে Pure.CSS ইনস্টল করা
যদি আপনি Node.js বা NPM (Node Package Manager) ব্যবহার করে থাকেন, তবে আপনি Pure.CSS ইনস্টল করতে পারেন এবং এটি আপনার প্রকল্পে প্যাকেজ হিসেবে ব্যবহার করতে পারেন।
ধাপ 1: Pure.CSS ইনস্টল করা আপনার প্রজেক্ট ফোল্ডারে গিয়ে কমান্ড লাইন থেকে নিচের কমান্ডটি চালান:
npm install purecss
ধাপ 2: CSS ফাইল অন্তর্ভুক্ত করা আপনি যদি Webpack বা অন্য কোনও বিল্ড টুল ব্যবহার করেন, তবে আপনার মূল CSS ফাইলে Pure.CSS যোগ করুন:
import 'purecss/build/pure.css';
এখন আপনি আপনার JavaScript বা CSS ফাইলে Pure.CSS এর স্টাইল ব্যবহার করতে পারবেন।
Pure.CSS ব্যবহার করার জন্য একটি সাধারণ HTML উদাহরণ
এখন, Pure.CSS সেটআপ করার পরে, একটি সাধারণ HTML ফাইলে এটি কীভাবে কাজ করে তা দেখুন:
<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<h1 class="pure-u-1-1">Welcome to Pure.CSS</h1>
<button class="pure-button pure-button-primary">Click Me</button>
<div class="pure-g">
<div class="pure-u-1-2">
<p>This is a column with 50% width on desktop.</p>
</div>
<div class="pure-u-1-2">
<p>This is another column with 50% width on desktop.</p>
</div>
</div>
</body>
</html>
এখানে, Pure.CSS এর একটি বেসিক স্টাইলিং ব্যবহার করা হয়েছে:
pure-u-1-1: এই ক্লাসটি টেক্সট বা এলিমেন্টকে পুরো প্রস্থে (100%) বিস্তৃত করবে।pure-button: একটি বাটন তৈরি করবে যা Pure.CSS এর স্টাইল অনুসরণ করবে।pure-gএবংpure-u-1-2: একটি গ্রিড লেআউট তৈরি করবে যেখানে দুইটি কলাম থাকবে এবং 50% প্রস্থে বিভক্ত হবে।
Pure.CSS একটি লাইটওয়েট, মডুলার এবং রেসপন্সিভ CSS ফ্রেমওয়ার্ক যা দ্রুত ওয়েব ডেভেলপমেন্টের জন্য উপযুক্ত। এটি খুবই সহজে ইনস্টল করা যায় এবং অন্যান্য ফ্রেমওয়ার্কের সাথে একত্রে ব্যবহার করা সম্ভব। আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের লোড স্পিড বজায় রেখে আপনি সহজেই একটি সুন্দর এবং রেসপন্সিভ ডিজাইন তৈরি করতে Pure.CSS ব্যবহার করতে পারেন।
Pure.CSS একটি লাইটওয়েট এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা দ্রুত এবং সুষম ডিজাইন তৈরি করতে সহায়ক। এটি একটি modular CSS framework, যা বিভিন্ন কম্পোনেন্ট এবং লেআউট প্রদান করে, তবে অতিরিক্ত স্টাইল বা জাভাস্ক্রিপ্ট যুক্ত না করে।
Pure.CSS CDN ব্যবহার করে ইনস্টল করা:
Pure.CSS এর সুবিধাগুলির মধ্যে একটি হল এর সহজ সন্নিবেশযোগ্যতা, বিশেষ করে যখন আপনি CDN (Content Delivery Network) ব্যবহার করেন। Pure.CSS কে আপনার প্রজেক্টে CDN এর মাধ্যমে খুব সহজেই যুক্ত করা যায়।
স্টেপ 1: Pure.CSS CDN লিংক যুক্ত করা
আপনার HTML ফাইলে নিচের <link> ট্যাগটি <head> সেকশনে যুক্ত করুন:
<!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 to Pure.CSS CDN -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1-2">
<h1>Hello, Pure.CSS!</h1>
<p>This is a basic example of using Pure.CSS with a CDN.</p>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে CDN লিংক
https://unpkg.com/purecss@2.0.6/build/pure-min.cssব্যবহার করা হয়েছে, যা Pure.CSS এর সর্বশেষ সংস্করণটি সরবরাহ করবে। আপনি এখানে ব্যবহার করা সংস্করণটি পরিবর্তন করে অন্য সংস্করণও ব্যবহার করতে পারেন। - এটি আপনার HTML ফাইলে সরাসরি Pure.CSS স্টাইলশিট যুক্ত করবে, যা কোনো লোকাল ইনস্টলেশন ছাড়াই কাজ করবে।
স্টেপ 2: 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="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<h1>Welcome to Pure.CSS</h1>
<p>This is a simple layout using Pure.CSS grid system.</p>
</div>
<div class="pure-u-1-2">
<button class="pure-button pure-button-primary">Click Me</button>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid System:
pure-gএবংpure-u-1-2ব্যবহার করে একটি বেসিক গ্রিড তৈরি করা হয়েছে। এটি দুইটি কলাম তৈরি করবে, একটি পাঠ্য এবং আরেকটি বাটনের জন্য। - Button:
pure-button pure-button-primaryক্লাস ব্যবহার করে একটি স্টাইল করা বাটন তৈরি করা হয়েছে।
স্টেপ 3: অন্যান্য Pure.CSS কম্পোনেন্ট ব্যবহার করা
Pure.CSS বিভিন্ন কম্পোনেন্ট যেমন ন্যাভিগেশন বার, টেবিল, ফর্ম, বাটন ইত্যাদি প্রদান করে। আপনি এগুলি ব্যবহার করে আপনার ওয়েব পেজের ডিজাইন আরও উন্নত করতে পারেন।
Pure.CSS Navigation Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Navigation</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Pure</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি সিম্পল horizontal navigation bar তৈরি করা হয়েছে যা Pure.CSS এর
pure-menuক্লাস ব্যবহার করে।
Pure.CSS CDN লিংক পরিবর্তন:
আপনি যদি unpkg এর পরিবর্তে অন্য CDN ব্যবহার করতে চান, তবে আপনি নিচের লিংকটি ব্যবহার করতে পারেন:
- CDNJS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
- jsDelivr:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.6/build/pure-min.css">
Pure.CSS একটি খুব হালকা এবং কাস্টমাইজযোগ্য CSS ফ্রেমওয়ার্ক যা ছোট এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে উপযুক্ত। CDN এর মাধ্যমে Pure.CSS ইন্সটল করা খুবই সহজ এবং এটি আপনার প্রোজেক্টে দ্রুত ব্যবহার করা সম্ভব। আপনি ফাইলটি সরাসরি unpkg, cdnjs, বা jsDelivr থেকে লিংক করে আপনার ওয়েব পেজে যুক্ত করতে পারেন এবং সহজেই একটি সুন্দর ও সিম্পল ডিজাইন তৈরি করতে পারেন।
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 ডাউনলোড এবং ব্যবহারের মাধ্যমে আপনার ওয়েবসাইট দ্রুত এবং সাশ্রয়ী হতে পারে।
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 থেকে সরাসরি ব্যবহার করতে পারেন এবং সহজে আপনার প্রোজেক্টে অন্তর্ভুক্ত করতে পারবেন। এর ফাইল স্ট্রাকচার এবং প্রোডাকশন ব্যবহারের জন্য খুবই পরিষ্কার এবং সোজা।
Pure.CSS একটি সিম্পল, লাইটওয়েট এবং পারফরম্যান্ট CSS ফ্রেমওয়ার্ক, যা Yahoo! দ্বারা তৈরি করা হয়েছে। এটি এমন ডিজাইন উপাদান এবং গ্রিড সিস্টেম প্রদান করে যা আপনাকে দ্রুত ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইট তৈরি করতে সাহায্য করে। Pure.CSS এর মূল উদ্দেশ্য হল মিনিমালিস্টিক ডিজাইন বজায় রেখে সহজ এবং কার্যকরভাবে ওয়েব পেজ তৈরি করা।
এখানে, Pure.CSS ভিত্তিক প্রথম প্রজেক্ট তৈরি করার জন্য ধাপে ধাপে গাইড দেয়া হচ্ছে।
প্রথম Pure.CSS ভিত্তিক প্রজেক্ট তৈরি করার ধাপসমূহ
ধাপ ১: Pure.CSS ফ্রেমওয়ার্ক ইনস্টল করা
Pure.CSS ব্যবহার করতে, আপনাকে প্রথমে এর CSS ফাইলটি আপনার প্রজেক্টে যোগ করতে হবে। আপনি এটিকে CDN বা ডাউনলোড করে ব্যবহার করতে পারেন।
CDN ব্যবহার:
Pure.CSS এর CDN লিংক ব্যবহার করে সরাসরি আপনার HTML ফাইলে লিঙ্ক করতে পারেন।
<!-- Pure.CSS CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
ডাউনলোড করে ব্যবহার:
আপনি Pure.CSS ডাউনলোডও করতে পারেন। Pure.CSS GitHub Repository থেকে এটি ডাউনলোড করুন এবং আপনার প্রজেক্টের মধ্যে যুক্ত করুন।
ধাপ ২: একটি HTML ফাইল তৈরি করুন
এখন একটি HTML ফাইল তৈরি করুন। এটি আপনার Pure.CSS ভিত্তিক প্রজেক্টের জন্য প্রধান ফাইল হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Pure.CSS Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<header class="pure-u-1">
<h1>Welcome to My First Pure.CSS Project!</h1>
</header>
<main class="pure-g">
<section class="pure-u-1 pure-u-md-1-2">
<h2>About Pure.CSS</h2>
<p>Pure.CSS is a minimal CSS framework that helps developers to quickly build lightweight and responsive websites.</p>
</section>
<section class="pure-u-1 pure-u-md-1-2">
<h2>Features</h2>
<ul>
<li>Lightweight</li>
<li>Modular</li>
<li>Responsive</li>
</ul>
</section>
</main>
<footer class="pure-u-1">
<p>Created by [Your Name]</p>
</footer>
</body>
</html>
ব্যাখ্যা:
- এখানে,
pure-u-1এবংpure-u-md-1-2হল Pure.CSS এর গ্রিড সিস্টেমের ক্লাস।pure-u-1পুরো উইডথ ব্যবহার করবে, এবংpure-u-md-1-2মিডিয়া কুয়েরি অনুসারে (মিডিয়াম ডিভাইসে) ৫০% উইডথে কন্টেন্ট দেখাবে। - Pure.CSS Grid System: এটি একটি ১২-কোলাম সিস্টেমে কাজ করে। আপনি সুতরাং যেকোনো অংশের জন্য
pure-u-1,pure-u-1-2,pure-u-1-3ইত্যাদি ক্লাস ব্যবহার করে গ্রিড বানাতে পারেন।
ধাপ ৩: Styling (স্টাইলিং) যুক্ত করা
আপনি Pure.CSS ব্যবহার করতে গিয়ে আরও কিছু কাস্টম স্টাইলও যোগ করতে চাইলে, আপনি <style> ট্যাগের মাধ্যমে স্টাইল দিতে পারেন।
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
text-align: center;
}
section {
padding: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 5px 0;
}
</style>
ধাপ ৪: ব্রাউজারে চেক করা
এখন, আপনার HTML ফাইলটি ব্রাউজারে ওপেন করে দেখুন। Pure.CSS গ্রিড এবং স্টাইলিং দ্বারা একটি সুন্দর এবং রেস্পন্সিভ লেআউট তৈরি হবে।
এখন আপনি Pure.CSS ভিত্তিক একটি মৌলিক প্রজেক্ট তৈরি করতে পেরেছেন। Pure.CSS এর সুবিধা হল এটি খুবই লাইটওয়েট এবং সহজে কাস্টমাইজ করা যায়। আপনি গ্রিড সিস্টেম, ইউআই উপাদান এবং অন্যান্য ডিজাইন কনসেপ্ট ব্যবহার করে আপনার প্রজেক্ট আরও উন্নত করতে পারেন। Pure.CSS-এর মাধ্যমে বড় প্রকল্পও সহজেই তৈরি করা যায়, কারণ এটি অনেকটা মডুলার স্টাইল শীট।
Read more
