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

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

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

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

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

خيارات مسبقة الصنع

لقد ذهب العديد من الناس بالفعل أمامنا على تلك الجبهة. هناك قوالب مسبقة الصنع للأشخاص الذين يرغبون في البدء في عمل Style Tiles في المتصفح الخاص بهم. تحقق منها:

نمط النموذج

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

Webstiles

صنع من قبل Namanyay جويل ، Webstiles لدينا الكثير من القواسم المشتركة مع الحلول الأخرى في هذه القائمة. ما يجعلها مختلفة هي أنها بنيت مع أقل شهرة (البعض يقول قلل) معالج Stylus CSS المسبق.

البوصلة نمط البلاط

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

مستجيب للنموذج لبلاط ستايل

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

اصنع خاصتك

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

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

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

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

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

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

لا توجد حاجة عامة لجعلها جاهزة للإنتاج لكل المتصفحات. اجعلها بسيطة ، واحتفظ بها إلى HTML5. ما لم تكن تستخدم عنصر واجهة مستخدم غير قياسي يجب ترميزه من الصفر في HTML و CSS ، فلا تقلق مع JavaScript.

أفضل جزء؟ يمكنك تنقيح وإعادة استخدام جميع CSS ذات الصلة عند بدء ترميز بالحجم الطبيعي المستندة إلى المستعرض الخاص بك!

استنتاج

يعتبر أسلوب البلاط أكثر من يستحق النظر فيه إذا لم تكن تستخدمه بالفعل.

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

صورة مميزة، أستوديو التصميم بواسطة آن صوفي لاينس