التوجيه الفني للويب باستخدام مناطق قوالب شبكة CSS

( هذه المقالة برعاية شركة CoffeeCup Software .) حسنًا ، سأنتقل مباشرة إلى هذه النقطة. شبكة CSS مهمة ، مهمة حقًا ، مهمة جدًا لتكون واحدة من خصائص "سأستخدمها عندما تدعمها جميع المتصفحات". هذا لأنه ، باستخدام CSS Grid ، يمكننا الآن أن نكون مبدعين في التخطيط على الويب بقدر ما نستطيع في الطباعة ، دون المساس بإمكانية الوصول أو الاستجابة أو قابلية الاستخدام.

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

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

الشعور بالإحباط

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

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

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

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

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

رواية القصص من خلال الإخراج الفني

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

ما رأيك عندما تسمع مصطلح "اتجاه الفن"؟ هل تفكر في الصور سريعة الاستجابة ، أو تقديم محاصيل أو أحجام أو اتجاهات بديلة للعديد من أحجام الشاشات باستخدام عنصر <picture> أو "الأحجام" في HTML؟ لقد أصبحت أدوات تصميم وتوجيه فنية مفيدة ومتجاوبة ، ولكن هناك ما هو أكثر لتصميم الويب من الأدوات.

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

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

أنا لست كبيرًا بما يكفي لأتذكر بشكل مباشر عمل أليكسي برودوفيتش في مجلة هاربرز بازار من عام 1934 إلى عام 1958.

أتذكر الاتجاه الفني لنيفيل برودي لمجلة Face وما زلت ألهمني ذلك كل يوم.

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

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

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

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

قال ديفيد هيلمان ، الذي كان يعمل سابقًا في صحيفة The Guardian و New Statesman ومصمم العديد من المنشورات الأخرى:

"في أفضل أشكاله ، يتضمن (التوجيه الفني) أن يكون لدى المدير الفني فهم كامل ومتعمق لما تقوله المجلة ، ومن خلال التصميم ، والتأثير على كيفية قوله".

قال صديقي مارك بورتر ، بالصدفة ، المدير الإبداعي السابق في The Guardian أيضًا:

"التصميم هو المسؤول عن توزيع العناصر في الفضاء."

شبكة CSS تجعل تولي مسؤولية توزيع العناصر أمرًا ممكنًا أكثر من أي وقت مضى.

فن الإخراج قصة مسلوقة

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

أولاً ، الخلفية الدرامية. على غلاف إصداري لعام 2010 من Hardboiled Web Design (1) ، تشير امرأة غامضة في ثوب أحمر (هناك دائمًا امرأة في فستان أحمر) بمسدسها إلى ديكنا الخاص. (شيش ، أعرف هذا الشعور.) بحلول إصدار الذكرى السنوية الخامسة في عام 2015 (2) ، انتقلت القصة وظل الظل يتحرك بشكل ينذر بالسوء عبر باب مكتب المباحث. فتح الباب ، اقتحم اثنان من الأشرار (3) ، وتبع ذلك قتال بالقبضة (4). من المؤكد أن المرأة الغامضة لدينا تعرف كيف تلقي اللكمة وقبل أن تقول "قبلني ، يا قاتل" ، هناك شرير مقيد على كرسي ومستعد لسكب الفاصوليا (5).

الفصل الثالث

سأبدأ في سرد ​​تلك القصة في اللحظة المتفجرة عندما يفتح هذان الشريران الباب. الآن ، إذا كنت قد قرأت كتاب Scott McCloud "Understanding Comics" ، فستعرف أن حجم اللوحة يؤثر على المدة التي يقضيها الأشخاص في النظر إلى منطقة ما ، لذلك أريد أن أجعل صورة الأشرار كبيرة بقدر الإمكان لتعظيم تأثيرها (1). ما لا تعرفه القلنسوات هو أن امرأتنا تنتظرهم. أستخدم التخطيط لإضافة التوتر عن طريق ربط خطوط عيونهم ، (2) في نفس الوقت رسم عيون القارئ إلى حيث يبدأ المحتوى.

الفصل الرابع

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

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

الفصل الخامس

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

الحصول على بلادي القذرة

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

• شبكة على سبيل المثال بواسطة راشيل أندرو
• تعلم CSS Grid مع Wes Bos
• دليل كامل للشبكة بواسطة Chris House على CSS Tricks

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

