עשרה סגנון חיים מדריך כלים עבור מעצבי אינטרנט - המיטב של

א מדריך סגנון חיים הוא תיעוד של רכיבי UI ודפוסים שנאספו מאתר או יישום במטרה לאפשר למפתחים להשתמש סגנונות עקביים לאורך כל הפרוייקט שלהם. בעבר, מפתחים יצרו מדריכים בסגנון ידני, וזה הרבה עבודה. לאחר זמן מה, הם החלו להפוך את זרימת העבודה ואת כלי הסגנון להפיכת הקוד הקדמי מאורגן היטב ספריות ממשק משתמש החלו להופיע.

סגנון חיים מדריכים שונים מדריכי סגנון קוד, כמו האחרון מכילים כללים על איך לכתוב קוד קריא ותחזוקה, בעוד המדריכים סגנון החיים הם אוספים של דפוסי Front-end, כגון שיעורי CSS לחצנים, יישומונים ואלמנטים טיפוגרפיים. מדריכי סגנון קוד מבטיחים קוד עקביות - -, בעוד מדריכי סגנון חיים מבטיחים עקביות חזותית על פני אתר.

בהודעה זו, יש לנו להרכיב 10 כלים שימושיים שיכולים לעזור לך ליצור סגנון החיים שלך מדריך.

1. לסגנן אותי

כלי זה הוא הרבה כיף: רק להדביק את הקישור של האתר שאתה רוצה לנתח, ולצפות כמו המדריך הסגנון שלה נוצר בלחיצה אחת על העכבר. עם לסדר לי, באפשרותך לקבל במהירות סקירה של דפוסי האתר, כולל צבעים, גופנים, שינוי גודל וריווח. לאחר השלמת התהליך, אתה יכול הורד את מדריך הסגנון ב- PDF.

2. Fabricator

פקטור מאפשר לך לבנות ערכת כלים משלך ממשק המשתמש, לארגן את מערכת העיצוב שלך, וליצור מדריך סגנון מתוך קוד ערכת הכלים שלך. אם אתה עובד בצוות, אתה יכול לכתוב את התיעוד ב Markdown כדי להקל על מפתחים אחרים להשתמש. זה יכול לעזור לך לארגן את שגרת העיצוב / קידוד כמו שאתה אוהב.

3. לחדד

לחזית כולל הכל מ mockups דיגיטלי כדי wireframing. יש להם גם סגנון מדריך כלי המציע תהליך עיצוב מינימליסטי נקי ללא טרחה. אתה יכול להירשם בחינם, ולהוסיף את כל המידע הדרוש באופן ידני. התהליך אמור לכלול לוח צבעים, אפשרויות גופנים, סמלים, סמלים, סיסמאות או העתק אינטרנט מועדף.

4. Aigis

עם אייגיס, אתה יכול ליצור מדריכים בסגנון מכל קבצי טקסט (למשל. .css, .scss, .סטיל, .md). ניתן גם לכתוב תיעוד ב- Markdown ולהתאים אישית את נושא האתר שלך.

5. הולוגרמה

הולוגרמה נוצר על ידי Trulia, והוא פתרון נהדר ליצירת מדריכים בסגנון. זוהי פנינה רובי כי מעביר הערות ב- CSS שלך על מנת ליצור מדריכים בסגנון מדהים. הולוגרמה יש מערכת תבניות עם כמה סגנונות בסיסיים ניווט כדי להפוך את המדריך הסגנון שלך לייצר אפילו יותר קל.

6. Styledown

עם סטיילדאון, אתה יכול לכתוב מדריכים בסגנון CSS בקלות, כמו זה מחולל מדריך בסגנון Markdown. זה יעבוד עם רוב setups פיתוח האינטרנט, כפי שהוא פלטפורמה ניטרלית. זה דורש מעט מאוד כדי לקבל אותו ולהפעלתו. כמו כן, הערות אתה צריך להוסיף CSS שלך הם מינימליים מאוד. ניתן ליצור תיעוד CSS שלך בהערות CSS מוטבעות או כקובץ Markdown נפרד.

7. KSS

KSS (קנייל סגנון פחים) הוא בעיקר מפרט תיעוד ואת פורמט מדריך סגנון שיש לו התחביר שלה. KSS כולל גם ספריית רובי כי parses .סאס, .scss, ו .css קבצים מתועדים עם הנחיות KSS לתוך מדריך סגנון מסודר. KSS הוא עבור משתמשים מתקדמים יותר צוותים מקצועיים, כמו יצירת מדריך סגנון עם זה דורש ידע קידוד.

8. SC5 מדריך סגנון גנרטור

עם ה SC5 סגנון מדריך גנרטור תוכל ליצור ולערוך מדריכי סגנון ישירות בדפדפן שלך. זה מבוסס על KSS עם כמה תכונות מגניב כלל, כגון ממשק משתמש מופעל AngularJS המסייע לך להציג, לחפש ולבדוק את הסגנונות. SC5 משתמש באותה סימון מסמך כמו KSS. הוא תומך SASS, LESS, PostCSS ו CSS סגנונות CSS.

9. Styledocco

סגנון הוא יישום שימושי Node.js כי יוצר מדריכים בסגנון מגליונות שלך. ניתן להתקין אותו עם npm. ב styleguide שנוצר, StyleDocco מציג תצוגה מקדימה עם סגנונות יש להחיל ודוגמה של קוד ה- HTML.

בדף הבית של StyleDocco, תוכל למצוא שתי דוגמאות של דוגמאות סגנון, אחת שנוצרת מגיליון סגנונות ברירת מחדל, ואחת נוספת שנוצרה באתר Bootstrap. הדוגמאות יכולות גם לעזור לך להרים את תחביר התיעוד משתמשת SytleDocco.

10. תבנית מעבדה

מעבדה תבנית הוא אוסף של כלים שיסייעו לך ליצור מערכת עיצוב מודולרית. תבנית מעבדה היא גנרטור אתר סטטי סטנדרטי אשר תפרים יחד את כל האלמנטים בסגנון באתר, תבניות תבניות ודפים מהם. זה יכול לשמש הפרויקט שלך ספריית דפוס ו מדריך בסגנון Frontend. תבנית המעבדה מאפשרת לך לראות את רכיבי הסגנון שלך בו-זמנית בצורה מופשטת ו בהקשר.