البداية

تحصل تطبيقات rastrillo على هذا كله من اليوم الأول، لكن نظام التصميم متاح للجميع. تحسين تدريجي بـ JavaScript، دون اشتراط JavaScript.

أوراق الأنماط

ملف tokens.css هو البنية: أصناف المكوّنات، والتخطيط، وسلالم الخط والتباعد ونصف القطر. والقيم فيه مراجع تُضبط في مكان آخر. أما themes/<name>.css فهو اللون وعائلة الخط والشكل: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().

النصوص البرمجية

‏rastrillo.js هو طبقة التحسين التدريجي: استقصاء الأجزاء، والإغلاق الخفيف، وسحب المفتاح. وbusy.js هو قاعدة الانشغال. وanchor.js يُبقي القوائم المنسدلة داخل الشاشة حيث لا يستطيع CSS ذلك. أما select.js وdatetime.js فتحسينان، كلٌّ منهما خامل حتى ينضمّ إليه عنصر تحكّم، وكلٌّ منهما يُحذف وحده.

وزن كل ملف

الأحجام بوحدة KiB. ما يُنزّله الزائر هو النسخة المضغوطة بـ gzip.

• tokens.cssالبنية: كل أصناف المكوّنات وكل السلالم، ولا قيمة لون صريحة في أي موضع. الملف نفسه تحت كل سمة.٢٨١ كما كُتب · ٧٣ بعد ضغط gzip · ٢١ بعد ضغط gzip دون التعليقات
• theme-day.cssاللون وعائلة الخط والشكل لسمة day: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().٢٧ كما كُتب · ٧٫٣ بعد ضغط gzip · ١٫٧ بعد ضغط gzip دون التعليقات
• theme-plain.cssاللون وعائلة الخط والشكل لسمة plain: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().١٨ كما كُتب · ٤٫٢ بعد ضغط gzip · ١٫١ بعد ضغط gzip دون التعليقات
• theme-signal.cssاللون وعائلة الخط والشكل لسمة signal: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().١٨ كما كُتب · ٤٫٦ بعد ضغط gzip · ١٫٢ بعد ضغط gzip دون التعليقات
• shell.cssالانزلاق بين الصفحات على الهاتف، للهيكلين sidebar وconsole. يُحذف مع shell.js.٤٫٢ كما كُتب · ١٫١ بعد ضغط gzip · ٠٫٥ بعد ضغط gzip دون التعليقات
• rastrillo.jsطبقة التحسين التدريجي: استقصاء الأجزاء والإغلاق الخفيف وسحب المفتاح. يتسلّمها كل تطبيق مولَّد.١٩ كما كُتب · ٧٫٢ بعد ضغط gzip · ٢٫٦ بعد ضغط gzip دون التعليقات
• busy.jsقاعدة الانشغال: أثناء إرسال النموذج يُظهر زرّه مؤشر تحميل مدةً لا تقل عن 650 ملّي ثانية ويرفض إرسالًا ثانيًا، والرجوع يعيده كما كان. يتسلّمها كل تطبيق مولَّد.١٥ كما كُتب · ٥٫٣ بعد ضغط gzip · ١٫٣ بعد ضغط gzip دون التعليقات
• live.jsصفحات حيّة: أقسام تتحدّث حين يخبر الخادم بأن بياناتها تغيّرت، ونماذج تُحفظ في مكانها. لا تفعل شيئًا حتى تحمل الصفحة وسم meta الخاص بـ rastrillo-live، ويمكن حذفها على حدة.٢٩ كما كُتب · ١٠٫٠ بعد ضغط gzip · ٥٫٠ بعد ضغط gzip دون التعليقات
• light.jsالضوء الذي تقرأه أنماط العمق: ظلال مضاءة بحسب الساعة، ولمعة على الزر تحت المؤشر. احذفه لتحصل على التصميم الساكن.١١ كما كُتب · ٤٫١ بعد ضغط gzip · ٢٫١ بعد ضغط gzip دون التعليقات
• anchor.jsيُبقي قائمة العناصر المنسدلة داخل الشاشة في المتصفحات التي لا تدعم تموضع المرساة في CSS. لا يفعل شيئًا حيث تدعمه: احذفه حين تدعمه كل المتصفحات التي تستهدفها.٣٫٢ كما كُتب · ١٫٤ بعد ضغط gzip · ٠٫٦ بعد ضغط gzip دون التعليقات
• shell.jsالتنقّل على الهاتف للهيكلين sidebar وconsole: الانزلاق بين الصفحات، وزر الرجوع الذي يعيد استخدام السجلّ، وإعادة التركيز إلى القسم الذي غادرته. يُحذف وحده.٨٫٠ كما كُتب · ٣٫٢ بعد ضغط gzip · ١٫٤ بعد ضغط gzip دون التعليقات
• transition.jsيمنع تسجيل خطأ عند تخطّي انتقال الصفحة في صفحات column وstage وtopbar. لا تحتاجه صفحات sidebar وconsole.٠٫٩ كما كُتب · ٠٫٤ بعد ضغط gzip · ٠٫٤ بعد ضغط gzip دون التعليقات
• select.jsصندوق field-select القابل للبحث. خامل حتى ينضمّ إليه عنصر select عبر data-rst-select، ويُحذف وحده.٥٥ كما كُتب · ١٨ بعد ضغط gzip · ٨٫٠ بعد ضغط gzip دون التعليقات
• datetime.jsإدخال التواريخ باللغة الطبيعية. خامل حتى ينضمّ إليه حقل عبر data-rst-date أو data-rst-time، ويُحذف وحده.٧٦ كما كُتب · ٢٤ بعد ضغط gzip · ١١ بعد ضغط gzip دون التعليقات
• calendar.jsشبكة الشهر التي يفتحها زر التقويم في ذلك الحقل. خاملة حتى يطلب منها datetime.js لوحةً، وتُحذف وحدها: بدونها يعود الزر إلى منتقي المتصفّح نفسه.٢٢ كما كُتب · ٧٫١ بعد ضغط gzip · ٣٫١ بعد ضغط gzip دون التعليقات

يحصل التطبيق الجديد على ٥٥٢ KiB من CSS وJavaScript كما كُتبت، و١٦٢ KiB بعد ضغط gzip: 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 الخاص بالتطبيق عند توليد هيكله ويتجمّد هناك، بينما تظل الأجزاء التي ينسّقها تُحدَّث مع الوحدة. وقد يشغّل التطبيق ترميزًا جديدًا فوق CSS قديم دون أن ينبس. أعِد نسخ tokens.css عند الترقية، ومعه السمة والنصوص البرمجية.

سيقارن rastrillo doctor ملفات التطبيق المجمّدة بملفات الوحدة ويعرض إعادة نسخها.