התאמת סגנונות

הקדמה

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

• שימוש ב-CSS סטנדרטי:
  • השגת כל סגנון אתר.
  • ייצוא סגנונות לכל בונה אתרים, מה שהופך אותם לשימושיים מחדש אם תעברו לפיתוח מבוסס קוד.
• ערכי ברירת מחדל:
  • בהשראת ספריות כמו Tailwind, Slidde.co מספקת ערכי ברירת מחדל לסגנונות, המאפשרים לבחור אפשרויות בלחיצת עכבר במקום להקליד.
• מבנה ברור:
  • גם עבור סגנונות מורכבים, ההגדרות נשארות ברורות ולא יפריעו למבנה ה-DOM.

רכיב לדוגמה: סרגל ניווט אופקי

בואו ניקח רכיב מורכב, סרגל הניווט האופקי, ונחקור את חמשת אזורי ההתאמה האישית:

1. סגנונות מותאמים אישית: CSS עבור כל סרגל הניווט.
2. סגנונות מותאמים אישית למיכל: סגנונות למיכל השמאלי, בדרך כלל מכיל לוגו או כותרת.
3. סגנונות מותאמים אישית לכפתור: סגנונות לכפתורים בשולחן העבודה.
4. סגנונות פעילים לכפתור: סגנונות לכפתורים פעילים בשולחן העבודה.
5. סגנונות מותאמים אישית לכפתור ההחלפה: סגנונות לכפתור תפריט ההמבורגר במובייל.

ניתן לראות דוגמה מלאה לסרגל ניווט כאן תבנית.

תחביר CSS מתקדם

Slidde.co תומכת בתחביר CSS מתקדם עבור עיצוב מדויק יותר:

• מפריד נקודה: השתמשו ב-. כדי להפריד בין תכונות למודיפיירים.
• CamelCase: השתמשו ב-CamelCase לשמות תכונות CSS.

דוגמאות:

• &:hover.color: צבע גופן במעבר עכבר.
• &:hover.borderColor: צבע גבול במעבר עכבר.
• padding: ריפוד לכל גדלי המסכים.
• md.padding: ריפוד למסכים גדולים יותר מבינוני (שולחן עבודה).

כדי להגדיר ריפודים שונים למובייל ולשולחן עבודה: padding: .5rem & md.padding:2rem

### בוררי CSS סטנדרטיים:

- `& > img.height`: גובה של אלמנטים `img` ברמה הראשונה בתוך האלמנט הנוכחי.
- `&:first-child.color`: פסאודו-מחלקה `::first-child` עבור האלמנט הראשון.
- `&::after.content`: פסאודו-מחלקה `::after` להוספת אלמנטים נוספים.

על ידי מעקב אחר ההנחיות הללו, תוכלו להשתמש ב-Slidde.co לעיצוב והתאמה אישית של רכיבי האינטרנט שלכם בדיוק ובקלות.