نظام تصميم rastrillo

نظرة عامة على كل ما يوفّره نظام التصميم. السمة: day. اللغة: العربية.

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

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

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

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

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

وزن كل ملف

أحجام ملفات الأجزاء المختلفة.

• tokens.cssالبنية: كل أصناف المكوّنات وكل السلالم، ولا قيمة لون صريحة في أي موضع. الملف نفسه تحت كل سمة.122033 بايت
• theme-day.cssاللون وعائلة الخط والشكل لسمة day: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().10828 بايت
• theme-plain.cssاللون وعائلة الخط والشكل لسمة plain: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().10286 بايت
• theme-signal.cssاللون وعائلة الخط والشكل لسمة signal: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().11083 بايت
• rastrillo.jsطبقة التحسين التدريجي: استقصاء الأجزاء وحالات الانشغال والإغلاق الخفيف. يتسلّمها كل تطبيق مولَّد.16364 بايت
• select.jsصندوق field-select القابل للبحث. خامل حتى ينضمّ إليه عنصر select عبر data-rst-select، ويُحذف وحده.11919 بايت
• datetime.jsإدخال التواريخ باللغة الطبيعية. خامل حتى ينضمّ إليه حقل عبر data-rst-date أو data-rst-time، ويُحذف وحده.76584 بايت
• calendar.jsشبكة الشهر التي يفتحها زر التقويم في ذلك الحقل. خاملة حتى يطلب منها datetime.js لوحةً، وتُحذف وحدها: بدونها يعود الزر إلى منتقي المتصفّح نفسه.22725 بايت

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

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