الإيقاع المثالي

مصدر إلهامي للتصميم الذي أستخدمه جاء من تصميم نيفيل برودي لعام 1983 لمجلة The Face Magazine . لقد انجذبت إلى كيفية إنشاء Brody بذكاء لكل من المحور الأفقي والرأسي والمساحة الكبيرة التي تشغلها الصورة الرئيسية.

فعلت الشيء نفسه من خلال تطبيق خصائص CSS Grid التالية على عنصر <body> الذي لا يحتوي على هامش في صفحتي ، حيث تتكرر الأعمدة ذات الكسر الواحد بعرض الوحدة خمس مرات مع وجود فجوة 2vw بينهما:

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

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

اهم الاشياء اولا. لدي خمسة عناصر لأضعها ، وهي عنوان "Kiss Me، Deadly" الخاص بي ، أكبر صورة "لافتة" ، والمحتوى الرئيسي ، بالإضافة إلى فقرة وصورتين ، شكل 1 وشكل 2. يبدو HTML الخاص بي كما يلي:

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

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

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

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

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

 body { grid-template-rows: repeat(3, auto); }

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

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

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

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

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

 aside { align-self: end; } 

كل ما تبقى هو إضافة بعض الأنماط الأخرى لإضفاء الحيوية على التصميم ، بما في ذلك نظام ألوان معكوس مذهل ولهجة حمراء ساطعة تربط كلمة "Deadly" في العنوان بلون فستان نسائنا:

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

يصعد في الدخان

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

تقسمها

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

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

الثاني ، عن طريق وضع العناصر في مناطق مختلفة من قالب الشبكة على نفس الشبكة:

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

باستخدام CSS Grid Builder

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

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

يأتي عنصر CSS Grid Builder <picture> ملفوفًا في قسم إضافي ، مع بعض العناصر الأخرى التي تم طرحها لإجراء قياس جيد:

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

كما قلت ، قريب بما فيه الكفاية ، وإذا كنت لا تصدقني ، فقم بتنزيل مجموعة من الملفات المصدرة من مثال Hardboiled الخاص بي. ربما سيقنعك ذلك.

تتحسن أدوات مطوري المتصفحات في فحص الشبكات ، لكن CSS Grid Builder يساعدك في بنائها. بوضوح. في جوهره ، CSS Grid Builder هو متصفح يستند إلى Chromium وملفوف بواجهة مستخدم ، ويعمل على نظامي macOS و Windows. هذا يعني أنه إذا كان المستعرض يمكنه عرضه ، فيمكن لأدوات واجهة المستخدم كتابته ، مع استثناء واحد أو اثنين من الاستثناءات البارزة بما في ذلك أشكال CSS.

في الواقع ، يبني CSS Grid Builder أكثر من مجرد شبكات ، ويمكنك استخدامه لإنشاء أنماط للخلفيات - بما في ذلك التدرجات اللونية ، وهو أمر سهل للغاية - والحدود والطباعة . حتى أنه يتعامل مع Flexbox والتخطيطات متعددة الأعمدة ، لكنك هنا لأنك تريد التعرف على شبكة CSS.

النظر حول الواجهة

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

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

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

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

• أضف الأعمدة والصفوف
• قم بمحاذاة وتبرير المحتوى والعناصر داخل كل وحدة
• حجم الأعمدة والصفوف باستخدام كل نوع من الوحدات بما في ذلك fr و minmax
• حدد الفجوات
• اسم مناطق قالب الشبكة
• حدد نقاط التوقف

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

CSS Grid Builder مجاني حاليًا أثناء قيام CoffeeCup بتطويره ، وإذا كنت تحب ما يفعلونه ، فيمكنك إنفاق بضعة دولارات في طريقهم للمساعدة في تمويل تطويره.

تنظيف

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

الآن هذا هاردبويلد .

أتمنى أن تكون قد استمتعت بهذه المقالة ، اعرض الآن ملفات المشروع على CodePen أو قم بتنزيل ملفات الأمثلة.

"التوجيه الفني للويب" بواسطة آندي كلارك ، أول لقطة من تصميم Hardboiled Web. اللقطات عبارة عن سلسلة من الكتب القصيرة حول "التوجيه الفني للويب" و "التصميم باستخدام مستعرض" و "بيع الأفكار الإبداعية" التي سيتم نشرها طوال عام 2018.