תום אני

👋 Smart Template 2.0

טמפלייט עדכני מבוסס על variables.
משתנים שמוגדרים בלשונית variables כאן או בלשונית בצד שמאל.
מומלץ להגדיר את הערכים מראש.

תהליך עבודה מומלץ.

‍הגדרת variables.
ייבוא כל המדיה הנדרשת.
פיתוח האתר.
עדכון meta-data של כל העמודים.
מחיקת קלאסים ואינטרקציות לא נחוצות.
ווידוא alt tag, לינקים, דחיסת מדיה.
חיבור דומיין.
הרצת טסטים.

🟣 Variables

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

🎨 Colors
Brand - צבעי מותג
1
Brand-100
1
Brand-200
1
Brand-300
1
Brand-400
Dark - צבעים ניטרלים
1
Dark-100
1
Dark-200
1
Dark-300
1
Dark-400
System - צבעי מערכת
1
Black
1
White

📏 Spacing
ערך מספרי דינאמי שחוזר על עצמו בעיצוב האתר. ניתן להשתמש ל:
ריווחים, עיגולי פינות, מרווחים וכו׳.
דוגמא לשיטת ריווח:
None
Xsmall
Small
Medium
Large
XLarge
2XLarge
3XLarge
Huge

Text 🆎
כותרת ראשית - H1
כותרת משנית - H2
תת-כותרת
כותרת לטופס
טקסט גדול
טקסט רץ
טקסט תומך

🌓 Theme
שינוי ערכת נושא של אלמנט/סקשן. בדרך כלל בין light ל-dark.
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
Button Text
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
Button Text

💬 Classes

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

קומפוזיציה
flex-vert
flex-hoz
מעטפת שהאלמנטים בה יתנהגו בורה חופשית בהתאם לגודלם וכיוון המעטפת.
grid-2-cols
grid-{your_grid)
מעטפת עם ״מקומות קבועים״ שהתוכן מתלבש בהם. יותר שליטה על מיקומים וסדר.
gap-0
gap-xsmall
gap-small
gap-medium
gap-large
gap-xlarge
gap-2xlarge
gap-2xlarge
gap-2xlarge
שליטה על מרווח בין אלמנטים. עובד רק תחת גריד או פלקס.
rel
rel-1
שליטה על המיקום וz-index.

תמונות
image-wrapper
קלאס שנביא למעטפת של התמונה ועליו נבצע את רוב ההתאמות. נשאף לגעת ולשנות את הקלאס {image} כמה שפחות (יותר לכיווני היחסיות והחיתוך של התמונה)
ולעבוד עם הקלאס {image-wrapper} כמה שיותר לשינויי גודל ועיצוב.
image
קלאס בסיסי לתמונה, 100% רוחב.
cover
tall
שליטה על מימדי וגובה התמונה

עיצוב
light-mode
dark-mode
החלפה בין light mode ל-dark mode. משפיע על צבע הרקע והטקסט.
קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
pad-none
pad-xs
pad-sm
pad-med
pad-large
pad-xl
pad-2xl
pad-3xl
pad-huge
הוספת padding
pad-none
pad-xs
pad-sm
pad-med
pad-large
pad-xl
pad-2xl
pad-3xl
pad-huge
cr-none
cr-xs
cr-small
cr-medium
cr-large
cr-xl
cr-2xl
cr-3xl
cr-full
שליטה על הרדיוס של הפינות.
cr-none
cr-xs
cr-small
cr-medium
cr-large
cr-xl
cr-2xl
cr-full
cr-full
border
border-none
קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
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
סטייל רקע

טקסט
h1
h2
h3
form-title
big-text
body-text
small-text
קלאס בסיסי לסוגי טקסט שונים
300-light
400-normal
700-bold
500-medium
שליטה על משקל הטקסט
text-center
text-right
text-left
יישור טקסט
text-wrap-pretty
text-wrap-balance
text-no-wrap
יישור פסקה
underline
underline-brand
tag
עיצוב טקסט
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
צבע טקסט

📔 Resources

משאבים שימושיים לתהליך עבודה מהיר:

לוטים חינמיים כולל שינוי צבע מקלדת אימוג׳ים SVG to DOM

מדיה
לוטים:
אייקונים

סקריפטים
טקסט חודש נוכחי
<script>
const months = ["ינואר","פברואר","מרץ","אפריל","מאי","יוני","יולי","אוגוסט","ספטמבר","אוקטובר","נובמבר","דצמבר"]; var d = new Date();
d.setDate(d.getDate() + 7) var month = months[d.getMonth()]; $(".month").each(function() {
$(this).text(month);
});
</script>
הגבלות שדה גיל
<script>
document.addEventListener("DOMContentLoaded", function () {
const input = document.querySelector('input[name="Age"]');
if (input) {
input.addEventListener("input", function () {
// Remove non-digit characters just in case
this.value = this.value.replace(/\D/g, ''); // Limit to 2 digits
if (this.value.length > 2) {
this.value = this.value.slice(0, 2);
}
});
}
});
</script>

👋 Smart Template 2.0

תהליך עבודה מומלץ.

🟣 Variables

🎨 Colors

📏 Spacing

Text 🆎

כותרת ראשית - H1

כותרת משנית - H2

תת-כותרת

🌓 Theme

💬 Classes

💎 Components

יאללה, בוא נתחיל!

Heading 3

{שם העסק}

תנאי שימוש

📔 Resources