Pure.CSS এর Customization এবং Theming

পিওর.সিএসএস (Pure.CSS) - Web Development

322

Pure.CSS একটি ছোট, দ্রুত এবং লাইটওয়েট CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইন এবং ডেভেলপমেন্টের জন্য দ্রুত এবং সহজ সমাধান প্রদান করে। এর মধ্যে অনেক পূর্বনির্ধারিত ক্লাস রয়েছে যা আপনাকে দ্রুত সুন্দর ওয়েব পেজ তৈরি করতে সহায়তা করে। তবে, যদি আপনি আপনার সাইটের ডিজাইনকে আরও কাস্টমাইজ করতে চান বা আপনার নিজস্ব থিম তৈরি করতে চান, তাহলে Pure.CSS আপনাকে customization এবং theming করার জন্য কিছু শক্তিশালী উপায় প্রদান করে।

এখানে Pure.CSS এর Customization এবং Theming করার পদ্ধতিগুলো আলোচনা করা হলো।

1. Customizing Pure.CSS

Pure.CSS ব্যবহারের সময় আপনি এর ডিজাইন এবং স্টাইলিং কাস্টমাইজ করতে পারেন। এটি করতে আপনাকে Pure.CSS এর ডিফল্ট স্টাইলগুলো পরিবর্তন করতে হবে অথবা অতিরিক্ত স্টাইল যোগ করতে হবে।

Customizing Colors, Fonts, and Spacing

Pure.CSS এর জন্য CSS কাস্টমাইজেশন করতে, আপনি সহজেই আপনার পছন্দ অনুযায়ী স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি primary color, font family, এবং spacing কাস্টমাইজ করতে পারেন।

<!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>
    /* Custom Colors */
    body {
      background-color: #f4f4f4;
      font-family: 'Arial', sans-serif;
    }

    .pure-button {
      background-color: #4CAF50; /* Custom primary color */
      color: white;
    }

    .pure-button:hover {
      background-color: #45a049; /* Darker hover state */
    }

    /* Custom spacing */
    .custom-container {
      margin: 20px;
      padding: 20px;
    }
  </style>
  <title>Customizing Pure.CSS</title>
</head>
<body>

  <div class="custom-container">
    <button class="pure-button">Click Me</button>
  </div>

</body>
</html>

ব্যাখ্যা:

Custom Colors: বাটনের ব্যাকগ্রাউন্ড রং এবং হোভার স্টেট পরিবর্তন করা হয়েছে।
Custom Fonts: font-family পরিবর্তন করা হয়েছে যাতে সাইটটি কাস্টম ফন্ট ব্যবহার করে।
Spacing: কাস্টম মার্জিন এবং প্যাডিং যোগ করা হয়েছে যাতে কনটেন্ট আরও প্রসারিত হয় এবং পরিষ্কার দেখায়।

2. Customizing Grid System

Pure.CSS এর গ্রিড সিস্টেমটি কাস্টমাইজ করা সম্ভব। আপনি গ্রিডের কলাম সংখ্যা, গ্যাপ, এবং অন্যান্য প্রপার্টি পরিবর্তন করতে পারেন।

