قرارات التصميم الملهمة: مجلة Avaunt

أكره الاعتراف بذلك ، ولكن منذ خمس أو ست سنوات بدأ اهتمامي بتصميم الويب يتضاءل. بالطبع ، كان امتلاك شركة يعني أنني يجب أن أستمر في العمل ، لكن البقاء متحمسًا وتقديم أفضل ما لدي من أفكار للعملاء أصبح صراعًا يوميًا.

إن النظر إلى الويب لم يحسن حافزي. لقد أصيب تصميم الويب بالركود ، واستبدلت القدرة على التنبؤ الإبداع ، وبدت الأفكار أقل أهمية من البيانات.

لم تعد الأسباب التي جعلتني أستمتع بالعمل على الويب ذات صلة. فقد التصميم بهجه. حتى أن المجموعات المعقدة من أدوات البناء والمعالجات حلت محل المتعة البسيطة لكتابة HTML و CSS.

عندما بدأت العمل مع الجريدة الأسطورية ومصمم المجلات مارك بورتر ، أصبحت مفتونًا بالإخراج الفني والتصميم التحريري. كشخص لم يدرس في مدرسة الفنون ، كان كل شيء عن هذا المجال من التصميم مثيرًا وجديدًا. قرأت جميع الكتب حول المخرجين الفنيين المؤثرين الذين استطعت أن أجدهم وبدأت في جمع المجلات من الأماكن التي زرتها حول العالم.

كلما أصبحت أكثر إلهامًا من خلال التصميم السحري ، كلما ارتد حماسي لتصميم الويب بشكل أسرع. تساءلت لماذا يعتقد العديد من مصممي الويب أن تصميم الطباعة قديم الطراز وغير ذي صلة بعملهم. فكرت في سبب نقل القليل جدًا مما يجعل تصميم الطباعة مميزًا إلى الويب.

كان هدفي هو البحث عن أمثلة ملهمة للتصميم التحريري ، ودراسة ما يجعلها فريدة من نوعها ، وإيجاد طرق لتكييف ما تعلمته لإنشاء تصميمات أكثر إقناعًا وجاذبية وخيالية للويب.

خزائن كتبي الآن مليئة بإلهام تصميم المجلات ، لكن مجموعتي لا تزال تنمو. لدي مساحة محدودة ، لذلك أنا من الصعب إرضاء ما أحصل عليه. أشتري مجموعة متنوعة ونادراً ما أجمع أكثر من عدد من نفس العنوان.

أبحث عن تخطيطات صفحات مثيرة وطباعة ملهمة وطرق مبتكرة لدمج النص مع الصور. عندما تحتوي إحدى المجلات على الكثير من عناصر التصميم الممتعة ، أشتريها. ومع ذلك ، إذا تضمنت إحدى المجلات القليل من الإلهام ، فأنا أعترف بأنني لست فوق تصويرها قبل وضعها على الرف.

أشتري مجلات جديدة بانتظام قدر المستطاع ، وقبل أسبوع من عيد الميلاد ، التقيت أنا وعدد قليل من الأصدقاء في لندن. لا تكتمل الرحلة إلى "Smoke" بدون توقف في Magma ، واشتريت العديد من المجلات الجديدة. بعد أن شرحت إضافة الإلهام الخاصة بي ، اقترح أحد الأصدقاء أن أكتب عن سبب وجودي بتصميم مجلات ملهم جدًا وكيف تؤثر المجلات على عملي.

أثارت تلك المحادثة فكرة سلسلة حول اتخاذ قرارات تصميم ملهمة. كل شهر ، سأختار مطبوعة ، وسأناقش ما الذي يجعل تصميمها مميزًا ، وكيف يمكننا تعلم الدروس التي ستساعدنا على القيام بعمل أفضل للويب.

كمستخدم متحمس لـ HTML و CSS ، سأشرح أيضًا كيفية تنفيذ الأفكار الجديدة باستخدام أحدث التقنيات ؛ شبكة CSS و Flexbox والأشكال.

يسعدني إخبارك بأنني مصدر إلهام وحافز مرة أخرى للتصميم للويب وآمل أن تكون هذه السلسلة مصدر إلهام لك أيضًا.

مجلة Avaunt: توثيق الاستثنائي

