Smart Template 2.0
👋
עובד על בסיס variables.
פרמטרים שנקבעים מראש וניתנים בעזרת קלאסים לאלמנטים שונים באתר על מנת לשמור על עיצוב אחיד וקבוע בכל האתר.
(נמצא בצפריט צד שמאל בדיזיינר או בלחיצה על L)
Colors - אחראי על כל פרמטר של צבעים קבועים ( text-color-white fill-black וכו׳...)
Spacing - אחראי על כל פרמטר של נתינת ריווח (gap-small pad-large וכו׳...)
Text - אחראי על כל פרמטר של גודל טקסט (text-body h1 text-small וכו׳...)
Theme - אחראי על החלפה בין ערכות נושא (light-mode dark-mode וכו׳...)
🎨 Colors
נקבע לאלמנטים קבועים לכל אורך האתר.
סקשנים, מעטפות, טקסט ורקעים...
ניתן להוסיף עוד פרמטרים וקלאסים במידת הצורך
Spacing
Dark
System
fill-brand-100
fill-brand-200
fill-brand-300
fill-brand-400
fill-dark-100
fill-dark-200
fill-dark-300
fill-dark-400
fill-black
fill-white
text-brand-100
text-brand-200
text-brand-300
text-brand-400
text-dark-100
text-dark-200
text-dark-300
text-dark-400
text-black
text-white
⚠️ חשוב!
להשתמש בקלאסים רק לאלמנטים שיישארו נאמנים לפרמטר ולקלאס שלו לאורך כל האתר ובכל המסכים. במידה ונדרש אלמנט אם כיוונונים שונים במסכים שונים - השתמש בקלאס ספציפי (לדוג׳: bg-card )
📏 Spacing
נקבע לאלמנטים קבועים לכל אורך האתר.
פאדינג, ריווחים, עיגול פינות וכו׳...
ניתן להוסיף עוד פרמטרים וקלאסים במידת הצורך
*קלאסים אלו אינם גלובליים ויידרש להתאים אותם בהתאם לאלמנט/מסגרת.
יש לשנות את הקלאס במסכים קטנים יותר על מנת להפוך אותו לרספונסיבי בצורה המתאימה!
כדי ליצור את השילוב הרצוי
*קלאסים אלו אינם גלובליים ויידרש להתאים אותם בהתאם לאלמנט/מסגרת
*קלאסים אלו אינם גלובליים ויידרש להתאים אותם בהתאם לאלמנט/מסגרת
⚠️ חשוב!
להשתמש בקלאסים רק לאלמנטים שיישארו נאמנים לפרמטר ולקלאס שלו לאורך כל האתר ובכל המסכים. במידה ונדרש אלמנט אם כיוונונים שונים במסכים שונים - השתמש בקלאס ספציפי (לדוג׳: form-wrapper )
Text 🆎
רצוי לקבוע לכל אלמנט טקסט קלאס מסוים.
ניתן להוסיף עוד פרמטרים וקלאסים במידת הצורך
כותרת ראשית - H1
כותרת משנית - H2
תת-כותרת
טקסט רץ
טקסט תומך
⚠️ חשוב!
להשתמש בקלאסים רק לאלמנטים שיישארו נאמנים לפרמטר ולקלאס שלו לאורך כל האתר. במידה ונדרש אלמנט אם כיוונונים שונים במסכים שונים - השתמש בקלאס ספציפי (לדוג׳: display-title )
🌓 Theme
שינוי ערכת נושא של אלמנט/סקשן. בדרך כלל בין light ל-dark.
ניתן להוסיף עוד פרמטרים וקלאסים במידת הצורך
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לקלאס ולפרמטר.
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לקלאס ולפרמטר.
⚠️ חשוב!
להשתמש בקלאסים רק לאלמנטים שיישארו נאמנים לפרמטר ולקלאס שלו לאורך כל האתר. במידה ונדרש אלמנט אם כיוונונים שונים במסכים שונים - השתמש בקלאס ספציפי (לדוג׳: display-title )
🟣 .Misc
יש להשתמש בכל מעטפת ומסגרת במקום המיועד לה.
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לפרומי בלוף קינץ תתיח.
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לפרומי בלוף קינץ תתיח.
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לפרומי בלוף קינץ תתיח.
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לפרומי בלוף קינץ תתיח.
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לפרומי בלוף קינץ תתיח.
לשאוף לעבוד רק עם image
ולעטוף אותו ב: image-wrapper
עליו ניתן לשלוט בקומבו-קלאסים:
⚠️ חשוב!
להשתמש בקלאסים רק לאלמנטים שיישארו נאמנים לפרמטר ולקלאס שלו לאורך כל האתר. במידה ונדרש אלמנט אם כיוונונים שונים במסכים שונים - השתמש בקלאס ספציפי (לדוג׳: hero-image )
💎 Components
כל הקומפוננטות מעוצבות בצורה רספונסיבית לכל הגדלים.
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
