আপনার ডিজাইন সিস্টেমটি তৈরি করুন, অংশ 3: রঙ

এই নিবন্ধে, আমরা সিএসএসে কোনও রঙিন সিস্টেম কীভাবে সেট করবেন এবং এক্ষেত্রে সিস্টেমটি ব্যবহার করা ও বজায় রাখা সহজ কিনা তা নিশ্চিত করার জন্য সর্বোত্তম অনুশীলনগুলি কী তা একবার দেখে নিই।

এই নিবন্ধটি আমাদের ওয়েব উপাদানগুলির লাইব্রেরি দ্বারা অনুপ্রাণিত ডিজাইন সিস্টেমগুলির একটি সিরিজের অংশ। লাইব্রেরিটি সিএসএস গ্লোবালগুলির একটি শক্তিশালী সিস্টেমে নির্ভর করে। সুতরাং আমরা আমাদের লাইব্রেরির গ্লোবাল স্টাইলটি সেট করতে শিখেছি এমন জিনিসগুলি ভাগ করে নিচ্ছি!

নিবন্ধ সিরিজ:
- পর্ব 1: টাইপোগ্রাফি
- পার্ট 2: গ্রিড এবং লেআউট
- পার্ট 3: রঙ
- পার্ট 4: ব্যবধান
- পর্ব 5: আইকন
- অংশ 6: বোতাম

আমরা রঙিন সম্পাদক চালু করেছি! একটি ওয়েব ডিজাইন সরঞ্জাম যা কোডিহাউস ফ্রেমওয়ার্কের সাথে সামঞ্জস্যপূর্ণ রঙিন প্যালেট এবং থিম তৈরি করে।

রঙের ভেরিয়েবল 101

অন্যান্য সিএসএস গ্লোবালের বিপরীতে, একটি কোড সিস্টেম তৈরি করা কোডিং সম্পর্কে 10% এবং শব্দার্থবিদ্যা সম্পর্কে 90%। আপনার _colors.scss ফাইলটিতে কাজ করার সময় আপনি নিম্নলিখিত লক্ষ্যগুলি মাথায় রাখতে চান:

  1. রঙের ভেরিয়েবলগুলি মনে রাখা সহজ হতে হবে → আপনি যে কোনও সময় বাছাই করতে গেলে যে কোনও সময় বিশ্বব্যাপী ফাইলটি পরীক্ষা করতে চান না।
  2. সিস্টেমটি আপডেট করা সহজ হতে হবে → আপনি রং যুক্ত করবেন, মুছে ফেলবেন, এবং নাম পরিবর্তন করবেন। নিশ্চিত করুন যে এটি করা জটিল নয়।
  3. সিস্টেমে কেবলমাত্র প্রয়োজনীয় রঙগুলি অন্তর্ভুক্ত করা উচিত - আমরা এটি একাধিকবার শুনেছি ... তবুও আমরা সবসময় আমাদের প্রয়োজনের চেয়ে আরও বেশি রঙ দিয়ে শেষ করি! ডিজাইন সিস্টেমের আসল সাফল্য কীটি প্রয়োজনীয় নয় এমন সমস্তগুলি মুছে ফেলছে (রঙগুলি অন্তর্ভুক্ত)।

শব্দার্থ বনাম ঘোষণামূলক রঙ

রঙের ভেরিয়েবলগুলি সেট করার ক্ষেত্রে, দুটি মূল পন্থা থাকে: শব্দার্থক এবং ঘোষণামূলক রঙ।

শব্দার্থিক পদ্ধতির মত দেখাচ্ছে:

যদিও এখানে একটি ঘোষণামূলক পদ্ধতির উদাহরণ রয়েছে:

এগুলির কোনওটিই ভুল নয়। আপনার প্রয়োজনীয়তা পূরণ করে এমনটিকে বাছাই করা অনেকগুলি কারণের উপর নির্ভর করে (উদাঃ, প্রকল্পের আকার, ব্র্যান্ডিং রঙের প্রাসঙ্গিকতা ইত্যাদি)।