نظرة واحدة إليّ ستخبرك أنني لست مغامرًا كثيرًا. أنا لا أعتبر نفسي مثقفة بشكل خاص وزوجتي تمزح بانتظام حول ما تقوله عن افتقاري إلى الأسلوب.

إذن ما الذي جذبني إلى مجلة Avaunt وتغطيتها لـ "المغامرة" و "الثقافة" و "الأسلوب" عندما يكون هناك الكثير من المجلات المتنافسة والمتنوعة؟

غالبًا ما يستغرق الأمر بضع صفحات فقط لأقرر ما إذا كانت إحدى المجلات تقدم الإلهام الذي أبحث عنه. يجب أن يبرز شيء ما في تلك الثواني القليلة الأولى لكي أنظر عن كثب ، سواء كان ذلك تخطيطًا مثيرًا للصفحة ، أو معالجة مطبعية ملهمة ، أو مزيجًا مبتكرًا من الصور مع النص.

تمتلك Avaunt كل هذه الأشياء ، ولكن أكثر ما أدهشني هو الطريقة التي استخدم بها مديرها الفني اللون والتخطيط والكتابة بطرق متنوعة مع الحفاظ على إحساس متسق في جميع أنحاء المجلة. هناك خيوط تصميم مميزة يتم عرضها من خلال صفحات Avaunt. تعد الاستخدامات الجريئة لمحرف الاستنسل الرقيق ومحرف sans-serif الهندسي مدهشة بشكل خاص ، كما هو الحال مع تكرار الأسود والأبيض والأحمر الذي يستخدمه مصممو Avaunt بعدة طرق. العديد من خيارات Avaunt الإبداعية تتسم بالمغامرة مثل القصص التي ترويها.

تخصص الكثير من المجلات فروقها القليلة الأولى للإعلان اللامع ، ويفعل Avaunt الشيء نفسه. عند تجاوز هذه الإعلانات ، تجد صفحة محتويات Avaunt وشبكتها المعيارية الرائعة المكونة من أربعة أعمدة.

يحافظ هذا التخطيط على المحتوى مرتبًا داخل المناطق المكانية ولكنه يحافظ على الطاقة عن طريق جعل كل منطقة بحجم مختلف. يمكن تكييف هذا التصميم مع العديد من أنواع المحتوى عبر الإنترنت ويجب أن يكون سهل التنفيذ باستخدام CSS Grid. أنا أتشوق لتجربة ذلك.

بالنسبة للعناوين الرئيسية والعناوين الأخرى التي تحتوي على ثقل ، تستخدم Avaunt MFred ، المصمم مبدئيًا لمجلة Elephant بواسطة Matt Willey في عام 2011. واصل Matt توجيه إطلاق Avaunt وقام بتكليف محرف استنسل Serif لـ عناوين المجلة الجريئة والأرقام المميزة.

تم تصميم Avaunt Stencil في عام 2014 بواسطة استوديو A2-TYPE في لندن والذي جعله متاحًا للترخيص منذ ذلك الحين. هناك العديد من خطوط الاستنسل المتاحة ، ولكن قد يكون من الصعب العثور على واحد يجمع بين الجرأة والأناقة - هل تبحث عن stencil serif المستضافة على Google Fonts؟ سيكون Stardos اختيارًا جيدًا لنوع حجم العرض. بحاجة إلى شيء فريد من نوعه ، جرب Caslon Stencil من URW.

لا ينتهي استخدام Avaunt للشبكة المعيارية بصفحة المحتويات ، وهو الأساس لانتشار فضول متحف الفنون التطبيقية في موسكو للحرب الباردة الذي جذبني إلى المجلة لأول مرة. يستخدم هذا الانتشار شبكة معيارية من ثلاثة أعمدة ومناطق مكانية بأحجام مختلفة.

ما يذهلني في انتشار الحرب الباردة هو كيف تتحد الوحدات في الصفحة اليسرى لتشكل عمودًا واحدًا لمحتوى النص. حتى مع هذا العمود ، تظل نسب شبكة الوحدة النمطية تحدد موضع العناصر وحجمها بالداخل.