Custom Grid 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>
    .custom-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
      gap: 20px; /* Gap between columns */
    }

    .custom-grid .item {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
  <title>Custom Grid Example</title>
</head>
<body>

  <div class="custom-grid">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

</body>
</html>

ব্যাখ্যা:

Custom Grid Layout: এখানে grid-template-columns ব্যবহার করে একটি কাস্টম গ্রিড তৈরি করা হয়েছে, যেখানে ৩টি সমান কলাম থাকবে এবং gap প্রপার্টি দ্বারা কলামগুলির মধ্যে ব্যবধান সৃষ্টি করা হয়েছে।
Custom Grid Items: প্রতিটি আইটেমের জন্য ব্যাকগ্রাউন্ড কালার, প্যাডিং, এবং টেক্সট অ্যালাইনমেন্ট কাস্টমাইজ করা হয়েছে।

3. Theming Pure.CSS

Pure.CSS থিমিং করতে, আপনি মূলত স্কিমা এবং ডিজাইন প্রোপার্টি পরিবর্তন করবেন, যেমন রঙ, বর্ডার, টেক্সট স্টাইল ইত্যাদি। CSS Variables বা SASS ব্যবহার করে থিম পরিবর্তন করা সবচেয়ে সহজ উপায়।

Using CSS Variables for Theming:

<!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>
    /* Define theme colors using CSS Variables */
    :root {
      --primary-color: #007acc; /* Custom theme primary color */
      --button-bg-color: #008CBA;
      --button-text-color: white;
    }

    body {
      background-color: #f4f4f4;
      color: var(--primary-color);
    }

    .pure-button {
      background-color: var(--button-bg-color);
      color: var(--button-text-color);
    }

    .pure-button:hover {
      background-color: #005f73; /* Darker hover state */
    }
  </style>
  <title>Theming with CSS Variables</title>
</head>
<body>

  <button class="pure-button">Click Me</button>

</body>
</html>

ব্যাখ্যা:

--primary-color: CSS Variable ব্যবহার করে থিমের প্রাথমিক রং কাস্টমাইজ করা হয়েছে।
var(--primary-color): থিম রঙগুলি var() এর মাধ্যমে ব্যবহার করা হয়েছে।

এভাবে, আপনি Pure.CSS এর সাথে CSS Variables ব্যবহার করে দ্রুত এবং সহজে থিম কাস্টমাইজ করতে পারেন, যা ওয়েবসাইটে একক বা একাধিক থিম প্রয়োগে সহায়ক হবে।

4. Customizing Buttons

Pure.CSS-এ বাটন কাস্টমাইজেশন সহজ। আপনি button এর রঙ, বর্ডার, সাইজ এবং অন্যান্য প্রপার্টি কাস্টমাইজ করতে পারেন।

Custom Button 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>
    /* Custom Button */
    .pure-button-custom {
      background-color: #ff6600; /* Custom button background */
      color: white;
      padding: 12px 24px;
      border-radius: 5px;
      font-size: 18px;
      border: none;
      cursor: pointer;
    }

    .pure-button-custom:hover {
      background-color: #e65c00; /* Hover effect */
    }
  </style>
  <title>Custom Button</title>
</head>
<body>

  <button class="pure-button pure-button-custom">Custom Button</button>

</body>
</html>

ব্যাখ্যা:

.pure-button-custom: বাটনের জন্য কাস্টম ব্যাকগ্রাউন্ড রঙ, প্যাডিং, বর্ডার-radius এবং ফন্ট সাইজ দেয়া হয়েছে।
Hover effect: হোভার করলে ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।

5. Using SASS for Advanced Customization

আপনি SASS ব্যবহার করে Pure.CSS এর আরও গভীর কাস্টমাইজেশন করতে পারেন। SASS ব্যবহার করে আপনি ভেরিয়েবল, মিক্সিন, এবং ইনহেরিটেন্স ব্যবহার করে আপনার থিমকে আরও কাস্টমাইজ করতে পারবেন।

SASS Example:

$primary-color: #007acc;
$button-bg-color: #008CBA;
$button-text-color: white;

body {
  background-color: #f4f4f4;
  color: $primary-color;
}

.pure-button {
  background-color: $button-bg-color;
  color: $button-text-color;
  
  &:hover {
    background-color: darken($button-bg-color, 10%);
  }
}

ব্যাখ্যা:

SASS Variables: ভেরিয়েবলগুলো দিয়ে রঙের মানগুলি নিয়ন্ত্রণ করা হয়েছে, যা থিম কাস্টমাইজেশনকে আরও সহজ করে তোলে।
darken(): SASS এর darken() ফাংশন ব্যবহার করে হোভার স্টেটের জন্য রঙ অন্ধকার করা হয়েছে।

Pure.CSS এর customization এবং theming একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে দ্রুত এবং সহজে আপনার ওয়েব ডিজাইন কাস্টমাইজ করতে সহায়তা করে। আপনি CSS variables, SASS, media queries এবং custom styles ব্যবহার করে আপনার সাইটের রঙ, ফন্ট, বাটন, গ্রিড এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন। Pure.CSS এর এই কাস্টমাইজেশন এবং থিমিং পদ্ধতিগুলি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও সুন্দর এবং ইউনিক করতে সাহায্য করবে।

Content added By

Najjar Hossain Raju

Pure.CSS এর জন্য Custom Theme তৈরি করা

225

Pure.CSS দিয়ে একটি Custom Theme তৈরি করা খুবই সহজ এবং এটি আপনাকে একটি খুব লাইটওয়েট, কাস্টমাইজেবল, এবং দ্রুত লোডিং ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Pure.CSS নিজেই একটি মিনিমালিস্টিক CSS ফ্রেমওয়ার্ক, তাই এটি বিভিন্ন থিম এবং স্টাইলিং কাস্টমাইজ করার জন্য খুবই উপযুক্ত। এখানে, আমরা একটি Custom Theme তৈরি করার জন্য কিছু কাস্টম স্টাইলিং এবং কাস্টম CSS প্রপার্টি ব্যবহার করব।

1. Pure.CSS এর জন্য Custom Theme তৈরি করা:

প্রথমে, আমরা একটি basic HTML structure তৈরি করব এবং তারপর Pure.CSS এর ক্লাসগুলি কাস্টমাইজ করব, যেমন নেভিগেশন বার, বাটন, ফর্ম, এবং অন্যান্য উপাদান।

Custom Theme Example for Pure.CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Theme with Pure.CSS</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Custom Theme Styling */

    /* Background and Overall Layout */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    /* Navbar Styles */
    .navbar {
      background-color: #2C3E50;
      padding: 10px 20px;
      text-align: center;
    }

    .navbar a {
      color: #ecf0f1;
      text-decoration: none;
      padding: 10px 20px;
      font-size: 18px;
      transition: background-color 0.3s ease;
    }

    .navbar a:hover {
      background-color: #34495e;
      color: white;
    }

    /* Custom Button Styles */
    .pure-button-custom {
      background-color: #3498db;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }

    .pure-button-custom:hover {
      background-color: #2980b9;
    }

    /* Form Styles */
    .form-container {
      max-width: 500px;
      margin: 30px auto;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    }

    .form-container input,
    .form-container button {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border-radius: 5px;
      border: 1px solid #ddd;
    }

    .form-container button {
      background-color: #2C3E50;
      color: white;
      cursor: pointer;
    }

    .form-container button:hover {
      background-color: #34495e;
    }

    /* Footer Styles */
    footer {
      background-color: #2C3E50;
      color: white;
      text-align: center;
      padding: 20px 0;
    }

  </style>
</head>
<body>

  <!-- Navigation Bar -->
  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>

  <!-- Main Content -->
  <div class="form-container">
    <h2>Sign Up</h2>
    <form class="pure-form pure-form-stacked">
      <input type="text" placeholder="Enter your name" required>
      <input type="email" placeholder="Enter your email" required>
      <button type="submit" class="pure-button pure-button-custom">Submit</button>
    </form>
  </div>

  <!-- Footer -->
  <footer>
    <p>© 2024 My Custom Theme</p>
  </footer>

</body>
</html>

ব্যাখ্যা:

Navbar Styling:
- .navbar: একটি কাস্টম নেভিগেশন বার তৈরি করা হয়েছে, যার ব্যাকগ্রাউন্ড কালার #2C3E50 এবং টেক্সট কালার #ecf0f1 করা হয়েছে। হোভার ইফেক্টে background-color পরিবর্তন করা হয়েছে।
Button Customization:
- .pure-button-custom: Pure.CSS এর ডিফল্ট বাটনের ক্লাসকে কাস্টমাইজ করে বাটনটির ব্যাকগ্রাউন্ড কালার #3498db এবং হোভার ইফেক্টের জন্য #2980b9 ব্যবহার করা হয়েছে।
Form Customization:
- .form-container: একটি সেন্টারড ফর্ম তৈরি করা হয়েছে যেখানে max-width: 500px ব্যবহার করে ফর্মের প্রস্থ সীমিত করা হয়েছে। ফর্মের উপাদানগুলি যথাযথ মার্জিন, প্যাডিং এবং রেডিয়াস সহ সাজানো হয়েছে।
- .form-container input, .form-container button: ইনপুট এবং বাটনের মধ্যে সমান প্যাডিং এবং সীমানা দেওয়া হয়েছে।
Footer Styling:
- footer: ফুঁটারের জন্য একটি কাস্টম ডিজাইন দেওয়া হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালার #2C3E50 এবং টেক্সট কালার white।

2. Adding Colors, Fonts, and Spacing for a Custom Theme

Colors এবং Fonts ব্যবহার করে আপনার কাস্টম থিমের ডিজাইন আরও আকর্ষণীয় এবং ইউনিক করা যেতে পারে। Pure.CSS-এ font-family এবং color schemes কাস্টমাইজ করা খুবই সহজ।

Example of Custom Colors and Fonts:

<style>
  /* Global Font Family and Colors */
  body {
    font-family: 'Arial', sans-serif;
    background-color: #ecf0f1; /* Light background */
    color: #333; /* Dark text */
  }

  /* Custom Button with Gradient Background */
  .pure-button-custom {
    background: linear-gradient(45deg, #ff6b6b, #f7b731);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 16px;
    transition: background 0.3s;
  }

  .pure-button-custom:hover {
    background: linear-gradient(45deg, #f7b731, #ff6b6b);
  }

  /* Custom Navbar */
  .navbar {
    background-color: #34495e; /* Dark blue-gray */
    padding: 20px;
    font-family: 'Roboto', sans-serif;
  }

  .navbar a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 18px;
    transition: background-color 0.3s ease;
  }

  .navbar a:hover {
    background-color: #7f8c8d;
  }
</style>

ব্যাখ্যা:

Colors: আপনি সহজেই background-color, color, এবং gradient ব্যবহার করে আপনার থিমে বৈচিত্র্য এনে দিতে পারেন। এখানে linear-gradient ব্যবহার করে একটি সুন্দর গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি করা হয়েছে বাটনের জন্য।
Fonts: font-family প্রপার্টি ব্যবহার করে ওয়েব ফন্ট কাস্টমাইজ করা হয়েছে। উদাহরণস্বরূপ, Roboto ফন্ট ব্যবহৃত হয়েছে নেভিগেশন বারের জন্য এবং Arial ফন্ট সারা পেজে ব্যবহার করা হয়েছে।
Spacing: বিভিন্ন উপাদানে padding এবং margin দিয়ে স্পেসিং নিয়ন্ত্রণ করা হয়েছে।

3. Advanced Customization Techniques

Customizing Hover Effects:

Hover ইফেক্ট ব্যবহার করে আপনি বাটন এবং লিঙ্কগুলোকে আরো ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন।

/* Custom Hover Effect */
.pure-button-custom:hover {
  transform: scale(1.1); /* Slight zoom on hover */
  background-color: #2ecc71; /* Green background on hover */
}

Responsive Layout Customization:

মোবাইল-ফার্স্ট ডিজাইন এবং media queries ব্যবহার করে রেসপনসিভ থিম তৈরি করা যায়।

/* Mobile Responsive Design */
@media (max-width: 600px) {
  .navbar {
    text-align: center;
  }

  .form-container {
    padding: 15px;
  }
}

Pure.CSS এর মাধ্যমে Custom Themes তৈরি করা খুবই সহজ এবং নমনীয়। আপনি font-family, color schemes, spacing, buttons, hover effects, এবং responsive layout কাস্টমাইজ করে আপনার ওয়েবসাইটের জন্য একটি বিশেষ থিম তৈরি করতে পারেন। Pure.CSS এর লাইটওয়েট ফ্রেমওয়ার্ক এবং মডুলার ডিজাইন আপনার থিমের কাস্টমাইজেশনকে দ্রুত এবং সহজ করে তোলে।

Content added By

Najjar Hossain Raju

SCSS এবং CSS Variables ব্যবহার করে Customization

337

SCSS (Sassy CSS) এবং CSS Variables (CSS Custom Properties) হল আধুনিক ওয়েব ডেভেলপমেন্টে ব্যবহৃত দুটি শক্তিশালী টুল যা ওয়েব ডিজাইন এবং কাস্টমাইজেশনকে আরও সহজ এবং শক্তিশালী করে তোলে। Pure.CSS ব্যবহার করার সময়, SCSS এবং CSS Variables ব্যবহার করে কাস্টমাইজেশন করা ওয়েব ডিজাইনকে আরও স্কেলেবল, ম্যানটেইনেবল এবং ডাইনামিক করতে সাহায্য করে।

এখানে আমরা SCSS এবং CSS Variables ব্যবহার করে Pure.CSS এর কাস্টমাইজেশন নিয়ে আলোচনা করবো।

1. SCSS দিয়ে Pure.CSS কাস্টমাইজেশন

SCSS হল CSS এর একটি সুপারসেট যা আপনাকে variables, mixins, nested selectors, inheritance এবং অন্যান্য উন্নত ফিচারের সুবিধা দেয়। SCSS দিয়ে আপনি Pure.CSS এর থিম এবং স্টাইলিং কাস্টমাইজ করতে পারেন।

SCSS Installation:

SCSS ব্যবহার করার জন্য আপনাকে প্রথমে Sass ইনস্টল করতে হবে। যদি আপনার সিস্টেমে Node.js এবং npm ইনস্টল করা থাকে, তাহলে আপনি npm এর মাধ্যমে Sass ইনস্টল করতে পারেন।

npm install -g sass

SCSS Example for Customizing Pure.CSS:

// _variables.scss - SCSS Variables for Customization
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;
$button-hover-color: #45a049;
$font-size: 16px;

// Import Pure.CSS
@import "https://unpkg.com/purecss@2.0.6/build/pure-min.css";

// Customizing Pure.CSS
body {
  font-size: $font-size;
  background-color: $secondary-color;
}

.navbar {
  background-color: $primary-color;
  
  a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    
    &:hover {
      background-color: $button-hover-color;
    }
  }
}

// Example of a custom button with Pure.CSS and SCSS variables
.custom-btn {
  padding: 10px 20px;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: $font-size;
  cursor: pointer;
  
  &:hover {
    background-color: $button-hover-color;
  }
}

Explanation:

SCSS Variables: SCSS ভেরিয়েবলগুলির মাধ্যমে আমরা বিভিন্ন রঙ, ফন্ট সাইজ, এবং অন্যান্য স্টাইলের জন্য কাস্টম ভ্যালু সংরক্ষণ করেছি, যা পরে পুনরায় ব্যবহার করা হয়েছে।
Importing Pure.CSS: Pure.CSS এর প্রি-ডিফাইন্ড ক্লাসগুলির উপর ভিত্তি করে কাস্টম স্টাইল তৈরি করতে @import দিয়ে Pure.CSS ফ্রেমওয়ার্ক অন্তর্ভুক্ত করা হয়েছে।
Custom Button: SCSS ভেরিয়েবল ব্যবহার করে একটি কাস্টম বাটন তৈরি করা হয়েছে। বাটনের হোভার ইফেক্টও SCSS এর মাধ্যমে কাস্টমাইজ করা হয়েছে।

Compiling SCSS to CSS:

SCSS কোডটি CSS তে কম্পাইল করতে আপনি নিচের কমান্ড ব্যবহার করতে পারেন:

sass styles.scss styles.css

এটি আপনার SCSS ফাইলটিকে একটি স্ট্যান্ডার্ড CSS ফাইলে কম্পাইল করবে, যা ওয়েবসাইটে ব্যবহার করা যাবে।

2. CSS Variables দিয়ে Pure.CSS কাস্টমাইজেশন

CSS Variables (Custom Properties) হল একটি আধুনিক ওয়েব ফিচার যা আপনাকে CSS ডিক্লিয়ারেশনে ভেরিয়েবল ব্যবহার করার সুবিধা দেয়। CSS Variables ডাইনামিকভাবে পরিবর্তনযোগ্য এবং এগুলি আপনার ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজেবল করে তোলে। CSS Variables পঠনযোগ্য এবং ম্যানটেইনেবল কোড লেখার জন্য সহায়ক।

CSS Variables Example for Customizing Pure.CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customizing Pure.CSS with CSS Variables</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Define CSS Variables */
    :root {
      --primary-color: #4CAF50;
      --secondary-color: #f4f4f4;
      --button-hover-color: #45a049;
      --font-size: 16px;
      --padding: 10px 20px;
    }

    /* Customizing Body and Navbar with CSS Variables */
    body {
      font-size: var(--font-size);
      background-color: var(--secondary-color);
    }

    .navbar {
      background-color: var(--primary-color);
    }

    .navbar a {
      color: white;
      text-decoration: none;
      padding: var(--padding);
      transition: background-color 0.3s;
    }

    .navbar a:hover {
      background-color: var(--button-hover-color);
    }

    /* Custom Button using CSS Variables */
    .custom-btn {
      padding: var(--padding);
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: var(--font-size);
      cursor: pointer;
    }

    .custom-btn:hover {
      background-color: var(--button-hover-color);
    }
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>

  <button class="custom-btn">Click Me</button>

</body>
</html>

ব্যাখ্যা:

--primary-color, --font-size: CSS Variables দ্বারা আমরা কাস্টম প্রপার্টি তৈরি করেছি, যা পরে বিভিন্ন CSS সেলেক্টরগুলিতে ব্যবহার করেছি।
var(--primary-color): CSS Variables ব্যবহার করে আমরা বিভিন্ন স্টাইল প্রপার্টি যেমন ব্যাকগ্রাউন্ড কালার, প্যাডিং এবং ফন্ট সাইজ কাস্টমাইজ করেছি।
Customization: Pure.CSS এর মধ্যে থাকা স্টাইলের উপরে আমাদের নিজস্ব স্টাইল যোগ করতে CSS Variables ব্যবহার করা হয়েছে।

Advantages of Using CSS Variables:

Dynamic Changes: CSS Variables পরিবর্তন করা খুব সহজ এবং তা সব জায়গায় স্বয়ংক্রিয়ভাবে আপডেট হয়।
Maintainability: এক জায়গায় ভেরিয়েবল ডিফাইন করে আপনি আপনার ওয়েবসাইটের থিম সহজে পরিবর্তন করতে পারেন।
Flexibility: CSS Variables এর মাধ্যমে আপনি রঙ, ফন্ট সাইজ, প্যাডিং ইত্যাদি একাধিক জায়গায় পরিবর্তন করতে পারবেন, যা কোড লেখার সময় সময় বাঁচায়।

3. SCSS এবং CSS Variables এর একত্রিত ব্যবহার

SCSS এবং CSS Variables একত্রে ব্যবহার করে আপনি আরও শক্তিশালী এবং স্কেলেবল ডিজাইন তৈরি করতে পারেন। SCSS আপনাকে কাস্টম মিক্সিন, ফাংশন এবং প্যাডিং বা মার্জিনের মতো পরিবর্তনশীল পরামর্শ প্রদান করে, যখন CSS Variables আপনাকে রিয়েল-টাইমে ডিজাইন পরিবর্তন করার সুযোগ দেয়।

SCSS and CSS Variables Example:

// _variables.scss
$primary-color: #4CAF50;
$secondary-color: #f4f4f4;
$button-hover-color: #45a049;
$font-size: 16px;

:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --button-hover-color: #{$button-hover-color};
  --font-size: #{$font-size};
}

// Import Pure.CSS
@import "https://unpkg.com/purecss@2.0.6/build/pure-min.css";

// Customizing with SCSS & CSS Variables
body {
  font-size: var(--font-size);
  background-color: var(--secondary-color);
}

.navbar {
  background-color: var(--primary-color);
}

.navbar a {
  color: white;
  padding: 14px 20px;
}

.navbar a:hover {
  background-color: var(--button-hover-color);
}

ব্যাখ্যা:

SCSS Variables: SCSS ভেরিয়েবলগুলি ব্যবহার করে আমরা রঙ, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করেছি।
CSS Variables: SCSS ভেরিয়েবলগুলি CSS Variables-এ কনভার্ট করা হয়েছে যা ব্রাউজার দিয়ে রিয়েল-টাইমে পরিবর্তন করা যায়।

SCSS এবং CSS Variables ব্যবহার করে Pure.CSS এর কাস্টমাইজেশন করতে পারেন সহজেই। SCSS আপনাকে স্টাইলিংকে আরও ডাইনামিক এবং মডুলার করার সুযোগ দেয়, যেখানে CSS Variables দিয়ে আপনি আপনার ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজযোগ্য করতে পারেন। এই দুটি টুল একত্রে ব্যবহারের মাধ্যমে আপনি আরও শক্তিশালী, স্কেলেবল এবং রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে পারবেন।

Content added By

Najjar Hossain Raju

Custom Color Schemes এবং Typography

330

Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা সহজ এবং কার্যকরী স্টাইলিং উপাদান প্রদান করে। Custom Color Schemes এবং Typography ওয়েব ডিজাইনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে, এবং Pure.CSS এর সাথে আপনি সহজেই এগুলি কাস্টমাইজ করতে পারেন। এই সেটিংসের মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও আকর্ষণীয়, ব্র্যান্ড-সুসঙ্গত এবং ব্যবহারকারী-বান্ধব তৈরি করতে পারবেন।

এখানে Custom Color Schemes এবং Typography কাস্টমাইজ করার কিছু উদাহরণ দেওয়া হলো।

১. Custom Color Schemes in Pure.CSS:

Pure.CSS এর মাধ্যমে আপনি সহজেই কাস্টম কালার স্কিম তৈরি করতে পারেন। এর জন্য আপনাকে CSS ব্যবহার করে ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, বর্ডার কালার ইত্যাদি কাস্টমাইজ করতে হবে। নিচে একটি কাস্টম কালার স্কিমের উদাহরণ দেওয়া হলো:

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Custom Color Scheme with Pure.CSS</title>
  <style>
    /* Custom Colors */
    :root {
      --primary-color: #3498db; /* Blue */
      --secondary-color: #2ecc71; /* Green */
      --background-color: #f4f4f4; /* Light Gray */
      --text-color: #333; /* Dark Gray */
      --button-color: #e74c3c; /* Red */
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    .header {
      background-color: var(--primary-color);
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 5px;
    }

    .button {
      background-color: var(--button-color);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .button:hover {
      background-color: #c0392b; /* Darker Red */
    }

    .content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Custom Color Scheme</h1>
    <p>Example of Pure.CSS with Custom Colors</p>
  </div>

  <div class="content">
    <p>This is a content area with custom color scheme applied. You can change the color palette by adjusting the variables defined above.</p>
    <button class="button">Click Me</button>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

CSS Variables: এখানে :root সিলেক্টর ব্যবহার করে কাস্টম কালার স্কিম তৈরি করা হয়েছে। আপনি এই ভ্যারিয়েবলগুলো (--primary-color, --secondary-color, --background-color, ইত্যাদি) ব্যবহার করে ওয়েবসাইটের বিভিন্ন অংশের রং কাস্টমাইজ করতে পারেন।
Body and Header Styling: background-color, color, এবং অন্যান্য প্রপার্টি ব্যবহার করে পুরো ওয়েব পেজের রং কাস্টমাইজ করা হয়েছে।
Button Hover Effect: বাটনের রঙ হোভার করার সময় পরিবর্তিত হয়, যা আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করে তোলে।

২. Typography Customization in Pure.CSS:

Typography ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ, এবং Pure.CSS এর সাথে আপনি সহজে আপনার ফন্ট এবং টাইপোগ্রাফি কাস্টমাইজ করতে পারেন। আপনি ফন্ট-ফ্যামিলি, সাইজ, লাইন-হাইট, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারবেন।

a) Customizing Font and Typography:

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <title>Typography Customization</title>
  <style>
    /* Custom Typography */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }

    h1, h2, h3 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700; /* Bold weight */
      color: #3498db; /* Custom Blue */
    }

    h2 {
      font-size: 28px;
    }

    h3 {
      font-size: 22px;
    }

    p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 15px;
    }

    .content {
      margin-top: 30px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <div class="content">
    <h1>Custom Typography</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <p>This is an example of custom typography. The font family, size, line height, and margins are all customized for this page.</p>
    <p>Notice how each element has distinct styling to create a clean and readable layout.</p>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

Font Family: এখানে Google Fonts থেকে Roboto ফন্ট ফ্যামিলি ব্যবহার করা হয়েছে। আপনি অন্য কোনো ফন্টও ব্যবহার করতে পারেন যা আপনার ডিজাইনের সাথে মানানসই হয়।
Typography Styles: font-size, line-height, font-weight ইত্যাদি কাস্টমাইজ করে শিরোনাম এবং প্যারাগ্রাফের টাইপোগ্রাফি উন্নত করা হয়েছে।
Heading Styles: h1, h2, h3 এর জন্য কাস্টম সাইজ এবং কালার সেট করা হয়েছে যাতে তারা আরও স্পষ্ট এবং পরিষ্কারভাবে দৃশ্যমান হয়।

৩. Responsive Typography with 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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Responsive Typography</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
    }

    h1 {
      font-size: 2.5rem;
      color: #3498db;
    }

    h2 {
      font-size: 2rem;
      color: #3498db;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      color: #333;
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 2rem; /* Smaller font on smaller screens */
      }

      h2 {
        font-size: 1.5rem; /* Smaller font on smaller screens */
      }

      p {
        font-size: 0.9rem; /* Adjust paragraph size */
      }
    }
  </style>