আমাদের ফ্রেমওয়ার্কের _colors.scss ফাইলটিতে কাজ করার সময়, আমাকে অ্যাকাউন্টে নিতে হবে ব্যবহারকারীরা এটি সম্পাদন করতে যাচ্ছেন (100%)। এর অর্থ হ'ল এমনকি যদি ঘোষণামূলক পদ্ধতির ব্যবহার সহজতর ছিল, তবে এটি রক্ষণাবেক্ষণ করাও সহজ system

প্রয়োজনীয় রঙ প্যালেট

প্রথম ধাপে ওয়েব উপাদানগুলি তৈরি করতে প্রয়োজনীয় ন্যূনতম সংখ্যার রঙ ঘোষণা করা হয়েছিল। সাধারণভাবে, প্রয়োজনীয় রঙ প্যালেটটি গঠিত:

  1. মূল / প্রাথমিক রঙ / লিঙ্কগুলির জন্য ব্যবহৃত, বোতামের পটভূমি রঙ ইত্যাদি general সাধারণভাবে, এটি প্রধান কল-টু-অ্যাকশন রঙ।
  2. অ্যাকসেন্ট রঙ the পৃষ্ঠায় গুরুত্বপূর্ণ কিছু হাইলাইট করতে ব্যবহৃত। এটি প্রাথমিক রঙের ভিন্নতা হওয়া উচিত নয়, তবে পরিপূরক রঙ।
  3. নিরপেক্ষ রঙগুলির স্কেল → এটি সাধারণত পাঠ্য উপাদান, সূক্ষ্ম উপাদান, সীমানা ইত্যাদির জন্য ব্যবহৃত গ্রেস্কেল টোনগুলির একটি স্কেল generally
  4. প্রতিক্রিয়া রঙ → সাফল্য, ত্রুটি, সতর্কতা।

এর মধ্যে কয়েকটি রঙের একটি বৈচিত্রের প্রয়োজন হয় (গা l় / হালকা সংস্করণ), যা প্রায়শই ইন্টারঅ্যাক্টিভিটি হাইলাইট করার জন্য ব্যবহৃত হয় (উদাঃ,: হোভার /: সক্রিয় অবস্থা)।

সিএসএসে, এটি অনুবাদ করে:

* দ্রষ্টব্য: আমরা রঙিন ফাংশনগুলি সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ আরজিবিএ কোডে অনুবাদ করতে পোস্টক্যাস-রঙ-মোড-ফাংশন প্লাগইন ব্যবহার করছি।

উপরের স্নিপেটটি রঙ প্যালেট উপস্থাপন করে: প্রকল্পে ব্যবহৃত সমস্ত রঙ।

প্রাথমিক ও অ্যাকসেন্ট রঙের বিভিন্নতা রঙ ফাংশন ব্যবহার করে উত্পন্ন হয়। আপনার কাছে একটি ডেমো এইচটিএমএল ফাইল থাকলে (এবং আমরা আমাদের কাঠামোর মধ্যে থাকি) এই পদ্ধতিটি কার্যকর হবে যাতে আপনি প্রাপ্ত রংগুলির সাথে সন্তুষ্ট না হওয়া অবধি ফাংশনগুলির মানগুলিকে ট্যুইক করতে পারেন। শেডগুলি (বা নিরপেক্ষ) রঙ chroma.js ব্যবহার করে তৈরি করা হয়। এই ক্ষেত্রে, ফাংশনগুলি ব্যবহার করা আদর্শ ছিল না, কারণ আপনার সাধারণত দুটি বিপরীত রঙ থাকে (কালো এবং সাদা), এবং আপনাকে এই দুটি রঙের উপর ভিত্তি করে স্কেল মানগুলি তৈরি করতে হবে।

মিশ্রণে অর্থপূর্ণ রঙ যুক্ত করা হচ্ছে

