צור את מערכת העיצוב שלך, חלק 3: צבעים

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

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

סדרת מאמרים:
- חלק 1: טיפוגרפיה
- חלק 2: רשת ופריסה
- חלק 3: צבעים
- חלק 4: ריווח
- חלק 5: סמלים
- חלק 6: כפתורים

Launched השקנו את עורך הצבעים! כלי לעיצוב אתרים המייצר לוח צבעים ונושאים התואמים למסגרת CodyHouse.

משתני צבע 101

שלא כמו גלובלי CSS אחרים, יצירת מערכת צבע היא 10% בקידוד ו -90% בנושא סמנטיקה. תוך כדי עבודה על קובץ _colors.scss, אתה רוצה לזכור את המטרות הבאות:

  1. צריך להיות קל לזכור את משתני הצבע → אינך רוצה לבדוק את הקובץ הגלובלי בכל עת שתצטרך לבחור צבע.
  2. המערכת צריכה להיות קלה לעדכון → תוסיף, תסיר ושינוי שם של צבעים. וודא כי הדבר אינו מסובך.
  3. המערכת צריכה לכלול רק את הצבעים החיוניים → שמענו את זה כל כך הרבה פעמים ... ובכל זאת, אנחנו תמיד בסופו של דבר עם יותר צבעים ממה שאנחנו צריכים! מפתח ההצלחה האמיתי של מערכת עיצוב הוא הסרת כל מה שאינו נחוץ (כלולים בצבעים).

צבעי סמנטיקה לעומת הצהרה

כשמדובר בקביעת משתני הצבע, ישנן שתי גישות עיקריות: צבעים סמנטיים והצהרתיים.

הגישה הסמנטית נראית כמו:

הנה דוגמה לגישה הצהרתית:

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

תוך כדי העבודה על קובץ _colors.scss של המסגרת שלנו, הייתי צריך לקחת בחשבון שמשתמשים עומדים לערוך אותו (100%). המשמעות היא שגם אם הגישה ההצהרתית הייתה הקלה ביותר לשימוש, הייתי צריכה לערבב אותה עם הגישה הסמנטית כדי לקבל מערכת שקל גם לתחזק אותה.

לוח הצבעים החיוני

שלב מספר אחד הצהיר על מספר הצבעים המינימלי הדרוש ליצירת רכיבי האינטרנט. באופן כללי, לוח הצבעים החיוני מורכב מ:

  1. הצבע הראשי / הראשי → המשמש לקישורים, צבע רקע כפתור וכו '. באופן כללי, זהו הצבע העיקרי לקריאה לפעולה.
  2. צבע המבטא → משמש כדי להדגיש משהו חשוב בדף. זה לא אמור להיות וריאציה של הצבע הראשוני, אלא צבע משלים.
  3. סולם של צבעים ניטרליים → זה בדרך כלל סולם של גוונים בגווני אפור, שישמש לאלמנטים של טקסט, אלמנטים עדינים, גבולות וכו '.
  4. צבעי משוב → הצלחה, שגיאה, אזהרה.

חלק מצבעים אלה זקוקים לווריאציה (גרסה כהה / בהירה יותר), המשמשת לעתים קרובות כדי להבליט אינטראקטיביות (למשל: רחף /: מצבים פעילים).

ב- CSS, זה מתרגם ל:

* הערה: אנו משתמשים בתוסף postcss-color-mod-function כדי לתרגם את פונקציות הצבע לקוד RGBA התואם לכל הדפדפנים.

הקטע שלמעלה מייצג את לוח הצבעים: כל הצבעים המשמשים בפרויקט.

הווריאציות של צבעי הראש והמבטא נוצרות באמצעות פונקציות צבע. גישה זו שימושית אם יש לך קובץ demo.html (ואנחנו עושים זאת במסגרת שלנו) כך שתוכל לצבוט את ערכי הפונקציות עד שתסתפק בצבעים המתקבלים. הגוונים (או ניטרליים) צבעים נוצרים באמצעות chroma.js. במקרה זה השימוש בפונקציות לא היה אידיאלי, מכיוון שבדרך כלל יש לך שני צבעים מנוגדים (שחור לבן), ועליך ליצור סולם ערכים המבוסס על שני צבעים אלה.

