Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

بناء واجهة لوحة وحدات مع النقي

by
Difficulty:IntermediateLength:MediumLanguages:

Arabic (العربية/عربي) translation by Lubna Timraz (you can also view the original English article)

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

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


 قليلا حول نقية

تم بناء بيور من قبل الفريق في ياهو! و يوي لتكون مجموعة خفيفة الوزن جدا من وحدات (أقل من 6K). التفكير في هذا كما تطبيع الموسعة التي تشمل أيضا أنماط لأشياء شائعة جدا مثل الشبكات والأشكال والأزرار والجداول والقوائم.

pure-base

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

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


قليلا حول سماكس

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

pure-smacss

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

  • قاعدة: لا يوجد اسم (العناصر الافتراضية، لا الطبقات)
  • التخطيط
  • الوحدات النمطية
  • الدولة
  • ثيم

تصف هذه الأنواع من الفئات وظائفها وفئتها. قواعد سماكس هي أكثر "المبادئ التوجيهية" وطرق التفكير. ننظر من خلال مصدر كس النقي لرؤية أمثلة من سماس في العمل.


الغوص في

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

نحن على استعداد للبدء في استخدام هذه الأدوات في التصميم! دعونا نبدأ من خلال تعريف بعض كس الهيكل العظمي لعقد عناصر لدينا في. دعونا نضع هذا في 'الجسم' لدينا.

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

pure-frog

في الوقت الحالي، سنقوم بالإشارة إليها في تعليق في أعلى ملف كس.

نصيحة: يمكنك الاستفادة من البدء باستخدام الكلمات الرئيسية للون كس وإيجاد / استبدال الرموز السداسية في وقت لاحق بحيث لا يلزمك نسخ الرمز اللداسي ولصقه باستمرار.


تحديد القائمة

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

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

هنا، نرى اعتماد الاتفاقيات التي تستخدمها سماس و بيور. نحن نحدد فئتين جديدتين، 'نقية-القائمة-بلاكبج' و 'نقية القائمة ثابتة'، ثم الأنماط الفرعية اللازمة لدعم تلك الفئة. ونحن نرى أيضا بعض تجاوز الطبقات الأساسية (مثل الطبقة القائمة "القائمة نقية" للتغيير إلى وزن الخط أخف وزنا).

pure-menu

إنشاء وحدة لوحة التحكم

بعد ذلك، سنقوم بإنشاء وحدة نمطية للوحة التحكم. سنستخدم بعض الأنماط الأساسية في لوحة التحكم على مستوى القاعدة "بلوك".

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

بعد ذلك، سنحدد الترميز لقطع لوحة التحكم المختلفة. نحن تشمل سفغ مضمنة للشعار إنفاتو، والتي سوف تمتد عرض كامل للشبكة.

pure-envato-logo

هناك الكثير لتغطيه في هذا الترميز. أولا، نحن نستخدم "نقية u-1-3" (وغيرها من الطبقات نقية u- *) داخل عنصر صف الشبكة، "نقية- -". هذه الطبقات هي جزء من نظام الشبكة الصرفة. لفهم هذه تماما، تحقق من كامل يوي الشبكة الوثائق؛ والمفهوم الأساسي هو أن الطبقة الشبكة نقية u-1-3 هو 1/3 عرض الشبكة بالكامل، فئة من نقية u-3-4 سيكون 3 / 4th عرض الشبكة. وحدة مع الشعار في ذلك لديه الطبقة نقية u-1، والذي يسمح لتمتد العرض الكامل للشبكة.

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

pure-modules

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

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

وفصول الجدول نقية الموسعة.

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


توسيع الاستجابة

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

هذا هو محدد يبحث صعبة (نلقي نظرة على 30 كس محددات يجب عليك حفظ لتفسير عميق) الذي يشير أولا إلى الأطفال مباشرة من عناصر ".pure-g-r". يجب أن يكون لدى هؤلاء الأطفال سمة الطبقة التي تبدأ مع البادئة "نقية ش". تفو.

وهو يشير، على سبيل المثال، إلى هذا القسم:

يتم استخدام هذا محدد داخل استفساراتmedia لانهيار الشبكة. ومع ذلك، تنهار عناصر الوحدة هذه إلى 100٪ أقل من 767 بكسل. نحن نريد تغيير هذا للسماح للعناصر أن تنهار إلى 50٪ بين 480 و 767. ونحن نفعل ذلك مع استفساراتmedia التالية.


سبلاش من جافا سكريبت

في ، سنكتب بعض جافا سكريبت للتأكد من أن جميع الوحدات على صف واحد هي نفس الارتفاع.

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


استنتاج

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

ماذا تفعل مع بيور؟ اسمحوا لنا أن نعرف في التعليقات!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.