Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক, যা Spacing, Margin, এবং Padding এর জন্য সহজ এবং কার্যকরী Utility Classes প্রদান করে। এই ক্লাসগুলি ব্যবহার করে আপনি দ্রুত এবং নমনীয়ভাবে আপনার ওয়েব পেজের উপাদানগুলির মধ্যে জায়গা (spacing) যোগ বা কমাতে পারেন। এতে করে আপনাকে কাস্টম CSS কোড লেখার প্রয়োজন হয় না, এবং কোডিং আরো দ্রুত এবং সহজ হয়ে ওঠে।
1. Spacing, Margin, and Padding Overview in Pure.CSS:
- Spacing: এটি টেক্সট বা উপাদানগুলির মধ্যে সঠিক পরিমাণের জায়গা প্রদান করে।
- Margin: উপাদানের বাইরের জায়গা (অর্থাৎ, উপাদানের চারপাশে থাকা ফাঁকা স্থান) নিয়ন্ত্রণ করে।
- Padding: উপাদানের ভিতরের জায়গা (অর্থাৎ, উপাদানের কনটেন্ট এবং বর্ডারের মধ্যে ফাঁকা স্থান) নিয়ন্ত্রণ করে।
Pure.CSS-এ spacing, margin, এবং padding নিয়ন্ত্রণ করতে অনেক সহজ utility classes রয়েছে। এগুলি আপনার ডিজাইনকে দ্রুত কাস্টমাইজ করার জন্য সহায়ক।
2. Utility Classes for Margin and Padding in Pure.CSS:
Pure.CSS কিছু সাধারণ margin এবং padding ক্লাস সরবরাহ করে, যেগুলি আপনি HTML এলিমেন্টগুলিতে প্রয়োগ করতে পারেন।
Margin Utility Classes in Pure.CSS:
Pure.CSS-এ margin নিয়ন্ত্রণের জন্য কিছু predefined ক্লাস রয়েছে। এগুলি ব্যবহার করে আপনি সহজেই উপাদানের চারপাশে জায়গা (margin) যোগ করতে পারেন।
pure-u-margin-xs-*: অতিরিক্ত ছোট মার্জিন।pure-u-margin-sm-*: ছোট মার্জিন।pure-u-margin-md-*: মধ্যম মার্জিন।pure-u-margin-lg-*: বড় মার্জিন।
Padding Utility Classes in Pure.CSS:
অ্যানালগাসভাবে, Pure.CSS কিছু predefined padding ক্লাসও সরবরাহ করে যা আপনি উপাদানের ভিতরে জায়গা (padding) যোগ করতে ব্যবহার করতে পারেন।
pure-u-padding-xs-*: অতিরিক্ত ছোট প্যাডিং।pure-u-padding-sm-*: ছোট প্যাডিং।pure-u-padding-md-*: মধ্যম প্যাডিং।pure-u-padding-lg-*: বড় প্যাডিং।
Margin এবং Padding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spacing, Margin and Padding with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styling */
.box {
background-color: #4CAF50;
color: white;
text-align: center;
}
</style>
</head>
<body>
<!-- Example with Margin -->
<div class="box pure-u-margin-md-2">
<p>This box has medium margin</p>
</div>
<!-- Example with Padding -->
<div class="box pure-u-padding-md-2">
<p>This box has medium padding</p>
</div>
<!-- Example with both Margin and Padding -->
<div class="box pure-u-margin-sm-1 pure-u-padding-lg-3">
<p>This box has small margin and large padding</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-u-margin-md-2: এই ক্লাসটি মার্জিনের জন্য ব্যবহার করা হয়েছে এবং এটি একটি মাঝারি মার্জিন (২ ইউনিট) যোগ করেছে।pure-u-padding-md-2: এই ক্লাসটি প্যাডিংয়ের জন্য ব্যবহার করা হয়েছে এবং এটি একটি মাঝারি প্যাডিং (২ ইউনিট) যোগ করেছে।pure-u-margin-sm-1এবংpure-u-padding-lg-3: এই ক্লাসগুলির মাধ্যমে একটি ছোট মার্জিন এবং একটি বড় প্যাডিং যোগ করা হয়েছে।
3. Spacing for Grid System in Pure.CSS:
Pure.CSS এর Grid System এর মধ্যে spacing নিয়ন্ত্রণ করতে আপনি margin এবং padding ব্যবহার করতে পারেন, যা টেবিল, ফর্ম, কলাম ইত্যাদি উপাদানগুলির মধ্যে দূরত্ব তৈরি করতে সাহায্য করে।
Grid Example with Spacing (Margin & Padding):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Spacing with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles */
.pure-g {
margin-top: 20px;
}
.pure-u-1-2 {
background-color: #8BC34A;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 with padding and margin</p>
</div>
<div class="pure-u-1-2">
<p>Column 2 with padding and margin</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: গ্রিড কন্টেইনারের জন্য মার্জিন টপ (২০px) সেট করা হয়েছে, যাতে কলামগুলোর মধ্যে কিছু দূরত্ব থাকে।.pure-u-1-2: প্রতিটি কলামের জন্য প্যাডিং (২০px) এবং মার্জিন (১০px) যোগ করা হয়েছে।
4. Customizing Spacing Classes in Pure.CSS:
Pure.CSS-এ সরাসরি margin এবং padding এর জন্য কোনো বৈশিষ্ট্য না থাকলেও, আপনি নিজের প্রয়োজন অনুযায়ী কাস্টম ক্লাস তৈরি করতে পারেন এবং @media queries এর মাধ্যমে এই ক্লাসগুলি কাস্টমাইজ করতে পারেন।
Customizing Spacing with Custom Classes Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Spacing Classes</title>
<style>
.spacing-small {
margin: 5px;
padding: 10px;
}
.spacing-medium {
margin: 15px;
padding: 20px;
}
.spacing-large {
margin: 30px;
padding: 40px;
}
/* For mobile devices */
@media (max-width: 600px) {
.spacing-small {
margin: 2px;
padding: 5px;
}
}
</style>
</head>
<body>
<div class="spacing-small" style="background-color: lightblue;">
<p>Small spacing (margin and padding)</p>
</div>
<div class="spacing-medium" style="background-color: lightgreen;">
<p>Medium spacing (margin and padding)</p>
</div>
<div class="spacing-large" style="background-color: lightcoral;">
<p>Large spacing (margin and padding)</p>
</div>
</body>
</html>
ব্যাখ্যা:
.spacing-small,.spacing-medium,.spacing-large: এই কাস্টম ক্লাসগুলির মাধ্যমে মার্জিন এবং প্যাডিং ভ্যালু সেট করা হয়েছে।@media: ছোট স্ক্রীনে (মোবাইল) মার্জিন এবং প্যাডিং ছোট করা হয়েছে, যাতে এটি আরও কমপ্যাক্ট হয়।
Pure.CSS এর Utility Classes ব্যবহার করে আপনি সহজেই Spacing, Margin, এবং Padding নিয়ন্ত্রণ করতে পারেন। এই ক্লাসগুলো আপনার ওয়েব পেজের উপাদানগুলির মধ্যে জায়গা দ্রুত কাস্টমাইজ এবং কন্ট্রোল করতে সহায়তা করে, যাতে রেসপনসিভ ওয়েব ডিজাইন তৈরি করা যায়। Margin এবং Padding ক্লাসগুলি আপনাকে আপনার উপাদানগুলির মধ্যে সঠিক পরিমাণ জায়গা দিতে সাহায্য করবে, যা আপনার ডিজাইনে পরিপূর্ণতা এবং সৌন্দর্য যোগ করবে।
Read more