</head>
<body>

  <h1>Responsive Typography</h1>
  <h2>Heading 2</h2>
  <p>This is an example of responsive typography using Pure.CSS. The font sizes are adjusted based on the screen size, making the layout look great on both large and small devices.</p>

</body>
</html>

উদাহরণ বিশ্লেষণ:

Responsive Font Sizes: @media কুয়েরি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে হেডিং এবং প্যারাগ্রাফের ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
Mobile-Friendly Design: ছোট স্ক্রীনের জন্য ফন্ট সাইজ কমিয়ে দেওয়া হয়েছে, যা ডিজাইনকে আরও মোবাইল-ফ্রেন্ডলি এবং ব্যবহারকারী-বান্ধব করে তোলে।

Pure.CSS ব্যবহার করে আপনি সহজেই Custom Color Schemes এবং Typography কাস্টমাইজ করতে পারেন। CSS ভ্যারিয়েবলস, Google Fonts, এবং Pure.CSS এর সাহায্যে আপনি আপনার ওয়েব পেজের ডিজাইনকে একেবারে আপনার ব্র্যান্ডের রঙ এবং টাইপোগ্রাফির সাথে মানিয়ে নিতে পারেন। এছাড়া, responsive typography সেটিংস ব্যবহার করে বিভিন্ন ডিভাইসে ওয়েব পেজটি সুন্দরভাবে প্রদর্শিত হয়।