في حين أن تصميم العديد من صفحات Avaunt مخصص لتجربة قراءة رائعة ، فإن العديد من الآخرين يدفعون الشبكة ويسحبون أنماط الطباعة الأساسية الخاصة بهم في اتجاهات مختلفة. نص أبيض على خلفيات داكنة ، حيزات ذات ألوان زاهية حيث يتم قطع الكائنات لمزجها مع الخلفية. قبعات أولية عملاقة تملأ عرض العمود ، وأغطية كبيرة منسدلة التي تهيمن على الصفحة.

تضيف تصميمات Avaunt المرحة الاهتمام ، ويخلق ترتيب الصفحات إيقاعًا نادرًا ما أراه على الإنترنت. يتم الجمع بين هذه الاختلافات في التصميم من خلال الاستخدام المتسق لـ Antwerp - المصمم أيضًا بواسطة A2-TYPE - كمحرف لعرض النص ، وموضوع باللون الأسود والأبيض والأحمر يتم تشغيله في جميع أنحاء المجلة.

دراسة تصميم مجلة Avaunt يمكن أن تكون مصدر إلهام وتعليم. كيف يمكن للشبكة المعيارية أن تساعد في تنظيم المحتوى بطرق إبداعية دون الشعور بالثبات. (سأعلمك المزيد عن الشبكات المعيارية لاحقًا.)

كيف يمكن لمجموعة أنماط محددة جيدًا أن تصبح أساسًا لتصميمات مميزة ومتنوعة ، وأخيرًا كيف يمكن أن يساعد إنشاء إيقاع عبر سلسلة من الصفحات القراء على الاستمرار في التفاعل.

في المرة القادمة التي تمر فيها بأقرب متجر مجلات إليك ، انطلق في التقاط نسخة من مجلة Avaunt. يتعلق الأمر بالمغامرة ، لكنني أراهن أنه يمكن أن يساعد في إلهام تصميماتك لتكون أكثر ميلًا إلى المغامرة أيضًا.

قل مرحبًا بالأعمدة النحيلة

لما يبدو وكأنه أبدية ، كان هناك القليل جدًا من الابتكار في تصميم الشبكة للويب. كنت آمل أن تؤدي تحديات التصميم سريع الاستجابة إلى مناهج إبداعية للتخطيط ، ولكن للأسف يبدو أن العكس هو الصحيح.

بدلاً من تصميمات الشبكة الأصلية ، أصبح ترتيب المحتوى من مجموعة واحدة أو اثنتين أو ثلاثة أو أربعة هو القاعدة. تظل شبكات الإطار ، مثل تلك المضمنة في Bootstrap ، نقطة البداية للعديد من المصممين ، سواء كانوا يستخدمون تلك الأطر أم لا.

صحيح أن هناك المزيد من الأسباب التي تجعل الكثير من الويب يبدو مشابهًا لمصممي الويب الذين يستخدمون نفس الشبكة. بعد كل شيء ، كانت هناك اتفاقيات مماثلة للمجلات والصحف لعقود من الزمن ، ولكن بطريقة ما لم تفقد المجلات شخصيتها بالطريقة التي فقدت بها العديد من مواقع الويب.

أنا أبحث دائمًا عن إلهام التصميم والمجلات مصدر ثري. ذكّرتني قراءة Avaunt بتقنية مررت بها منذ سنوات ولكني لم أجربها. تضيف هذه التقنية عمودًا ضيقًا إضافيًا إلى شبكة عمود تقليدية. في تصميم الطباعة ، غالبًا ما يشار إلى هذا العمود الضيق باسم "عمود أو مقياس غير شرعي" ويصف كتلة من المحتوى لا تتوافق مع بقية الشبكة. (نظرًا لكون هذا المنشور مناسبًا للعائلة ، سأطلق عليه "العمود النحيف").

في هذه الأمثلة الأولى ، يؤدي ضغط صورة في عمود واحد إلى تقليل وزنها البصري وإزعاج توازن تكويني. كما أن جعل الصورة تملأ عمودين قياسيين يخل بالتوازن الدقيق.

يؤدي تقسيم العمود الأخير ، ثم إضافة نصف عرضه إلى آخر ، إلى إنشاء مساحة مثالية لصورتي ، ونتيجة إجمالية أكثر إرضاءً.

قد أستخدم عمودًا نحيفًا للإبلاغ عن عرض عناصر التصميم. يتوافق شعار Mini Cooper هذا مع عرض عمودي النحيف ، ويشعر حجمه بالتوازن مع باقي تكويناتي.

