ستساعدك المقالة التالية: يقدم Google Web.dev تخطيطات مكونة من سطر واحد
قام موقع Web.dev التابع لشركة Google بنشر مجموعة من التخطيطات التي تعتمد على سطر واحد من CSS لتشغيلها. هذه التخطيطات متوافقة مع الأجهزة المحمولة وسريعة التحميل وجاهزة للدمج في مشروع ويب.
إثبات المفهوم
تهدف هذه التخطيطات إلى إظهار ما يمكن إنجازه باستخدام سطر واحد فقط من CSS.
على سبيل المثال، ما يلي هو CSS للتخطيط الأساسي الذي يتكون من رأس ومنطقة محتوى رئيسية ومنطقة تذييل:
.ex4 .الوالد {
العرض: الشبكة؛
صفوف قالب الشبكة: تلقائي 1fr تلقائي؛
}
لقطة شاشة لتخطيط العظام العارية
تخطيط الكأس المقدسة
هذا مثال على التصميم الكلاسيكي. ويتميز برأس وأشرطة جانبية على أي موقع من منطقة المحتوى الرئيسية وتذييل الصفحة.
توضح هذه الرسوم المتحركة كيفية ضبط التخطيط تلقائيًا ليناسب حجم الشاشة دون استخدام استعلامات الوسائط.
يوجد أدناه ملف CSS للتخطيط أعلاه:
.ex5 .الوالد {
العرض: الشبكة؛
قالب الشبكة: تلقائي 1fr تلقائي / تلقائي 1fr تلقائي؛
}
رأس .ex5 {
الحشو: 2ريم؛
عمود الشبكة: 1 / 4؛
}
.ex5 .الجانب الأيسر {
عمود الشبكة: 1 / 2؛
}
.ex5 الرئيسي {
عمود الشبكة: 2 / 3؛
}
.ex5 .الجانب الأيمن {
عمود الشبكة: 3 / 4؛
}
تذييل .ex5 {
عمود الشبكة: 1 / 4؛
}
لا توجد استعلامات الوسائط
تعتمد معظم تصميمات الويب المستجيبة للجوال على ما يسمى باستعلامات الوسائط. استعلامات الوسائط هي قواعد CSS تُستخدم لتحديد ورقة أنماط مختلفة اعتمادًا على الجهاز المستخدم لعرض موقع الويب.
عندما يكون الجهاز عبارة عن جهاز لوحي، يتم استخدام مجموعة من أنماط CSS المحسنة لحجم شاشة الجهاز اللوحي، وتغيير حجم الصور والخطوط والتخطيطات لتلك الشاشة.
الأمر المثير للاهتمام في هذه التخطيطات المكونة من سطر واحد هو أنها لا تستخدم استعلامات الوسائط لتكون متوافقة مع الأجهزة المحمولة. يساعد ذلك في التخلص من الكثير من أكواد CSS ويجعل هذه التخطيطات متوافقة مع الأجهزة المحمولة وسطح المكتب دون الحاجة إلى JavaScript أو CSS إضافية.
تخطيطات وليس قوالب
هذه تخطيطات. وهذا يعني أنها العظام المجردة لصفحة الويب.
إنه ما يمكن لأي شخص أن يبدأ به لإنشاء تخطيط سريع للغاية.
هذه التخطيطات ليست قوالب WordPress أيضًا. لا تزال بحاجة إلى استكمالها بالشعارات وألوان الخلفية والأدوات وما إلى ذلك.
ومع ذلك، بمجرد اكتمال هذا الشكل والمظهر، يمكن تحويل قالب HTML إلى قالب WordPress.
أمثلة على ما يمكن القيام به
هذه أمثلة على ما يمكن القيام به على تخطيط بسيط. ومع ذلك، يمكن دمج الأمثلة في أجزاء من الموقع.
تساعد مشاهدة الفيديو لأن المضيف يشرح CSS وكيفية عمله.
شاهد الفيديو هنا:
تحقق من الموقع هنا:
