מוטי כץ

👋 Smart Template 2.0

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

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

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

🟣 Variables

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

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

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

💬 Global Classes

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

🧩 Composition
flex-vert
flex-hoz
מעטפת פלקס עם כיוון אנכי או אופקי.
מעולה לאלמנטים שרוצים לתת להם חופש לתפוס את גודלים האמיתי ולא להגבילם בהכרח.
ניתן לשלב:
wrap-down
grid-2-cols
grid-3-cols
מעטפת עם ״מקומות קבועים״ שהתוכן מתלבש בהם. יותר שליטה על מיקומים וסדר.
עריכת קלאסים {grid}
📂
grid-2-cols
grid-3-cols
rel
rel-1
שליטה על המיקום וz-index.

🔤 Text
h1
h2
h3
form-title
big-text
body-text
small-text
קלאס בסיסי לסוגי טקסט שונים.
**עריכה בלשונית 🟣 Variables**
100-thin
200-xlight
300-light
400-normal
500-medium
600-semibold
700-bold
800-xbold
900-black
משקל טקסט.
text-center
text-right
text-left
יישור טקסט
text-wrap-pretty
text-wrap-balance
text-no-wrap
יישור פסקה
underline
underline-brand
tag
עיצוב טקסט
lh-2
lh-1
גובה הטקסט
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
צבע טקסט.

📏 Spacing
spacer
spacer-xs
spacer-small
spacer-medium
spacer-large
spacer-xl
ריווח אנכי.
**חשוב**
הקלאס spacer לבד
משמש אותנו כמעטפת שעליה אנחנו מחילים את כל הקלאסים הגלובליים שלנו, כדי לשמור על הקלאסים הפנימיים (והלא-גלובליים) כמה שיותר נקיים.
ניתן לערוך את כל הקלאסים תחת מעטפת control-classes
עריכת קלאסים {spacer}
📂
spacer
spacer-xs
spacer-small
spacer-medium
spacer-large
spacer-xl
gap-none
gap-xs
gap-small
gap-medium
gap-large
gap-xl
ליצירת מרווח במסגרות עם פלקס או גריד.
pad-none
pad-xs
pad-small
pad-medium
pad-large
pad-xl
ליצירת מרווח אופקי במסגרות עם פלקס-אופקי.
ניתן לערוך את כל הקלאסים תחת מעטפת control-classes
עריכת קלאסים {pad}
📂
pad-none
pad-xs
pad-small
pad-medium
pad-large
pad-xl

🌓 Design
theme-light
theme-dark
theme-brand
החלפה בין מהירה בין ערכות נושא (צבע רקע וטקסט)
עריכת קלאסים {theme}
📂
theme-light
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
theme-dark
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
theme-brand
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
cr-none
cr-xs
cr-small
cr-medium
cr-large
cr-xl
cr-full
לעריכת הקלאס יש ללחוץ ישירות על הקלאס 👆
עיגול פינות.
border
border-none
לעריכת הקלאס יש ללחוץ ישירות על הקלאס 👆
קלאס בסיסי למסגרת. מומלץ לשלב קומבו קלאס לוריאציות שונות של מסגרות.
fill-dark-100
fill-dark-200
fill-dark-300
fill-dark-400
fill-black
fill-white
fill-brand-100
fill-brand-200
fill-brand-300
fill-brand-400
מילוי אלמנטים.

📔 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

Text 🆎

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

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

תת-כותרת

💬 Global Classes

🧩 Composition

🔤 Text

📏 Spacing

🌓 Design

💎 Components

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

Heading 3

{שם העסק}

תנאי שימוש

📔 Resources

תנאי שימוש