في بعض الأحيان ، لا يتلاءم المحتوى مع عمود واحد بشكل مريح ، ولكن من خلال الجمع بين عرض الأعمدة القياسية والنحيفة ، أقوم بإنشاء مساحة أكبر ومقياس أفضل لتشغيل النص. يمكنني وضع عمود نحيف في أي مكان داخل التخطيط إلى أي مكان أحتاج فيه إلى المحتوى الخاص بي.

يضيف العمود النحيف الفارغ مسافة بيضاء تسمح للعين بالتجول حول التصميم. كما أن عدم التناسق الناتج عن وضع عمود رفيع بين عمودين قياسيين يجعل التصميم المنظم أكثر ديناميكية وحيوية.

عمود نحيف فارغ آخر يحفر هامشًا عريضًا في هذا التصميم ويقصر النص الجاري على عمود واحد ، بحيث يعكس ارتفاعه التنسيق الرأسي للصورة. يمكنني أيضًا استخدام عمود نحيف لتحويل عناصر الطباعة إلى عناصر تصميم مثيرة.

تطوير مع أعمدة نحيفة

تصميمات مثل هذه سهلة التنفيذ بشكل مدهش باستخدام CSS اليوم. أنا بحاجة فقط إلى أربعة عناصر هيكلية ؛ شعار ، رأس ، شكل ، بالإضافة إلى مقال يحتوي على نص التشغيل الخاص بي:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

أبدأ بتصميم للشاشات متوسطة الحجم من خلال تطبيق CSS Grid على عنصر الجسم ضمن استعلام الوسائط الأول. في هذا الحجم ، لا أحتاج إلى عمود نحيف ، لذا بدلاً من ذلك ، أقوم بتطوير شبكة متناظرة من ثلاثة أعمدة تتوسع بشكل متساوٍ لملء عرض منفذ العرض:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

أستخدم أرقام الأسطر لوضع العناصر في أعمدة الشبكة والصفوف الخاصة بي. أضع شعاري في العمود الأول النحيف والصف الأول باستخدام محدد سمة مطابقة السلسلة الفرعية. يستهدف هذا صورة "شعار" في أي مكان في قيمتها المصدر:

 [src*="logo"] { grid-column: 1; grid-row: 1; }

بعد ذلك ، أضع عنصر الرأس - الذي يحتوي على العنوان الرئيسي والفقرة الأولى - في الصف الثاني. يؤدي استخدام أرقام الأسطر من 1 إلى -1 إلى نشر هذا الرأس عبر جميع الأعمدة:

 header { grid-column: 1 / -1; grid-row: 2; }

مع display:grid; مطبقًا ، تصبح جميع العناصر المتحدرة المباشرة لحاوية الشبكة عناصر شبكة ، والتي يمكنني وضعها باستخدام المناطق أو أرقام الأسطر أو الأسماء.

يشتمل هذا التصميم على عنصر شكل مع صورة صغيرة كبيرة ، بالإضافة إلى نص حول تصميم نموذج Cooper الأصلي. هذا الرقم مهم لأنه يصف العلاقة بين img و figcaption. ومع ذلك ، في حين أن هذا الرقم يجعل الترميز الخاص بي أكثر وضوحًا ، إلا أنني أفقد القدرة على وضع img و figcaption باستخدام CSS Grid ، لأنه لا يوجد أحفاد مباشر من الجسم حيث حددت شبكتي.

لحسن الحظ ، هناك خاصية CSS والتي - عند استخدامها بعناية - يمكنها التغلب على هذه المشكلة. لست بحاجة إلى تصميم الشكل ، فأنا بحاجة فقط إلى تصميم شكله والتعليق عليه. من خلال تطبيق display:contents; بالنسبة إلى شخصيتي ، فقد قمت بإزالته بشكل فعال من DOM لأغراض التصميم ، لذلك يحل المتحدرون منه مكانه:

 figure { display: contents; }

تجدر الإشارة إلى أنه على الرغم من أن العرض يزيل شكلي بشكل فعال من DOM لأغراض التصميم ، إلا أن أي خصائص ترث - بما في ذلك أحجام الخطوط وأنماطها - لا تزال موروثة:

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