Content added By

Najjar Hossain Raju

Theming এর জন্য Best Practices

251

Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সহায়তা করে। এর মধ্যে থিমিং সিস্টেম সরাসরি নেই, তবে আপনি CSS এবং Pure.CSS এর মডুলার বৈশিষ্ট্য ব্যবহার করে একটি কাস্টম থিম তৈরি করতে পারেন।

থিমিং তৈরির সময়, Best Practices অনুসরণ করা খুবই গুরুত্বপূর্ণ যাতে ওয়েবসাইটের ডিজাইন সুন্দর, রেসপন্সিভ এবং রক্ষণাবেক্ষণযোগ্য হয়। নিচে Pure.CSS এর সাহায্যে থিমিং করার কিছু Best Practices দেওয়া হলো।

1. CSS Variables (Custom Properties) ব্যবহার করা

CSS Variables বা Custom Properties ব্যবহার করে আপনি সহজেই থিমের রঙ, ফন্ট, মার্জিন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন। এগুলি পরিবর্তন করার মাধ্যমে পুরো থিমের স্টাইল দ্রুত পরিবর্তন করা যায়।

Example: Using CSS Variables for Theming

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Pure.CSS Theming Example</title>
  <style>
    /* Define theme variables */
    :root {
      --primary-color: #0078d4;
      --secondary-color: #005fa3;
      --background-color: #f4f4f4;
      --text-color: #333;
    }

    /* Apply variables to the theme */
    body {
      background-color: var(--background-color);
      color: var(--text-color);
    }

    .button {
      background-color: var(--primary-color);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
    }

    .button:hover {
      background-color: var(--secondary-color);
    }
  </style>