একবার রঙ প্যালেট প্রস্তুত হয়ে গেলে, আমরা অর্থপূর্ণ রঙগুলি যুক্ত করতে পারি। শব্দার্থক রঙগুলি তৈরি করার অর্থ রঙগুলির সংখ্যা বৃদ্ধি করা নয়, তবে শব্দার্থিক উল্লেখগুলি ব্যবহার করে রঙগুলি বিতরণ করা।

কেন আমি মনে করি এটি একটি ভাল পদ্ধতির

প্রথমত, এই সিস্টেমটি দুটি প্রয়োজনীয় রঙের উপর নির্ভর করে: প্রাথমিক এবং অ্যাকসেন্ট রঙ। এর অর্থ হ'ল যখন আপনাকে রঙের ভেরিয়েবলগুলি ব্যবহার করতে হবে তখন সেই ভেরিয়েবলগুলি কী উপস্থাপন করে তা মনে রাখা আপনার পক্ষে কঠিন হবে না (এমনকি যদি আপনি "নীল" এবং "লাল" এর মতো ঘোষণামূলক নাম ব্যবহার না করেন)।

আপনার সিস্টেমে আরও রঙ অন্তর্ভুক্ত করতে হতে পারে (উদাঃ, একটি গৌণ রঙ)। আপনি এখনও মাত্র তিনটি রঙ নিয়ে কাজ করছেন। 10+ প্রধান রঙের ভিত্তিতে একটি সিস্টেম পরিচালনা করা আপনার পক্ষে যে পদ্ধতির ব্যবহার করা হচ্ছে তা নির্বিশেষে কঠিন হতে পারে, তাই আপনি এটিকে সহজ করার বিষয়টি বিবেচনা করতে পারেন।

গ্রেস্কেল রঙগুলি একটি ভিন্ন নামকরণের কনভেনশন ব্যবহার করে: ভেরিয়েবলের শেষে সংখ্যাটি বেশি, গা ,় রঙ।
আপনি কোন নিরপেক্ষ রঙটি প্রয়োগ করতে চান তা নিশ্চিত না হলে এই পদ্ধতিটি কার্যকর হয়ে ওঠে। ধূসর -2 যদি খুব সূক্ষ্ম দেখায় তবে আপনি ধূসর -3 চেষ্টা করতে পারেন। আপনি লক্ষ্য করেছেন যে কিছু শেডগুলি অনুপস্থিত (উদাঃ, ধূসর -5)। আমাদের ক্ষেত্রে এগুলি অপরিহার্য ছিল না (ওয়েব উপাদানগুলি তৈরি করার সময় আমরা কখনই সেগুলি ব্যবহার করি নি), তাই আমরা তাদের রঙ প্যালেট থেকে সরিয়েছি।

মূলত তিনটি মূল কারণে মিশ্রণে রঙিন রঙ যুক্ত করা হয়:

  1. _Colors.scss ফাইলটি যে কোনও সময় আপনাকে কোনও রঙ পরিবর্তন করার দরকার পরে সত্যের উত্স হয়ে যায়। আপনি কি টেক্সট শিরোনামের উপাদানগুলি গাer় হওয়া উচিত বলে মনে করেন? _Colors.scss ফাইলটি খুলুন এবং রঙ-পাঠ্য-শিরোনাম ভেরিয়েবল সম্পাদনা করুন।
  2. উদাহরণস্বরূপ, আপনি যদি কোনও বর্ণ-সীমানা সংজ্ঞায়িত করেন তবে পরের বার আপনি যখন কোনও সীমান্ত উপাদান তৈরি করবেন তখন আপনাকে অন্য ধরণের উপাদানগুলিতে কোন ধূসর বর্ণটি ব্যবহার করছেন তা সন্ধান করার দরকার নেই। একই ধারণাটি কেবল সীমান্ত নয়, বহু উপাদানের ক্ষেত্রে প্রযোজ্য।
  3. এটি বিভিন্ন থিম তৈরি এবং বজায় রাখার জন্য এটি একটি কেকের টুকরো তৈরি করে।

