शुरुआत

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

स्टाइलशीट

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

स्क्रिप्ट

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

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

आकार KiB में हैं। आगंतुक gzip वाला संस्करण डाउनलोड करता है।

tokens.cssसंरचना: हर कंपोनेंट क्लास, हर स्केल, और कहीं कोई रंग लिटरल नहीं। हर थीम में वही फ़ाइल।लिखे रूप में 281 · gzip के बाद 73 · टिप्पणियाँ हटाकर gzip के बाद 21
theme-day.cssday थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।लिखे रूप में 27 · gzip के बाद 7.3 · टिप्पणियाँ हटाकर gzip के बाद 1.7
theme-plain.cssplain थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।लिखे रूप में 18 · gzip के बाद 4.2 · टिप्पणियाँ हटाकर gzip के बाद 1.1
theme-signal.csssignal थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।लिखे रूप में 18 · gzip के बाद 4.6 · टिप्पणियाँ हटाकर gzip के बाद 1.2
shell.cssफ़ोन पर पन्नों के बीच की स्लाइड, sidebar और console शेल के लिए। shell.js के साथ हटाया जा सकता है।लिखे रूप में 4.2 · gzip के बाद 1.1 · टिप्पणियाँ हटाकर gzip के बाद 0.5
rastrillo.jsप्रोग्रेसिव-एन्हांसमेंट शिम: फ़्रैगमेंट पोलिंग, लाइट डिसमिस और स्विच को खींचना। हर स्कैफ़ोल्ड की गई ऐप को यह मिलती है।लिखे रूप में 19 · gzip के बाद 7.2 · टिप्पणियाँ हटाकर gzip के बाद 2.6
busy.jsबिज़ी नियम: फ़ॉर्म भेजे जाते समय उसका बटन कम से कम 650ms तक स्पिनर दिखाता है और दूसरा सबमिट ठुकराता है; वापस जाने पर वह फिर से तैयार हो जाता है। हर स्कैफ़ोल्ड की गई ऐप को यह मिलती है।लिखे रूप में 15 · gzip के बाद 5.3 · टिप्पणियाँ हटाकर gzip के बाद 1.3
live.jsलाइव पेज: ऐसे हिस्से जो सर्वर के यह बताने पर कि उनका डेटा बदला है, खुद अपडेट हो जाते हैं, और ऐसे फ़ॉर्म जो उसी जगह सेव होते हैं। जब तक कोई पेज rastrillo-live मेटा टैग न रखे तब तक निष्क्रिय, और अकेले हटाया जा सकता है।लिखे रूप में 29 · gzip के बाद 10.0 · टिप्पणियाँ हटाकर gzip के बाद 5.0
light.jsवह रोशनी जिसे गहराई की शैलियाँ पढ़ती हैं: समय के हिसाब से पड़ती छायाएँ, और पॉइंटर के नीचे वाले बटन पर एक चमक। स्थिर डिज़ाइन के लिए इसे हटा दें।लिखे रूप में 11 · gzip के बाद 4.1 · टिप्पणियाँ हटाकर gzip के बाद 2.1
anchor.jsजिन ब्राउज़रों में CSS एंकर पोज़िशनिंग नहीं है, उनमें ड्रॉपडाउन का मेन्यू स्क्रीन पर रखता है। जहाँ यह है, वहाँ कुछ नहीं करता: जब आपके सभी समर्थित ब्राउज़रों में यह आ जाए, इसे हटा दें।लिखे रूप में 3.2 · gzip के बाद 1.4 · टिप्पणियाँ हटाकर gzip के बाद 0.6
shell.jssidebar और console शेल के लिए फ़ोन नेविगेशन: पन्नों के बीच की स्लाइड, इतिहास को दोबारा इस्तेमाल करने वाला वापस, और फ़ोकस उसी हिस्से पर लौटना जिसे आपने छोड़ा था। अलग से हटाया जा सकता है।लिखे रूप में 8.0 · gzip के बाद 3.2 · टिप्पणियाँ हटाकर gzip के बाद 1.4
transition.jscolumn, stage और topbar पन्नों पर पन्ने का ट्रांज़िशन छोड़ दिए जाने पर त्रुटि लॉग होने से रोकता है। sidebar और console पन्नों को इसकी ज़रूरत नहीं है।लिखे रूप में 0.9 · gzip के बाद 0.4 · टिप्पणियाँ हटाकर gzip के बाद 0.4
select.jsfield-select का खोजने योग्य कॉम्बोबॉक्स। जब तक कोई select खुद data-rst-select से न चुने तब तक निष्क्रिय, और अलग से हटाया जा सकता है।लिखे रूप में 55 · gzip के बाद 18 · टिप्पणियाँ हटाकर gzip के बाद 8.0
datetime.jsडेट फ़ील्ड का प्राकृतिक-भाषा इनपुट। जब तक कोई फ़ील्ड data-rst-date या data-rst-time से न चुने तब तक निष्क्रिय, और अलग से हटाया जा सकता है।लिखे रूप में 76 · gzip के बाद 24 · टिप्पणियाँ हटाकर gzip के बाद 11
calendar.jsउस फ़ील्ड का कैलेंडर बटन जो महीने की ग्रिड खोलता है। जब तक datetime.js उससे पैनल न माँगे तब तक निष्क्रिय, और अलग से हटाया जा सकता है: इसके बिना बटन ब्राउज़र के अपने पिकर पर लौट आता है।लिखे रूप में 22 · gzip के बाद 7.1 · टिप्पणियाँ हटाकर gzip के बाद 3.1

नई ऐप को लिखे रूप में 552 KiB CSS और JavaScript मिलता है, gzip के बाद 162 KiB: tokens.css, एक थीम, और स्क्रिप्ट।

नई rastrillo ऐप में

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

rastrillo new --theme=day myapp

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

const vendoredTheme = "day"

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

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

इन्हें इसी क्रम में लिंक करें, पहले tokens.css:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-day.css">

अपग्रेड करना

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

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