</head>
<body>

  <button class="button pure-button">Click Me</button>

</body>
</html>

Best Practices:

Use Variables for Consistency: আপনি যদি থিমের রঙ, ফন্ট, স্পেসিং ইত্যাদি CSS ভেরিয়েবল হিসেবে ডিফাইন করেন, তাহলে থিম পরিবর্তন করা আরও সহজ হবে।
Use :root for Global Variables: সব থিমের ভেরিয়েবলগুলি :root সিলেক্টরের মাধ্যমে ডিফাইন করুন যাতে সেগুলি গ্লোবালি অ্যাক্সেসযোগ্য হয়।
Separate Theme Styles: থিমিংয়ের জন্য CSS ভেরিয়েবলগুলি আলাদা ফাইলে রাখুন এবং থিমের পরিবর্তন করার জন্য সেগুলিকে একটি CSS ফাইলে রিফার করুন।

2. Modular CSS Approach

Pure.CSS এর মডুলার প্রকৃতি আপনাকে আলাদা আলাদা কম্পোনেন্টস তৈরি করতে সহায়তা করে। যখন থিম তৈরি করবেন, তখন মডুলার CSS ব্যবহার করা ভাল অভ্যাস, যাতে থিমের একে অপরের সাথে সম্পর্কিত অংশগুলি একসাথে গ্রুপ করা যায়।