أضع مقالتي ونمط نصها في ثلاثة أعمدة باستخدام تخطيط متعدد الأعمدة ، أحد خصائص CSS المفضلة لدي:

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

حان الوقت لتنفيذ تصميم يتضمن عمودًا نحيفًا للشاشات الأكبر حجمًا. أستخدم استعلام وسائط لعزل هذه الأنماط الجديدة ، ثم أقوم بإنشاء شبكة من خمسة أعمدة تبدأ بعمود نحيف بعرض 1fr:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 

ثم أقوم بإضافة قيم لتغيير موضع العنوان ، و img و figcaption ، والمقال ، مع تذكر إعادة تعيين عدد الأعمدة لمطابقة عرضه الجديد:

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

إن التغيير الجذري لكيفية ظهور التصميم باستخدام CSS وحده ، دون إجراء تغييرات على بنية HTML يجعلني أبتسم ، حتى بعد ما يقرب من عقدين من الزمن. أبتسم أيضًا عندما أقوم بتغيير التكوين لإنشاء تخطيط مختلف تمامًا دون تغيير الشبكة. بالنسبة لهذا التصميم البديل ، أهدف إلى الحصول على مظهر أكثر تنظيماً.

لتحسين إمكانية قراءة النص الجاري ، أقسمه إلى ثلاثة أعمدة. بعد ذلك ، لفصل كتلة المحتوى هذه عن عناصر النص الأخرى ، أضع عمودي النحيف بين أول عمودين قياسيين. ليست هناك حاجة لتغيير هيكل HTML الخاص بي. كل ما أحتاجه هو تغييرات طفيفة على قيم الشبكة في ورقة الأنماط الخاصة بي. هذه المرة ، تأتي قيمة العمود النحيف العريض 1fr بين عرضين قياسيين للعمود:

 @media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }

أضع رأسي في الصف الثاني والمقال في صف أسفله مباشرة:

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

لأن كلا من img و figcaption ليسوا من نسل مباشر لعنصر الجسم حيث حددت شبكتي ، لوضعهم أحتاج إلى display:contents; الملكية مرة أخرى:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

اعتمادًا على كيفية استخدامك لها ، يمكن أن يؤدي إدخال أعمدة رفيعة في تصميماتك إلى جعل المحتوى أكثر قابلية للقراءة أو تحويل التخطيط الثابت إلى تخطيط يبدو ديناميكيًا وحيويًا.

الأعمدة النحيفة هي مجرد مثال واحد لتعلم تقنية من الطباعة واستخدامها لتحسين تصميم الويب. كنت أتشوق لتجربة أعمدة نحيفة ولم أشعر بخيبة أمل.

غالبًا ما تكون إضافة عمود نحيف إلى تصميماتك قرارًا ملهمًا. يمنحك مرونة إضافية ويمكنه تحويل التصميم الثابت بخلاف ذلك إلى تخطيط مليء بالطاقة.

تصميم شبكات معيارية

تحتوي مجلة Avaunt على الكثير من التخطيطات الملهمة ، لكني أريد التركيز على صفحتين على وجه الخصوص. يحتوي هذا النطاق على كائنات "تصميم الحرب الباردة" داخل التصميم والتي يمكن تطبيقها على مجموعة متنوعة من أنواع المحتوى.

للوهلة الأولى ، يمكن أن تبدو الشبكات المعيارية معقدة ، ومع ذلك ، من السهل التعامل معها. يفاجئني أن عددًا قليلاً جدًا من مصممي الويب يستخدمونها. أريد تغيير ذلك.

عندما تستخدم الشبكات المعيارية بعناية ، يمكنها ملء تصميماتك بالطاقة. إنها ممتازة لتنظيم كميات كبيرة من المحتوى المتنوع ، ولكن يمكنها أيضًا إنشاء تخطيطات جذابة بصريًا عندما يكون المحتوى قليلًا جدًا.

بالنسبة لهذا التصميم - المستوحى من Avaunt - أقوم ببناء شبكتي المعيارية على ستة أعمدة متماثلة وأربعة صفوف متباعدة بشكل متساوٍ. تحدد وحدات الشبكة موضع وحجم المحتوى الخاص بي.

