למה כדאי להשתמש בצבעים גלובליים
הצבעים הגלובליים של אלמנטור פרו עוזרים לנו באחד המרכיבים החשובים ביותר בעיצוב וחווית משתמש – עקביות.
ברגע שהגולש נכנס לאתר, הוא צריך "להתאמץ" להבין איך נראה כל סוג של אובייקט בשביל שהוא יוכל להתרגל ולדפדף בקלות באתר.
בכותרות למשל, נניח שהגדרתם שהכותרות שלכם בצבע אדום, ברגע שהגולש באתר מבין את זה, הוא יחפש את הכתמים האדומים כשהוא מריץ את העמוד כדי לקרוא ראשי פרקים. במידה והכותרות שלכם בצבעים אקראיים, למשל חלק באדום וחלק בשחור, הגולש עלול לפספס חלק מהכותרות. ברגע שהגולש יבין שהעיצוב לא עקבי, זה יהפוך את חווית המשתמש שלו למעיקה משום שהוא יצטרך לדפדף לאט באתר מהחשש לפספס משהו, או יעזוב את האתר לחלוטין.
כשאנחנו מגדירים צבעים גלובליים באלמנטור, אנחנו יכולים לשמור על עקביות ולשנות את הצבעים בכל מקום בו הם מוגדרים בקלות, במקום אחד, במקום לשנות אותם בכל אלמנט בניפרד.
במידה ואתם רוצים להוסיף צבע שישתנה בעקביות עם הצבעים הגלובליים לאובייקט כלשהו ב-CSS, תוכלו להשתמש בפונקציה
איך להשתמש בפונקציית Var ב-Css
var(--name, value)
בכל מקום בו מוגדר צבע, נוכל להכניס את הפונקציה ולהגדיר אותה עם צבע גלובלי בצורה הזו, כשאנחנו מחליפים את שני הקווים והמילה name עם הצבע הגלובלי שלנו, הצבעים המוגדרים באלמנטור כברירת מחדל בהתחלה הם 4 סוגי צבע גלובלי, כשאתם יוצרים צבעים גלובליים נוספים, אתם צריכים לשים לב לשמות שלהם בשביל להכניס אותם עם פונקציית var.
ערך ה-Value הוא צבע חליפי שתוכלו להגדיר במקרה ויש תקלה.
הצבעים הגלובליים ברירת המחדל של אלמנטור נקראים כך
--e-global-color-primary: #157DBA;
--e-global-color-secondary: #EE049B;
--e-global-color-text: #282828;
--e-global-color-accent: #EE049B;
צבעים גלובליים מוגדרים אישית יראו כך
--e-global-color-2111b9dd: #F36F63;
--e-global-color-566ecd3f: #805E9B;
--e-global-color-2ab323ca: #0F666D;
--e-global-color-5eead380: #000;
--e-global-color-7d38e339: #FFF;
--e-global-color-70ac4171: #C05E28;
תוכלו למצוא את הערכים שלהם בקלות באמצעות Inspect בדפדפן Chrome, במידה ואתם לא יודעים להשתמש בInspector של דפדפן Chrome, מומלץ להתחיל ללמוד מכאן: לומדים להשתמש בInspect בגוגל
דוגמא מעשית
בדוגמא מטה הגדרנו את הקו מסגרת של כפתור עם צבע גלובלי – מודגש – Accent
@media only screen and (min-width: 1200px) {
.sign-up-button {
border: solid 2px var(--e-global-color-accent)!important;
border-radius: 250px;
margin: 0px 1px!important;
}
}
