প্রকল্প সম্পর্কে

GlassKit হলো একটি বিশুদ্ধ-CSS কম্পোনেন্ট লাইব্রেরি যা গ্লাসমরফিজম নান্দনিকতার ওপর ভিত্তি করে তৈরি। এর README-তে উল্লেখ করা হয়েছে যে এটি অ্যাপলের iOS 26 "Liquid Glass" এবং visionOS ডিজাইন ল্যাঙ্গুয়েজ দ্বারা অনুপ্রাণিত। এটি এমন অ্যাপ এবং ইন্টারফেসের জন্য তৈরি যা কোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক বা বিল্ড স্টেপ ছাড়াই নেটিভ এবং আধুনিক অনুভূতি দেয়। রিপোজিটরিতে যা যা রয়েছে: - glasskit.css: সমস্ত কম্পোনেন্ট এবং ডিজাইন টোকেন সমৃদ্ধ কোর লাইব্রেরি - glasskit.min.css: রিলিজের সময় তৈরি করা একটি মিনিফাইড বিল্ড - glasskit-styles.js: Shadow DOM-এর ভেতরে ব্যবহারের জন্য একটি Constructable Stylesheet - theme-override.css: কাস্টম ব্র্যান্ড থিমের জন্য একটি টেমপ্লেট যাতে চারটি উদাহরণ থিম (Ocean Blue, Emerald Green, Rose এবং একটি খালি কাস্টম স্লট) অন্তর্ভুক্ত রয়েছে - index.html, showcase.html এবং docs.html, সাথে de/ ফোল্ডারে এই পৃষ্ঠাগুলোর জার্মান অনুবাদ - SKILL.md: LLM এবং কোডিং অ্যাসিস্ট্যান্টদের জন্য একটি কাঠামোগত কম্পোনেন্ট রেফারেন্স - প্রজেক্টটি MIT লাইসেন্সপ্রাপ্ত এবং Jungherz GmbH দ্বারা তৈরি। একটি পাবলিক ডেমো, ডকুমেন্টেশন এবং শোকেস glasskit.jungherz.com-এ হোস্ট করা হয়েছে। কম্পোনেন্ট এবং বিল্ডিং ব্লকস: README-তে কম্পোনেন্টগুলোকে কয়েকটি ভাগে ভাগ করা হয়েছে: নেভিগেশন এবং লেআউট (অরোরা গ্রেডিয়েন্টসহ ব্যাকগ্রাউন্ড, নেভ বার, রাউন্ড পিল আইকন বাটন, ফিক্সড বটম ট্যাব বার, একটি ফ্লোটিং পিল-শেপড ট্যাব বার ভেরিয়েন্ট এবং ঐচ্ছিক অ্যাকসেসরি ক্যাপসুল, অ্যাকর্ডিয়ন, ডিভাইডার), কন্টেন্ট (টাইটেল, কার্ড, একটি গ্লো কার্ড ভেরিয়েন্ট, ব্যাজ, অবতার, স্ট্যাটাস নোটিশ এবং একটি iOS-স্টাইল গ্রুপড লিস্ট), অ্যাকশন এবং ফিডব্যাক (প্রাইমারি, সেকেন্ডারি এবং টারশিয়ারি বাটন, ব্লার ওভারলেসহ মোডাল, টোস্ট, ফেড এবং স্কেল অ্যানিমেশনসহ অ্যাঙ্কর্ড পপওভার), এবং ফর্ম এলিমেন্ট (ইনপুট, টেক্সট এরিয়া, সিলেক্ট, সার্চ ফিল্ড, iOS-স্টাইল টগল, চেকবক্স, রেডিও, রেঞ্জ স্লাইডার এবং প্রগ্রেস বার)। মোট ২৪টি কম্পোনেন্ট এই প্রজেক্টে রয়েছে। কম্পোনেন্টের বাইরে, লাইব্রেরিটি gl- প্রিফিক্সসহ ইউটিলিটি ক্লাস প্রদান করে যা ফ্লেক্স লেআউট, স্পেসিং, টেক্সট অ্যালাইনমেন্ট এবং সাইজিংয়ের জন্য ব্যবহৃত হয়, পাশাপাশি glass- প্রিফিক্সযুক্ত কম্পোনেন্ট ক্লাসগুলোও রয়েছে। এর নামকরণ BEM-এর মতো কনভেনশন অনুসরণ করে, যাতে বিদ্যমান স্টাইলশিটের সাথে ক্লাসের সংঘাত না ঘটে। থিমিং এবং ডিজাইন টোকেন: ডার্ক এবং লাইট মোড উভয়ই সমর্থিত এবং html এলিমেন্টে data-theme অ্যাট্রিবিউট সেট করে পরিবর্তন করা যায়; এর সাথে একটি তৈরি করা থিম টগল কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে। প্রায় প্রতিটি ভিজ্যুয়াল ভ্যালু CSS কাস্টম প্রপার্টি হিসেবে প্রকাশ করা হয়েছে: প্রাইমারি এবং টেক্সট কালার, পাঁচটি গ্লাস সারফেস গ্রেডেশন, তিনটি ব্লার লেভেল, কার্ড, বাটন এবং ইনপুটের জন্য রেডিয়াস, একটি স্পেসিং স্কেল এবং শ্যাডো ও ইনসেট টোকেন। কাস্টম ব্র্যান্ডিং করা হয় --gl-color-primary এবং এর ডার্ক ভেরিয়েন্ট ঘোষণা করার মাধ্যমে; সংস্করণ ১.১১.০ থেকে গ্রেডিয়েন্ট মিডপয়েন্ট, ফোকাস রিং, বাটন গ্লো এবং রেঞ্জ থাম্ব এই ভ্যালুগুলো থেকে উদ্ভূত হয়। README-তে উল্লেখ করা হয়েছে যে ব্র্যান্ড ভেরিয়েবলগুলো :root-এ ঘোষণা করা উচিত কারণ কাস্টম প্রপার্টিগুলো যেখানে ঘোষণা করা হয় সেখানেই প্রতিস্থাপিত হয়। ওয়েব কম্পোনেন্ট এবং Shadow DOM: যেহেতু এক্সটার্নাল স্টাইলশিট শ্যাডো বাউন্ডারি অতিক্রম করতে পারে না, তাই লাইব্রেরিটি একটি ES মডিউল এক্সপোর্ট করে যা glassSheet প্রদান করে। এটি একটি শেয়ারড CSSStyleSheet যা adoptedStyleSheets-এ অ্যাসাইন করা যেতে পারে, সাথে একটি ফলব্যাক হিসেবে css স্ট্রিং এক্সপোর্ট রয়েছে। README-তে সাধারণ কাস্টম এলিমেন্ট, Hybrids.js এবং Lit-এর সাথে এর ব্যবহারের উদাহরণ দেখানো হয়েছে এবং উল্লেখ করা হয়েছে যে --gl-* কাস্টম প্রপার্টি এবং থিম সুইচিং শ্যাডো রুটগুলোর মধ্যেও কাজ করে। ইনস্টলেশন এবং সামঞ্জস্যতা: GlassKit-কে jsDelivr বা unpkg থেকে লিঙ্ক ট্যাগের মাধ্যমে লোড করা যেতে পারে, npm থেকে @jungherjungherz-de/glasskit হিসেবে ইনস্টল করা যেতে পারে এবং CSS বা জাভাস্ক্রিপ্ট থেকে ইমপোর্ট করা যেতে পারে, অথবা সরাসরি GitHub রিলিজ থেকে ডাউনলোড করা যেতে পারে। README অনুযায়ী এর সাইজ raw-তে ৫১ KB, মিনিফাইড অবস্থায় ৩৯ KB এবং gzipped অবস্থায় ৬.৫ KB, যার কোনো এক্সটার্নাল ডিপেন্ডেন্সি নেই। গ্লাস ইফেক্টটি backdrop-filter-এর ওপর নির্ভরশীল; README-তে Safari, Chrome/Edge এবং Samsung Internet-এ পূর্ণ সমর্থন এবং সংস্করণ ১০৩ থেকে Firefox-এ সমর্থনের কথা বলা হয়েছে। উল্লেখ করা হয়েছে যে backdrop-filter ছাড়াও ইন্টারফেসটি সাধারণ ব্যাকগ্রাউন্ড কালারের মাধ্যমে ব্যবহারযোগ্য থাকে। লাইব্রেরিটি একটি তিন-অংশের পরিবারের CSS ভিত্তি হিসেবে উপস্থাপন করা হয়েছে: GlassKit Elements অ্যাপ UI-এর জন্য ভ্যানিলা জাভাস্ক্রিপ্ট কাস্টম এলিমেন্ট সরবরাহ করে এবং GlassKit Web হলো একটি Astro ওয়েবসাইট টেমপ্লেট যাতে একই ডিজাইন ল্যাঙ্গুয়েজের ওপর ভিত্তি করে সেকশন, i18n এবং SEO তৈরি করা হয়েছে। BEM-এর মতো নামকরণ, বিদ্যমান ডিজাইন টোকেন, ডার্ক ও লাইট মোড কভারেজ এবং অন্তত ৪৪ পিক্সেলের টাচ টার্গেট অনুসরণ করে অবদান রাখার আমন্ত্রণ জানানো হয়েছে।