הוספת צבעים סמנטיים לתערובת

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

למה אני חושב שזו גישה טובה

ראשית, מערכת זו מסתמכת על שני צבעים חיוניים: צבעי ראשוני ומבטא. המשמעות היא שכשאתה צריך להשתמש במשתני הצבע, לא יהיה לך קשה לזכור מה המשתנים הללו מייצגים (גם אם אתה לא משתמש בשמות הצהרתיים כמו "כחול" ו"אדום ").

ייתכן שהמערכת שלך תצטרך לכלול יותר צבעים (למשל צבע משני). אתה עדיין מתעסק רק בשלושה צבעים. ניהול מערכת המבוססת על 10+ צבעים עיקריים יהיה קשה ללא קשר לגישה בה אתה משתמש, לכן כדאי לך לשקול לפשט אותה.

צבעי הגווני אפור משתמשים במוסכמת שמות שונה: ככל שהמספר בקצה המשתנה גבוה יותר, צבעו כהה יותר.
גישה זו הופכת להיות שימושית כשאתה לא בטוח איזה צבע ניטרלי אתה רוצה להחיל. אם אפור -2 נראה עדין מדי, תוכלו לנסות אפור -3. יתכן ששמת לב שכמה גוונים חסרים (למשל, אפור -5). הם לא היו חיוניים במקרה שלנו (מעולם לא השתמשנו בהם בעת יצירת רכיבי האינטרנט), אז הסרנו אותם מלוח הצבעים.

צבעים סמנטיים מתווספים לתערובת משלוש סיבות עיקריות:

  1. קובץ _colors.scss הופך למקור האמת בכל עת שתצטרך לשנות צבע. האם אתה מרגיש שאלמנטים של כותרות הטקסט צריכים להיות כהים יותר? פתח את קובץ _colors.scss וערוך את המשתנה כותרת טקסט צבעונית.
  2. אם תגדיר למשל גבול צבע, לא תצטרך לחפש באיזה צבע אפור השתמשת ברכיבים אחרים בפעם הבאה שתיצור אלמנט גבול. אותו מושג חל על גורמים רבים ולא רק על גבולות.
  3. זה הופך אותה לפיסת עוגה ליצירת ותחזוקה של נושאים שונים.

ביניהם

ברגע שנוכל להשתמש במשתני CSS מבלי שנצטרך להסתמך על תוספים או מילוי רב-תכליתי, יצירת ערכות נושא צבעוניות יהיו פשוטות ביותר *! האם זה אומר שאנחנו לא יכולים ליצור נושאים היום? לא, אנחנו יכולים. יש לנו שתי אפשרויות.

* במסגרת שלנו אנו משתמשים בתוסף postcss-css-משתנים כדי להרכיב משתני CSS. נכון לעכשיו הוא אינו תומך בעדכון משתנים בשיעור CSS.

אפשרות 1 מעדכנת בכל מקרה משתני CSS. דפדפנים שאינם תומכים במשתנים יציגו את נושא הצבע "ברירת המחדל". זה לא נושא, כל עוד התוכן נגיש.

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

כך אתה יוצר נושא חדש שמתעדכן כמה משתני CSS מרכזיים:

אני אוהב את הפיתרון הזה מכיוון שהוא מופשט את תיקון הצבעים, והוא מאפשר לך לשמור את ערכות הצבעים שלך בקובץ יחיד. בכך אנו יכולים לשנות את המצב של כל רכיב (מנושא-א לנושא-ב) פשוט על ידי יישום מחלקת CSS.

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

הנה דוגמה לאפשרות 2 בפעולה:

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

אני מקווה שנהניתם מהכתבה! לעוד נאגטים לעיצוב אתרים, עקבו אחרינו כאן ב- Medium או בטוויטר.