Pure.CSS একটি সহজ এবং দ্রুত CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইনে দ্রুত কাজ করার জন্য অনেক প্রাক-কনফিগারড ক্লাস প্রদান করে। এর মধ্যে Text Alignment এবং Visibility Classes ক্লাসগুলো রয়েছে যা ওয়েব পেজের টেক্সট এবং উপাদানগুলির স্টাইলিং এবং দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে।
এখানে Pure.CSS এর Text Alignment এবং Visibility Classes এর ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হলো।
1. Text Alignment in Pure.CSS
Pure.CSS এর মধ্যে বিভিন্ন text alignment ক্লাস রয়েছে যা আপনাকে সহজেই টেক্সটকে বাম, ডান অথবা কেন্দ্রে অবস্থান করতে সাহায্য করবে।
Text Alignment Classes:
.pure-text-align-left: টেক্সট বাম দিকে সারিবদ্ধ করবে।.pure-text-align-center: টেক্সট কেন্দ্রস্থলে সারিবদ্ধ করবে।.pure-text-align-right: টেক্সট ডান দিকে সারিবদ্ধ করবে.
Text Alignment 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>Text Alignment Example</title>
</head>
<body>
<div class="pure-text-align-left">
<h2>Left Aligned Text</h2>
<p>This paragraph is aligned to the left using the .pure-text-align-left class.</p>
</div>
<div class="pure-text-align-center">
<h2>Center Aligned Text</h2>
<p>This paragraph is aligned to the center using the .pure-text-align-center class.</p>
</div>
<div class="pure-text-align-right">
<h2>Right Aligned Text</h2>
<p>This paragraph is aligned to the right using the .pure-text-align-right class.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-align-left: টেক্সটকে বাম দিকে সারিবদ্ধ করার জন্য এই ক্লাসটি ব্যবহার করা হয়েছে।pure-text-align-center: টেক্সটকে কেন্দ্রস্থলে সারিবদ্ধ করতে এই ক্লাস ব্যবহার করা হয়েছে।pure-text-align-right: টেক্সটকে ডান দিকে সারিবদ্ধ করার জন্য এই ক্লাসটি ব্যবহার করা হয়েছে।
এটি টেক্সট অ্যালাইনমেন্টে সবচেয়ে সাধারণ এবং দ্রুত পদ্ধতি, যেখানে আপনার ওয়েবসাইটের যেকোনো টেক্সট বা প্যারাগ্রাফ দ্রুত স্থানান্তরিত হতে পারে।
2. Visibility Classes in Pure.CSS
Visibility Classes ব্যবহার করে আপনি একটি উপাদানকে দৃশ্যমান বা অদৃশ্য (hidden) করতে পারেন। Pure.CSS এর মধ্যে pure-hidden ক্লাস রয়েছে যা কোনো উপাদানকে visibility: hidden বা display: none করতে সাহায্য করে।
Visibility Classes:
.pure-hidden: এই ক্লাসটি ব্যবহৃত হলে, উপাদানটি display: none; হয়ে যাবে, অর্থাৎ উপাদানটি সম্পূর্ণভাবে হাইড হয়ে যাবে এবং তা DOM এর মধ্যে থাকবে না।.pure-visible: এই ক্লাসটি ব্যবহৃত হলে, উপাদানটি দৃশ্যমান হবে, যদি কোনো কারণে সেটি আগে লুকানো হয়ে থাকে।
Visibility 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>Visibility Example</title>
</head>
<body>
<div class="pure-visible">
<h2>Visible Text</h2>
<p>This text is visible on the page by default using the .pure-visible class.</p>
</div>
<div class="pure-hidden">
<h2>Hidden Text</h2>
<p>This text is hidden using the .pure-hidden class. It won't be visible on the page.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-visible: এটি ব্যবহৃত হলে উপাদানটি দৃশ্যমান হবে, যদি এটি আগে কোনো কারণে লুকানো থাকে।pure-hidden: এই ক্লাসটি উপাদানটিকে সম্পূর্ণভাবে গোপন করে রাখবে। এটি সাইটের DOM থেকে পুরোপুরি হাইড হয়ে যাবে এবং ব্রাউজারে দেখাবে না।
3. Additional Text and Visibility Customization
Pure.CSS তে text visibility এবং text alignment নিয়ন্ত্রণ করতে আরও অনেক ক্লাস এবং কাস্টম স্টাইলস যোগ করা যেতে পারে। এর মধ্যে আপনার কাস্টম ফন্ট, সাইজ, স্টাইল এবং অন্যান্য স্টাইলিং প্রয়োগ করা যেতে পারে।
Example with Custom Text and Visibility:
<!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">
<style>
.highlighted-text {
font-size: 20px;
font-weight: bold;
color: #007acc;
}
.hidden-text {
display: none;
}
</style>
<title>Text and Visibility Customization</title>
</head>
<body>
<div class="pure-text-align-center highlighted-text">
<h2>Custom Styled Text</h2>
<p>This is custom styled text with a larger font and a specific color.</p>
</div>
<div class="hidden-text">
<h2>Hidden Text</h2>
<p>This text is hidden by custom CSS using display: none;</p>
</div>
</body>
</html>
ব্যাখ্যা:
.highlighted-text: এখানে কাস্টম ফন্ট সাইজ, ফন্ট ওয়েট এবং কালার নির্ধারণ করা হয়েছে।.hidden-text: এটি কাস্টমভাবে display: none; ব্যবহার করে টেক্সটটি লুকানো হয়েছে।
4. Responsive Text Alignment
আপনি media queries ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা টেক্সট অ্যালাইনমেন্ট নির্ধারণ করতে পারেন। এর ফলে মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে ভিন্ন ভিন্ন অ্যালাইনমেন্ট অ্যাপ্লাই করা সম্ভব।
Responsive Text Alignment 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">
<style>
/* Default - Center aligned text */
.responsive-text {
text-align: center;
}
/* Large screens - Left aligned text */
@media (min-width: 768px) {
.responsive-text {
text-align: left;
}
}
</style>
<title>Responsive Text Alignment</title>
</head>
<body>
<div class="responsive-text">
<h2>Responsive Text Alignment</h2>
<p>This text is centered by default, but will align to the left on large screens.</p>
</div>
</body>
</html>
ব্যাখ্যা:
text-align: center;: মোবাইল স্ক্রীনে টেক্সট সেন্টারে অ্যালাইন করা হয়।@media (min-width: 768px): বড় স্ক্রীনে, বিশেষত ট্যাবলেট এবং ডেস্কটপে টেক্সটকে বাম দিকে সজ্জিত করা হয়।
Pure.CSS ব্যবহার করে Text Alignment এবং Visibility নিয়ন্ত্রণ করা খুবই সহজ। আপনি pure-text-align-left, pure-text-align-center, pure-text-align-right ক্লাস ব্যবহার করে টেক্সটকে বিভিন্নভাবে সজ্জিত করতে পারবেন এবং pure-hidden ও pure-visible ক্লাস ব্যবহার করে উপাদানগুলোকে দৃশ্যমান বা অদৃশ্য (hidden) করতে পারবেন। এর পাশাপাশি, media queries এর মাধ্যমে আপনি স্ক্রীন সাইজ অনুযায়ী টেক্সট এবং উপাদানের দৃশ্যমানতা কাস্টমাইজ করতে পারেন। Pure.CSS এর এই সিম্পল ক্লাসগুলো ওয়েব ডেভেলপমেন্টে আপনার কাজকে আরও দ্রুত এবং সহজ করে তুলবে।
Read more
