rastrillo डिज़ाइन सिस्टम

डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी।

rastrillo ऐप्स को यह सब पहले ही दिन मिल जाता है, पर डिज़ाइन सिस्टम कोई भी इस्तेमाल कर सकता है। JavaScript से प्रोग्रेसिव एन्हांसमेंट, पर JavaScript ज़रूरी नहीं।

स्टाइलशीट

tokens.css ढाँचा है: कंपोनेंट क्लास, लेआउट, और टाइप, स्पेसिंग व रेडियस के स्केल। इसके मान संदर्भ हैं, जो कहीं और तय होते हैं। themes/<name>.css रंग, टाइप फ़ैमिली और आकार है: एक ही :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित होता है।

स्क्रिप्ट

rastrillo.js प्रोग्रेसिव-एन्हांसमेंट शिम है: फ़्रैगमेंट पोलिंग, बिज़ी स्टेट, लाइट डिसमिस। select.js और datetime.js एन्हांसमेंट हैं — जब तक कोई कंट्रोल खुद न चुने तब तक हर एक निष्क्रिय, और हर एक अलग से मिटाया जा सकता है।

हर फ़ाइल का वज़न

अलग-अलग हिस्सों के फ़ाइल आकार।

• tokens.cssसंरचना: हर कंपोनेंट क्लास, हर स्केल, और कहीं कोई रंग लिटरल नहीं। हर थीम में वही फ़ाइल।122033 बाइट
• theme-day.cssday थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।10828 बाइट
• theme-plain.cssplain थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।10286 बाइट
• theme-signal.csssignal थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।11083 बाइट
• rastrillo.jsप्रोग्रेसिव-एन्हांसमेंट शिम: फ़्रैगमेंट पोलिंग, बिज़ी स्टेट और लाइट डिसमिस। हर स्कैफ़ोल्ड की गई ऐप को यह मिलती है।16364 बाइट
• select.jsfield-select का खोजने योग्य कॉम्बोबॉक्स। जब तक कोई select खुद data-rst-select से न चुने तब तक निष्क्रिय, और अलग से हटाया जा सकता है।11919 बाइट
• datetime.jsडेट फ़ील्ड का प्राकृतिक-भाषा इनपुट। जब तक कोई फ़ील्ड data-rst-date या data-rst-time से न चुने तब तक निष्क्रिय, और अलग से हटाया जा सकता है।76584 बाइट
• calendar.jsउस फ़ील्ड का कैलेंडर बटन जो महीने की ग्रिड खोलता है। जब तक datetime.js उससे पैनल न माँगे तब तक निष्क्रिय, और अलग से हटाया जा सकता है: इसके बिना बटन ब्राउज़र के अपने पिकर पर लौट आता है।22725 बाइट

नई ऐप को कुल 260708 बाइट CSS और JavaScript मिलते हैं: tokens.css, एक थीम, और स्क्रिप्ट।

नई rastrillo ऐप में

rastrillo new इन्हें ऐप की static डायरेक्ट्री में लिखता है और लेआउट से लिंक करता है, पहले tokens.css। उसके बाद ये आपके हैं: इन्हें बदलिए, या जो काम न आए उसे हटा दीजिए।

rastrillo new --theme=signal myapp

थीम दो बार पिन होती है। --theme तय करता है कि कौन-सी भेजी गई थीम static/theme.css में कॉपी हो, और ऐप बनते समय यह दर्ज हो जाता है।

const vendoredTheme = "signal"

फ़्रेमवर्क के बिना इस्तेमाल

ऊपर दिए नाम ही लिंक हैं। tokens.css और एक थीम लीजिए और पूरा विज़ुअल सिस्टम आपके पास है: सीधी-सादी क्लास, आम HTML, कोई बिल्ड स्टेप नहीं।

अपग्रेड करना

वह जाल जिसे जानना बेहतर है, इससे पहले कि वह आपकी एक दोपहर ले ले: tokens.css स्कैफ़ोल्ड के समय ऐप की static डायरेक्ट्री में कॉपी होकर वहीं जम जाता है, जबकि जिन partial को वह स्टाइल करता है वे मॉड्यूल के साथ अपग्रेड होते रहते हैं। ऐप चुपचाप नए मार्कअप को पुराने CSS पर चला सकती है। अपग्रेड करते समय tokens.css दोबारा कॉपी कीजिए, और उसके साथ थीम और स्क्रिप्ट भी।

rastrillo doctor ऐप की जमी हुई फ़ाइलों की तुलना मॉड्यूल वाली फ़ाइलों से करेगा और उन्हें दोबारा कॉपी करने की पेशकश करेगा।