أقوم بربط عدة وحدات معًا لإنشاء مناطق مكانية للصور الكبيرة وتشغيل النص في عمود واحد على اليسار. تساعد خطوط الحدود في التأكيد على البنية المرئية للصفحة.

قد يبدو هذا النوع من التخطيط معقدًا في البداية ، ولكن في الواقع ، يسهل تنفيذه بشكل جميل. بدلاً من تأسيس ترميزي على التخطيط المرئي ، أبدأ باستخدام العناصر الأكثر ملاءمة لوصف المحتوى الخاص بي. في الماضي ، كنت سأستخدم عناصر الجدول لتنفيذ الشبكات المعيارية. تقدم سريعًا بضع سنوات ، واستبدلت الانقسامات خلايا الجدول هذه. بشكل لا يصدق ، أنا الآن بحاجة إلى عنصري HTML هيكليين فقط لإنجاز هذا التصميم ؛ مقال واحد متبوعًا بقائمة مرتبة:

 <body> <article>…</article> <ol>…</ol> </body>

تحتوي هذه المقالة على عنوان وفقرات وجدول للمعلومات الجدولية:

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

الشبكة المعيارية للمخططات المصغرة هي الجانب المرئي الأكثر تعقيدًا في تصميمي ، لكن الترميز الذي يصفه بسيط. المخططات مرتبة حسب التاريخ ، لذا تبدو القائمة المرتبة العنصر الأكثر ملاءمة في HTML:

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

يبلغ وزن HTML الخاص بي 2 كيلو بايت فقط وهو أقل من ستين سطرًا. إنها لفكرة جيدة التحقق من صحة هذا الترميز حيث أن قضاء القليل من الوقت في التحقق مبكرًا سيوفر الكثير من الوقت في تصحيح أخطاء CSS لاحقًا. أقوم أيضًا بفتح الصفحة غير المصنفة في متصفح حيث أحتاج دائمًا إلى ضمان الوصول إلى المحتوى الخاص بي بدون ورقة أنماط.

أبدأ في تطوير تخطيط متماثل ثلاثي الأعمدة للشاشات متوسطة الحجم عن طريق عزل أنماط الشبكة باستخدام استعلام وسائط:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

المقالة والقائمة المرتبة هي الأحفاد المباشرة الوحيدة للجسم ، ولكن ما تحتويه هو ما أريد وضعه كعناصر شبكية. أستخدم display:contents; لتمكينني من وضع محتوياتها في أي مكان على شبكتي:

 article, ol { display: contents; }

يجب أن يمتد كل عنصر في مقالتي على الأعمدة الثلاثة ، لذلك أضعها باستخدام أرقام الأسطر ، بدءًا من السطر الأول (1) ، وتنتهي بالسطر الأخير (-1):

 .standfirst, section, table { grid-column: 1 / -1; }

يتم وضع العناصر الموجودة في قائمتي المرتبة بالتساوي في شبكة الشبكة المكونة من ثلاثة أعمدة. ومع ذلك ، يتطلب تصميمي أن تمتد بعض العناصر على عمودين ويمتد أحدهما إلى صفين. المحددات من النوع nth-of-type selectors هي أدوات مثالية لاستهداف العناصر دون اللجوء إلى إضافة فئات إلى ترميزي. أنا أستخدمها ، والكلمة الأساسية الممتدة ، وكمية الأعمدة أو الصفوف التي أريد أن تمتد العناصر إليها:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

بمعاينة تصميمي في المتصفح ، أستطيع أن أرى أنه لا يظهر بدقة كما هو مخطط له لأن بعض وحدات الشبكة فارغة. بشكل افتراضي ، يعمل التدفق العادي لأي مستند على ترتيب العناصر من اليسار إلى اليمين ومن أعلى إلى أسفل ، تمامًا مثل اللغات الغربية. عندما لا تتلاءم العناصر مع المساحة المتوفرة في الشبكة ، فإن خوارزمية وضع شبكة CSS تترك المساحات فارغة وتضع العناصر في السطر التالي.

يمكنني تجاوز الإعداد الافتراضي للخوارزمية من خلال تطبيق خاصية الشبكة-التدفق التلقائي وقيمة الكثافة على حاوية الشبكة الخاصة بي ، في هذه الحالة الجسم:

 body { grid-auto-flow: dense; }

