عشرة أدوات دليل أسلوب المعيشة لمصممي الويب - أفضل من

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

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

في هذا المنشور ، وضعنا 10 أدوات مفيدة يمكنها مساعدتك توليد دليل أسلوب المعيشة الخاصة بك.

1. أسلبني

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

2. كاذب

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

3. فرونتيفي

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

4. ايجيس

مع Aigis, يمكنك إنشاء أدلة أنماط من أي ملفات نصية (على سبيل المثال. .المغلق, .SCSS, .الاسلوب, .MD). يمكنك أيضًا كتابة الوثائق في تخفيض السعر ، وتخصيص سمة موقعك.

5. الهولوغرام

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

6. styledown

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

7. KSS

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

8. SC5 نمط دليل مولد

مع ال SC5 نمط دليل مولد يمكنك إنشاء وتحرير أدلة النمط مباشرة في المتصفح الخاص بك. أنه بناء على KSS مع بعض الميزات الرائعة المضمنة ، مثل واجهة المستخدم التي تدعم AngularJS والتي تساعدك على عرض أنماطك والبحث عنها واختبارها. يستخدم SC5 تدوين المستند نفسه كـ KSS. وهو يدعم أوراق أنماط SASS و LESS و PostCSS و CSS نقية.

9. ستايلدوكو

StyleDocco هو تطبيق مفيد Node.js ذلك يخلق أدلة النمط من أوراق الأنماط الخاصة بك. يمكنك تثبيته مع npm. في styleguide الذي تم إنشاؤه ، يعرض StyleDocco معاينة مع الأنماط التي قمت بتطبيقها ومثال على رمز HTML.

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

10. مختبر النمط

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