Example: Modular Approach for Theming

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <link rel="stylesheet" href="styles/base.css">
  <link rel="stylesheet" href="styles/buttons.css">
  <title>Modular Theming</title>
</head>
<body>

  <button class="pure-button button-primary">Primary Button</button>
  <button class="pure-button button-secondary">Secondary Button</button>

</body>
</html>

styles/base.css:

/* Base styles for the website */
body {
  font-family: Arial, sans-serif;
  background-color: var(--background-color, #f4f4f4);
  color: var(--text-color, #333);
}

styles/buttons.css:

/* Button styles for the theme */
.button-primary {
  background-color: var(--primary-color, #0078d4);
  color: white;
}

.button-primary:hover {
  background-color: var(--secondary-color, #005fa3);
}

.button-secondary {
  background-color: var(--secondary-color, #005fa3);
  color: white;
}

.button-secondary:hover {
  background-color: var(--primary-color, #0078d4);
}

Best Practices:

Separate Components into Different Files: আলাদা আলাদা CSS ফাইলে প্রতিটি UI কম্পোনেন্টের স্টাইল রাখুন, যেমন বাটন, ফর্ম, হেডার ইত্যাদি।
Use a Consistent Naming Convention: ফাইল নাম এবং ক্লাস নামগুলিতে একটি সাধারণ কনভেনশন ব্যবহার করুন, যাতে থিমের সম্পূর্ণ স্টাইল পরিষ্কার এবং সংগঠিত থাকে।
Reuse Styles: একবার যেকোনো স্টাইল ডিফাইন করলে, আপনি সেই স্টাইলটি আরও অনেক জায়গায় পুনঃব্যবহার করতে পারবেন।

3. Mobile-First Design

Responsive Design এবং Mobile-First Approach একটি ওয়েবসাইট বা অ্যাপ্লিকেশন থিম তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ। Pure.CSS তার গ্রিড সিস্টেম এবং স্টাইলিং অপশনস দিয়ে রেসপন্সিভ ডিজাইন সাপোর্ট করে, যা ওয়েবসাইটকে বিভিন্ন ডিভাইস ও স্ক্রীন সাইজে অ্যাডজাস্ট করতে সাহায্য করে।

Example: Mobile-First Responsive Theming

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Responsive Theming</title>
  <style>
    /* Mobile first base styles */
    body {
      font-family: Arial, sans-serif;
      background-color: var(--background-color, #f4f4f4);
      color: var(--text-color, #333);
    }

    .container {
      padding: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    /* Mobile styles */
    .button {
      background-color: var(--primary-color, #0078d4);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: var(--secondary-color, #005fa3);
    }

    /* Tablet and larger screens */
    @media (min-width: 600px) {
      .button {
        font-size: 18px;
        padding: 12px 25px;
      }
    }

    /* Desktop and larger screens */
    @media (min-width: 1024px) {
      .button {
        font-size: 20px;
        padding: 15px 30px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <button class="button pure-button">Click Me</button>
  </div>

</body>
</html>

Best Practices:

Start with Mobile-First Styles: শুরুতেই মোবাইল ডিভাইসের জন্য সিএসএস লিখুন, এবং তারপর বড় স্ক্রীন সাইজের জন্য মডিফিকেশন করুন।
Use Media Queries for Responsiveness: মিডিয়া কুয়েরি ব্যবহার করুন যাতে আপনার থিম বিভিন্ন ডিভাইসের জন্য উপযুক্ত হয়।
Test on Different Devices: আপনার থিম ডিজাইন নিশ্চিত করতে বিভিন্ন স্ক্রীন সাইজে পরীক্ষা করুন।

4. Dark and Light Mode Support

আজকাল বেশিরভাগ ওয়েবসাইটে Dark Mode এবং Light Mode সাপোর্ট দেওয়া হয়। আপনি CSS ভেরিয়েবলস এবং মিডিয়া কুয়েরি ব্যবহার করে এই ফিচারটি সহজেই যুক্ত করতে পারেন।

Example: Dark Mode and Light Mode

<!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="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <title>Dark Mode Theming</title>
  <style>
    :root {
      --primary-color: #0078d4;
      --secondary-color: #005fa3;
      --background-color-light: #ffffff;
      --background-color-dark: #333333;
      --text-color-light: #333333;
      --text-color-dark: #ffffff;
    }

    /* Default (Light Mode) */
    body {
      background-color: var(--background-color-light);
      color: var(--text-color-light);
    }

    .button {
      background-color: var(--primary-color);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: var(--secondary-color);
    }

    /* Dark Mode using media query */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: var(--background-color-dark);
        color: var(--text-color-dark);
      }

      .button {
        background-color: var(--primary-color);
      }

      .button:hover {
        background-color: var(--secondary-color);
      }
    }
  </style>
</head>
<body>

  <button class="button pure-button">Click Me</button>

</body>
</html>

Best Practices:

Implement Dark and Light Mode: ওয়েবসাইটের থিমের জন্য dark mode এবং light mode সাপোর্ট দিন, ব্যবহারকারীর পছন্দ অনুযায়ী থিম পরিবর্তন করতে পারেন।
CSS Media Query for Dark Mode: prefers-color-scheme মিডিয়া কুয়েরি ব্যবহার করে থিমের রঙ পরিবর্তন করুন।

Pure.CSS এর সাহায্যে থিমিং করার জন্য, আপনি CSS ভেরিয়েবলস, মিডিয়া কুয়েরি, রেসপন্সিভ ডিজাইন, এবং মোবাইল-ফার্স্ট অ্যাপ্রোচ ব্যবহার করতে পারেন। এগুলি ব্যবহারের মাধ্যমে আপনি একটি সুন্দর, রক্ষণাবেক্ষণযোগ্য এবং অ্যাডজাস্টেবল থিম তৈরি করতে পারবেন যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের প্রয়োজন অনুসারে কাস্টমাইজ করা যাবে।

Content added By

Najjar Hossain Raju

Pure.CSS এর পরিচিতি Pure.CSS সেটআপ এবং ইনস্টলেশন Pure.CSS এর Responsive Grid System Pure.CSS এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Pure.CSS এর Buttons এবং Button Groups

Pure.CSS এর Customization এবং Theming

1. Customizing Pure.CSS

Customizing Colors, Fonts, and Spacing

ব্যাখ্যা:

2. Customizing Grid System

Custom Grid Example:

ব্যাখ্যা:

3. Theming Pure.CSS

Using CSS Variables for Theming:

ব্যাখ্যা:

4. Customizing Buttons

Custom Button Example:

ব্যাখ্যা:

5. Using SASS for Advanced Customization

SASS Example:

ব্যাখ্যা:

Pure.CSS এর জন্য Custom Theme তৈরি করা

1. Pure.CSS এর জন্য Custom Theme তৈরি করা:

Custom Theme Example for Pure.CSS:

ব্যাখ্যা:

2. Adding Colors, Fonts, and Spacing for a Custom Theme

Example of Custom Colors and Fonts:

ব্যাখ্যা:

3. Advanced Customization Techniques

Customizing Hover Effects:

Responsive Layout Customization:

SCSS এবং CSS Variables ব্যবহার করে Customization

1. SCSS দিয়ে Pure.CSS কাস্টমাইজেশন

SCSS Installation:

SCSS Example for Customizing Pure.CSS:

Explanation:

Compiling SCSS to CSS:

2. CSS Variables দিয়ে Pure.CSS কাস্টমাইজেশন

CSS Variables Example for Customizing Pure.CSS:

ব্যাখ্যা:

Advantages of Using CSS Variables:

3. SCSS এবং CSS Variables এর একত্রিত ব্যবহার

SCSS and CSS Variables Example:

ব্যাখ্যা:

Custom Color Schemes এবং Typography

১. Custom Color Schemes in Pure.CSS:

উদাহরণ বিশ্লেষণ:

২. Typography Customization in Pure.CSS:

a) Customizing Font and Typography:

উদাহরণ বিশ্লেষণ:

৩. Responsive Typography with Pure.CSS:

উদাহরণ বিশ্লেষণ:

Theming এর জন্য Best Practices

1. CSS Variables (Custom Properties) ব্যবহার করা

Example: Using CSS Variables for Theming

Best Practices:

2. Modular CSS Approach

Example: Modular Approach for Theming

Best Practices:

3. Mobile-First Design

Example: Mobile-First Responsive Theming

Best Practices:

4. Dark and Light Mode Support

Example: Dark Mode and Light Mode

Best Practices:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!