الصف هو القيمة الافتراضية للتدفق التلقائي للشبكة ، ولكن يمكنك أيضًا اختيار العمود وكثافة العمود والصف كثيف. استخدم التدفق التلقائي للشبكة بحكمة لأن المتصفح يملأ أي وحدة فارغة بالعنصر التالي في تدفق المستندات والذي يمكن أن يتناسب مع تلك المساحة. يغير هذا السلوك الترتيب المرئي دون تغيير المصدر الذي قد يكون له آثار على إمكانية الوصول.

يبدو تصميمي المتوسط ​​الحجم الآن كما خططت له ، لذا حان الوقت الآن لتكييفه مع الشاشات الأكبر حجمًا. أحتاج إلى إجراء تغييرات طفيفة فقط على أنماط الشبكة لتحويل مقالتي أولاً إلى شريط جانبي - والذي يمتد على الارتفاع الكامل للتخطيط الخاص بي - ثم ضع عناصر قائمة محددة في وحدات نمطية على شبكة أكبر من ستة أعمدة:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

قد يكون تتبع خطوط وضع الشبكة أمرًا صعبًا في بعض الأحيان ، ولكن لحسن الحظ ، توفر CSS Grid أكثر من طريقة لإنجاز تصميم شبكة معياري. استخدام مناطق القوالب الشبكية هو نهج بديل وأشعر أنه لا يحظى بالاهتمام الكافي.

باستخدام مناطق القوالب الشبكية ، أعرّف أولاً كل وحدة بإعطائها اسمًا ، ثم أضع العناصر في وحدة واحدة أو عدة وحدات متجاورة تُعرف باسم المناطق المكانية. قد تبدو هذه العملية معقدة ، لكنها في الواقع واحدة من أسهل الطرق وأكثرها وضوحًا لاستخدام CSS Grid.

أعطي كل عنصر قيمة منطقة الشبكة لوضعه في شبكتي ، بدءًا من الشعار والمقال:

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

بعد ذلك ، أقوم بتعيين منطقة شبكة لكل عنصر من عناصر القائمة الخاصة بي. اخترت قيمة i + n بسيطة ، ولكن يمكنني اختيار أي قيمة بما في ذلك الكلمات أو حتى الأحرف مثل a أو b أو c أو d.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

تحتوي شبكتي على ستة أعمدة صريحة وأربعة صفوف ضمنية ، يتم تحديد ارتفاعها من خلال ارتفاع المحتوى بداخلها. أرسم شبكتي في CSS باستخدام خاصية grid-template-areas ، حيث تمثل كل فترة (.) وحدة شبكة:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

بعد ذلك ، أضع العناصر في تلك الشبكة باستخدام قيم منطقة الشبكة التي حددتها سابقًا. إذا كررت قيمًا عبر وحدات نمطية متجاورة متعددة - عبر أعمدة أو صفوف - فسيتمدد هذا العنصر لإنشاء منطقة مكانية. يؤدي ترك نقطة (.) إلى إنشاء وحدة فارغة:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

في كل مثال حتى الآن ، قمت بعزل أنماط التخطيط لأحجام الشاشات المختلفة باستخدام نقاط توقف استعلام الوسائط. أصبحت هذه التقنية هي الطريقة القياسية للتعامل مع تعقيدات تصميم الويب سريع الاستجابة. ومع ذلك ، هناك تقنية لتطوير شبكات معيارية سريعة الاستجابة دون استخدام استعلامات الوسائط. تستفيد هذه التقنية من قدرة المتصفح على إعادة تدفق المحتوى.

قبل المضي قدمًا ، يجدر بنا أن نتذكر أن تصميمي يتطلب عنصري HTML هيكليين فقط ؛ قائمة مرتبة واحدة للمحتوى ومقال قمت بتحويله إلى شريط جانبي عندما يكون هناك عرض كافٍ متاح لكلا العنصرين للوقوف جنبًا إلى جنب. عندما يكون العرض غير كافٍ ، تتراكم هذه العناصر عموديًا بترتيب المحتوى:

 <body> <article>…</article> <ol>…</ol> </body>

تشكل القائمة المرتبة أهم جزء في تصميمي ويجب أن تشغل دائمًا 60٪ على الأقل من عرض منفذ العرض. لضمان حدوث ذلك ، أستخدم تصريح min-width:

 ol { min-width: 60%; }