Theming

প্লাগিন বা পলিফিলের উপর নির্ভর না করেই আমরা সিএসএস ভেরিয়েবলগুলি ব্যবহার করতে পারার সাথে সাথে রঙিন থিম তৈরি করা অত্যন্ত সহজ হবে *! তার মানে কি আমরা আজ থিম তৈরি করতে পারি না? না, আমরা পারি আমাদের দুটি বিকল্প আছে।

* আমাদের কাঠামোর মধ্যে, আমরা CSS ভেরিয়েবলগুলি সংকলন করতে postcss-css-ভেরিয়েবল প্লাগইন ব্যবহার করি। এটি বর্তমানে একটি সিএসএস শ্রেণিতে পরিবর্তনশীল আপডেট করার পক্ষে সমর্থন করে না।

বিকল্প 1 যাইহোক সিএসএস ভেরিয়েবল আপডেট করছে। যে ব্রাউজারগুলি ভেরিয়েবলগুলি সমর্থন করে না তারা "ডিফল্ট" রঙের থিম প্রদর্শন করবে। যতক্ষণ না সামগ্রীটি অ্যাক্সেসযোগ্য হয় এটি কোনও সমস্যা নয়।

উদাহরণস্বরূপ, আপনার একটি ডিফল্ট রঙ থিম রয়েছে → সাদা ব্যাকগ্রাউন্ড এবং কালো পাঠ্য রঙ এবং একটি। থিম-গা dark় → কালো ব্যাকগ্রাউন্ড এবং সাদা পাঠ্য রঙ। তারপরে আপনি দুটি উপাদান তৈরি করুন, একটি ডিফল্ট থিম সহ, অন্যটি। ডার্ক-থিম সহ। যদি ডিফল্ট থিম সহ উভয় উপাদান ব্যবহারকারীর অভিজ্ঞতা প্রভাবিত না করে তবে আপনি ডার্ক-থিমটিকে বর্ধন (alচ্ছিক) হিসাবে বিবেচনা করতে পারবেন। এই ক্ষেত্রে, ভেরিয়েবলগুলি সর্বত্র সমর্থিত না হলেও বিভিন্ন থিম তৈরি করতে আপডেট করা বোধগম্য sense

আপনি কী কী সিএসএস ভেরিয়েবলগুলি আপডেট করে এটি একটি নতুন থিম তৈরি করেন:

আমি এই সমাধানটি পছন্দ করি কারণ এটি রঙ সংশোধনকে বিমূর্ত করে এবং এটি আপনাকে আপনার রঙের থিমগুলি একক ফাইলে রাখতে দেয়। এটি করার মাধ্যমে, আমরা কেবলমাত্র একটি CSS ক্লাস প্রয়োগ করে প্রতিটি উপাদানগুলির অবস্থা (থিম-এ থেকে থিম-বিতে) সম্ভাব্যভাবে পরিবর্তন করতে পারি।

বিকল্প 2 এমন সমস্ত উপাদানকে লক্ষ্যবস্তু করা হবে যার চেহারা থিম দ্বারা প্রভাবিত হয়। এই পদ্ধতির সুবিধাটি হ'ল এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত। তবে পুরোপুরি সিএসএস ভেরিয়েবলের উপর ভিত্তি করে তুলনা করা এতটা সহজ নয়।

এখানে পদক্ষেপ 2 বিকল্পের একটি উদাহরণ:

এখন আপনি জানেন যে আমরা কীভাবে আমাদের কাঠামোর রঙগুলিকে হ্যান্ডেল করার পরিকল্পনা করছি! আপনার মতামত / পরামর্শ থাকলে কমেন্টে আমাদের জানাবেন!

আমি আশা করি আপনি নিবন্ধটি উপভোগ করেছেন! আরও ওয়েব ডিজাইন নাগেটের জন্য, মিডিয়াম বা টুইটারে এখানে আমাদের অনুসরণ করুন।