منصوبے کے بارے میں

GlassKit ایک خالص CSS کمپوننٹ لائبریری ہے جو گلاس مورفزم (glassmorphism) جمالیات پر مبنی ہے، جس کے README کے مطابق یہ ایپل کے iOS 26 "Liquid Glass" اور visionOS ڈیزائن لینگویج سے متاثر ہے۔ اس کا مقصد ایسی ایپس اور انٹرفیسز بنانا ہے جو کسی JavaScript فریم ورک یا بلڈ سٹیپ کے بغیر نیٹیو اور جدید محسوس ہوں۔ ریپوزٹری میں کیا شامل ہے - 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: LLMs اور کوڈنگ اسسٹنٹس کے لیے ایک منظم کمپوننٹ ریفرنس - یہ پروجیکٹ MIT لائسنس کے تحت ہے اور اسے Jungherz GmbH نے تیار کیا ہے۔ پبلک ڈیمو، ڈاکومنٹیشن اور شوکیس glasskit.jungherz.com پر دستیاب ہیں۔ کمپوننٹس اور بلڈنگ بلاکس README کمپوننٹس کو مختلف گروپس میں تقسیم کرتا ہے: نیویگیشن اور لے آؤٹ (aurora گریڈینٹ کے ساتھ بیک گراؤنڈ، نیو بار، گول پل آئیکن بٹن، فکسڈ باٹم ٹیب بار، ایک فلوٹنگ پل شکل کا ٹیب بار ویرینٹ، ایکورڈین، ڈیوائیڈر)، مواد (ٹائٹل، کارڈ، گلو کارڈ ویرینٹ، بیج، اوتار، اسٹیٹس نوٹس، اور iOS اسٹائل کی گروپڈ لسٹ)، ایکشنز اور فیڈ بیک (پرائمری، سیکنڈری اور ٹرشری بٹنز، بلر اوورلے کے ساتھ موڈل، ٹوسٹ، فیڈ اور اسکیل اینیمیشن کے ساتھ اینکرڈ پاپ اوور)، اور فارم ایلیمنٹس (ان پٹ، ٹیکسٹ ایریا، سلیکٹ، سرچ فیلڈ، iOS اسٹائل ٹوگل، چیک باکس، ریڈیو، رینج سلائیڈر اور پروگریس بار)۔ مجموعی طور پر، پروجیکٹ 24 کمپوننٹس فراہم کرنے کا دعویٰ کرتا ہے۔ کمپوننٹس کے علاوہ، لائبریری gl- پری فکس کے ساتھ یوٹیلیٹی کلاسز فراہم کرتی ہے جو فلیکس لے آؤٹ، اسپیسنگ، ٹیکسٹ الائنمنٹ اور سائزنگ کے لیے ہیں، جبکہ کمپوننٹ کلاسز glass- پری فکس کے ساتھ ہیں۔ نام رکھنے کا طریقہ BEM جیسا ہے تاکہ کلاسز موجودہ اسٹائل شیٹس سے نہ ٹکرائیں۔ تھیمنگ اور ڈیزائن ٹوکنز ڈارک اور لائٹ موڈ دونوں سپورٹڈ ہیں اور html ایلیمنٹ پر data-theme ایٹریبیوٹ سیٹ کر کے تبدیل کیے جا سکتے ہیں؛ ایک تیار شدہ تھیم ٹوگل کمپوننٹ بھی شامل ہے۔ تقریباً ہر بصری ویلیو کو CSS کسٹم پراپرٹی کے طور پر ظاہر کیا گیا ہے: پرائمری اور ٹیکسٹ کلرز، پانچ گلاس سرفس گریڈیشنز، تین بلر لیولز، کارڈز، بٹنز اور ان پٹس کے لیے ریڈیائی، اسپیسنگ اسکیل، اور شیڈو اور ان سیٹ ٹوکنز۔ کسٹم برانڈنگ --gl-color-primary اور اس کے ڈارک ویرینٹ کے ذریعے کی جاتی ہے؛ ورژن 1.11.0 سے گریڈینٹ مڈ پوائنٹ، فوکس رنگ، بٹن گلو اور رینج تھمب ان ویلیوز سے اخذ کیے جاتے ہیں۔ README میں ذکر ہے کہ برانڈ ویری ایبلز کو :root پر ڈیکلیئر کیا جانا چاہیے کیونکہ کسٹم پراپرٹیز وہاں تبدیل ہوتی ہیں جہاں وہ ڈیکلیئر کی جاتی ہیں۔ Web Components اور Shadow DOM چونکہ بیرونی اسٹائل شیٹس شیڈو باؤنڈری کو عبور نہیں کرتیں، اس لیے لائبریری ایک ES ماڈیول ایکسپورٹ کرتی ہے جو glassSheet فراہم کرتا ہے، ایک مشترکہ CSSStyleSheet جسے adoptedStyleSheets کو اسائن کیا جا سکتا ہے، ساتھ ہی ایک فال بیک کے طور پر css اسٹرنگ ایکسپورٹ بھی ہے۔ README سادہ کسٹم ایلیمنٹ، Hybrids.js اور Lit کے ساتھ استعمال دکھاتا ہے، اور واضح کرتا ہے کہ --gl-* کسٹم پراپرٹیز اور تھیم سوئچنگ اب بھی شیڈو روٹس میں کام کرتے ہیں۔ انسٹالیشن اور ہم آہنگی GlassKit کو jsDelivr یا unpkg سے لنک ٹیگ کے ذریعے لوڈ کیا جا سکتا ہے، npm سے @jungherjungherz-de/glasskit کے طور پر انسٹال کیا جا سکتا ہے اور CSS یا JavaScript سے امپورٹ کیا جا سکتا ہے، یا براہ راست GitHub ریلیزز سے ڈاؤن لوڈ کیا جا سکتا ہے۔ README کے مطابق اس کا سائز 51 KB را (raw)، 39 KB منی فائیڈ اور 6.5 KB گزیپڈ (gzipped) ہے اور اس کی کوئی بیرونی ڈیپینڈینسی نہیں ہے۔ گلاس ایفیکٹ backdrop-filter پر منحصر ہے؛ README میں Safari، Chrome/Edge اور Samsung Internet میں مکمل سپورٹ، اور ورژن 103 سے Firefox میں سپورٹ کا ذکر ہے، یہ بھی نوٹ کیا گیا ہے کہ backdrop-filter کے بغیر انٹرفیس سادہ بیک گراؤنڈ کلرز کے ساتھ قابل استعمال رہتا ہے۔ اس لائبریری کو تین حصوں پر مشتمل فیملی کی CSS بنیاد کے طور پر پیش کیا گیا ہے: GlassKit Elements ایپ UIs کے لیے ونیلا JavaScript کسٹم ایلیمنٹس فراہم کرتا ہے، اور GlassKit Web ایک Astro ویب سائٹ ٹیمپلیٹ ہے جس میں اسی ڈیزائن لینگویج پر مبنی سیکشنز، i18n اور SEO شامل ہیں۔ BEM جیسی نام سازی، موجودہ ڈیزائن ٹوکنز، ڈارک اور لائٹ موڈ کوریج، اور کم از کم 44px کے ٹچ ٹارگٹس کے ساتھ تعاون کی دعوت دی گئی ہے۔