بينما أوصي عادةً باستخدام CSS Grid لتخطيط الصفحة الكلي و Flexbox للمكونات المرنة ، لتنفيذ هذا التصميم ، أقلب هذه النصيحة رأسًا على عقب.

أقوم بتحويل عنصر الجسم إلى حاوية مرنة ، ثم أتأكد من نمو مقالتي لملء كل المساحة الأفقية باستخدام خاصية النمو المرن بقيمة 1:

 body { display: flex; } article { flex-grow: 1; }

للتأكد من أن قائمتي المرتبة تشغل أيضًا كل المساحة المتاحة عندما يقف العنصران جنبًا إلى جنب ، أعطيها قيمة نمو مرنة عالية يبعث على السخرية تبلغ 999:

 article { flex-grow: 999; }

يوفر استخدام الأساس المرن عرضًا مثاليًا لبدء المقالة. من خلال ضبط التفاف الحاوية المرنة على الالتفاف ، أضمن تكديس العنصرين عند الوصول إلى الحد الأدنى لعرض القائمة ، ولا توجد مساحة كافية لهم للوقوف جنبًا إلى جنب:

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

أريد إنشاء شبكة معيارية مرنة تسمح بأي عدد من الوحدات. بدلاً من تحديد عدد الأعمدة أو الصفوف ، يسمح استخدام التكرار للمتصفح بإنشاء العديد من الوحدات التي يحتاجها. يملأ الملء التلقائي كل المساحة المتاحة ، ويغلف المحتوى عند الضرورة. يعطي minmax عرضًا أدنى وأقصى لكل وحدة ، في هذه الحالة 10rem و 1 fr:

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

لتجنب بقاء الوحدات فارغة ، أستخدم التدفق التلقائي للشبكة مرة أخرى بقيمة كثيفة. ستعمل خوارزمية المتصفح على إعادة تدفق المحتوى لملء أي وحدات فارغة:

 ol { grid-auto-flow: dense; }

تمامًا كما في السابق ، تمتد بعض عناصر القائمة على عمودين ، ويمتد أحدهما إلى صفين. مرة أخرى ، أستخدم محددات nth-of-type لاستهداف عناصر قائمة محددة ، ثم عمود الشبكة أو صف الشبكة مع الكلمة الأساسية الممتدة متبوعة بعدد الأعمدة أو الصفوف التي أرغب في توسيعها:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

ينشئ هذا CSS البسيط تصميمًا سريع الاستجابة يتكيف مع بيئته دون الحاجة إلى استعلامات وسائط متعددة أو مجموعات منفصلة من الأنماط.

باستخدام CSS الحديثة بما في ذلك Grid و Flexbox ، بالاعتماد على قدرة المتصفحات على إعادة تدفق المحتوى ، بالإضافة إلى عدد قليل من الخيارات الذكية على الحد الأدنى والحد الأقصى من الأحجام ، يكون هذا النهج أقرب ما يكون إلى تحقيق أهداف الويب سريع الاستجابة.

قراءة المزيد من السلسلة

1. قرارات التصميم الملهمة: مجلة Avaunt
2. قرارات التصميم المستوحاة: الأمور الملحة
3. قرارات التصميم الملهمة: مجلة إرنست
4. قرارات التصميم الملهمة: أليكسي برودوفيتش
5. قرارات التصميم الملهمة: بيا فيتلر
6. قرارات التصميم الملهمة: نيفيل برودي
7. قرارات التصميم الملهمة: Otto Storch
8. قرارات التصميم الملهمة: Herb Lubalin
9. قرارات التصميم الملهمة: ماكس هوبر
10. قرارات التصميم الملهمة: جيوفاني بينتوري
11. قرارات التصميم الملهمة: Emmett McBain
12. قرارات التصميم الملهمة: برادبري طومسون

ملاحظة: أعضاء تحطيم الأعضاء لديهم حق الوصول إلى ملف PDF مصمم بشكل جميل لمجلة Andy Inspired Design Decisions وأمثلة كاملة من التعليمات البرمجية من هذه المقالة. يمكنك شراء ملفات PDF الخاصة بهذه المشكلة والأمثلة بالإضافة إلى كل مشكلة أخرى مباشرةً من موقع Andy على الويب.