ריסטים: styles/uk-css-global-resets.css (ועוד ה-preflight של טייל). ריסט שחוזר בכל דמו נרשם שם פעם אחת.
Color Palette
Core design tokens from app/globals.css, in oklch: change --primary to retheme the entire site.
Primary
--primary
tw: primary
Foreground
--foreground
tw: foreground
Background
--background
tw: background
Muted
--muted
tw: muted
Secondary
--secondary
tw: secondary
Accent
--accent
tw: accent
Destructive
--destructive
tw: destructive
Border
--border
tw: border
UkBadge
A small pill placed above a heading, an "eyebrow" that gives the section its category. The name describes the role, not the shape. For one-off generic badges, use atomic Tailwind, don't bake every variant into the arsenal.
Canonical use
Built for serious operators
Strategy, financial modeling, and growth ops for small-and-medium businesses ready to step up.
<div class="flex flex-col items-start gap-3">
<UkBadge>Our services</UkBadge>
<h2>Built for serious operators</h2>
<p>Subtitle text…</p>
</div>Colors
Sizes
Default <UkBadge> IS the title/eyebrow size, never add a size modifier on a heading badge. Use -xs only inside dense rows (TOC sub-line, meta strip).
Component: <UkBadge> (components/uikit/UkBadge; its class stays uk-title-badge, the hook a demo re-skins)
Colors: tone="muted" · custom: style="--badge-bg: …; --badge-color: …;"
Sizes: size="xs" · tokens: --badge-fs / --badge-pad-y / --badge-pad-x
h1: Main Heading (2.5rem)
h2: Section Heading (2rem)
h3: Sub Section (1.5rem)
h4: Sub Heading (1.25rem)
h5: Small Heading (1.1rem)
h6: Mini Heading (1rem)
p.uk-text-lead: פסקת פתיחה, דרגה אחת מעל הגוף (--lead-size: 1rem, 1.125rem מ-768). רק גודל, הצבע של הפסקה
שורת פתיחה גדולה ואפורה: אטומיק, לא קלאס (text-[1.5rem] leading-[1.5] text-muted-foreground) tailwind 🍤
לורם איפסום דולור סיט אמט, קונסקטטור אדיפיסינג אלית. סד אוט פרספיקיאטיס אונדה אומניס איסטה נאטוס ארור סיט וולופטאטם אקוסנטיום דולורמקוא לאודנטיום. הנה קישור לדוגמה בתוך פסקה רגילה, וגם טקסט מודגש ו-טקסט נטוי לצורך בדיקה.
- פריט ראשון ברשימה לא ממוספרת
- פריט שני עם קישור פנימי
- פריט שלישי עם הדגשה
- פריט ממוספר ראשון
- פריט ממוספר שני
- פריט ממוספר שלישי
ציטוט לדוגמה, סד אוט פרספיקיאטיס אונדה אומניס איסטה נאטוס ארור סיט וולופטאטם.
uk-section: Background Variants
uk-section: רקע הדף (ברירת מחדל)
uk-section-muted: רקע muted (זברה)
uk-section: Padding Sizes
כל וריאנט padding מוצג עם רקע muted כדי לראות את הגובה. הערך הוא ה-padding למעלה ולמטה, מ-640px ומעלה. בטלפון (מתחת ל-640px) כל הגדלים הם 40px.
uk-section-small: 40px
uk-section (default): 100px
uk-section-medium: 100px
uk-section-large: 140px
uk-section-xlarge: 200px
Padding removal: uk-section-pt-0: מאפס padding למניעת ריווח כפול
UkContainer
Container variants control the max-width of content. All containers are centered with horizontal padding. The dashed border shows the container boundary.
<UkContainer>, max-width: var(--uk-container-max-width) · padding: 16px mobile → 40px desktop
<UkContainer size="small">, max-width: 900px
<UkContainer size="large">, max-width: 1400px
UkContainer card
prop של UkContainer, card: הקונטיינר עצמו הופך לקלף טונאלי. רקע ברירת מחדל: muted. לצבע אחר, אטומיק של Tailwind: bg-background, bg-foreground text-background.
שני וריאנטים, תבחר לפי כוונה במובייל:
card: קלף תמיד. במובייל יושב במרכז עם 16px gap מהוויואפורט (אותו קו כמו תוכן בסקשנים שכנים).card="desktop": קלף רק בדסקטופ (≥960px). במובייל: רצועה צבועה מקצה לקצה בלי radius / padding-inline, התוכן יושב על gutter שלuk-container.
card · always-on
קלף בכל הגדלים. max-width: min(token, 100svw - 2 × gutter) מבטיח 16px מהקצה במובייל.
Always-on card
card="desktop" · responsive
בדסקטופ קלף מלא, במובייל רצועה צבועה שטוחה. שנה את גודל החלון מתחת ל-960px כדי לראות.
Responsive card
Grid tailwind 🍤
אין קלאס של גריד (7.11): טייל על האלמנט. ההחלטה נשארת בטוקן, אז היא עדיין משתנה פעם אחת: הרווח הוא --uk-grid-gutter, ובטלפון --uk-grid-gutter-mobile. *:min-w-0 שומר על סליידר או תמונה רחבה בתוך תא.
סוגי רווח (gap)
gap-(--uk-grid-gutter-sm) 20gap-(--uk-grid-gutter) 40, בטלפון 20gap-(--uk-grid-gutter-lg) 70, מתחת ל-960 32gap-[62px] כל מספר, כשהעיצוב מבקש2 עמודות (רספונסיבי, stack במובייל)
grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)] uk-m:grid-cols-23 עמודות מ-960 (uk-m:)
grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)] uk-m:grid-cols-34 עמודות מ-960 (uk-m:) + gap קטן
grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter-sm) uk-m:grid-cols-42 עמודות FIXED (לא נשבר במובייל)
grid grid-cols-2 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)]<hr>: divider אופקי בסיסי
תג HTML פשוט. מקבל אוטומטית את --uk-divider-color ו---uk-divider-thickness מאותם טוקנים.
טקסט מעל ה-hr.
טקסט מתחת ל-hr.
3 עמודות + span
uk-grid uk-m:uk-grid-3 › col-span-2Ratio split (7/12 + 5/12)
uk-grid uk-m:grid-cols-[7fr_5fr]עמודות ביחס הן לא class של הקיט: uk-grid הוא לעמודות שוות (uk-grid-2 עד uk-grid-6), ויחס נכתב ב-Tailwind על הגריד, uk-m:grid-cols-[7fr_5fr]. כל מספר הוא fr, אז כל יחס אפשרי. uk-grid שומר שעמודה לא תתנפח מעבר לחלק שלה (min-width: 0 על הילדים).
Ratio, responsive
uk-grid uk-s:grid-cols-[2fr_1fr] uk-m:grid-cols-[7fr_5fr] uk-l:grid-cols-[3fr_5fr_2fr]עם prefix, כמו בספירת עמודות: בטלפון אחת מתחת לשנייה, מ-640 יחס 2 ל-1, מ-960 יחס 7 ל-5, ומ-1200 שלוש עמודות 3-5-2. שנו את רוחב החלון.
uk-grid with Tailwind inside: subgrid, col-start
uk-grid uk-m:uk-grid-4 › col-span-3 grid grid-cols-subgrid › col-start-2uk-grid הוא display: grid, אז כל ה-utilities של Tailwind לגריד עובדים עליו כמו שהם. השורה השנייה היא subgrid שיורש את ארבע העמודות של ההורה, והפריט בתוכו מתחיל בעמודה השנייה. מ-960px.
<div class="grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)] uk-m:grid-cols-4">
<div>01</div> … <div>05</div>
<div class="uk-m:col-span-3 grid uk-m:grid-cols-subgrid">
<div class="uk-m:col-start-2">06</div>
</div>
</div>Grid Collapse (בלי gap)
UkButton
Sizes
Arrow and icon
חץ ואייקון הם props, לא קלאסים. האייקון הוא כל אלמנט (svg, img), ו-iconAt אומר אם הוא לפני המלל או אחריו: start / end הם צדדים לוגיים, אז RTL ו-LTR כל אחד מניח אותו בצד הנכון לבד (7.11).
<UkButton href="/contact" arrow>דברו איתנו</UkButton>
<UkButton href="https://…" arrow="diagonal">לאתר</UkButton> {/* an outside link */}
<UkButton href="…" icon={<svg …/>}>LinkedIn</UkButton> {/* iconAt="start", the default */}
<UkButton icon={<Check size={16} />} iconAt="end">סיימתי</UkButton>Scroll and popup
- גלילה חלקה: כפתור עם
href="#section"גולל לשם חלק ונוחת מתחת לנאבבר הדביק. אין prop: הפרויקט עושה את זה לכל עוגן באתר (listener אחד ב-uk-lenis-init.js, והנחיתה היא scroll-padding-top ב-CSS). - פופאפ: כדי שכפתור יפתח פופאפ נותנים לו את האטריביוטים של Fancybox, הכפתור מעביר כל אטריביוט כמו שהוא:
<UkButton href="#talk" data-fancybox>. לינק בתוך פופאפ שסוגר אותו ועובר לדף:data-fancybox-close.
On Dark Background
st_heading_inline_gradient
Inline gradient text used for emphasis inside headings. Apply the class st_heading_inline_gradient to a <span>.
Build Something Beautiful
Design That Speaks
Crafted With Precision
uk-title-span
A <span> inside a heading that gets a distinct color + weight, to make part of the title stand out. Apply uk-title-span to the span.
Sets only color + weight, never a font-size or any other text property. It inherits the heading's size, so the same class works inside h1–h3 and always scales with it. Defaults: color var(--primary), weight 550. Override per use or per scope: --uk-title-span-color / --uk-title-span-weight.
Urban Renewal Starts With People.
Design That Connects.
Crafted With Care.
<h2>Urban Renewal <span class="uk-title-span">Starts With People.</span></h2>uk-paint-underline
A hand-drawn line under part of a heading, on every line the words wrap to. Reads best as a bold line, then a light one of about the same length under it.
בניית אתרים
בעזרת כלי AI
<h2>בניית אתרים<br /><span class="uk-paint-underline font-normal">בעזרת כלי AI</span></h2>uk-spacer-v-*
Spacing Philosophy
All headings (h1–h6) and paragraphs are globally reset to margin: 0; padding: 0. All vertical spacing is created explicitly using empty <div> spacer utilities like uk-spacer-v-16 or uk-spacer-after-h2. This approach guarantees pixel-perfect vertical rhythm: no collapsing margins, no surprises.
Vertical spacer utilities for consistent rhythm between elements.
uk-spacer-v-8uk-spacer-v-12uk-spacer-v-16uk-spacer-v-24uk-spacer-v-32uk-spacer-v-48Responsive spacer
רווח אחר בטלפון הוא קידומת, כמו בכל קלאס של Tailwind: uk-spacer-v-32 max-uk-s:uk-spacer-v-16 הוא 32 במחשב ו-16 בטלפון (מתחת ל-640). הערכים באים מהקצב האנכי של האתר, לא מספר חופשי: 16 ו-24 בתוך קבוצה, 32 ו-48 מכותרת לתוכן שלה, ובטלפון בערך חצי. המינימום בטלפון הוא 16, ו-10 רק בין תגית לכותרת שלה. טכנית כל מספר עובד (uk-spacer-v-22 הוא 22px), אבל רווח שלא מהסקאלה צריך סיבה.
uk-spacer-v-32 max-uk-s:uk-spacer-v-16uk-spacer-v-48 max-uk-s:uk-spacer-v-24uk-spacer-after-h2
Consistent vertical rhythm spacer placed after every h2. Desktop: 48px | Mobile: 32px.
Section Heading Example
Content starts here after the spacer.
כרטיס: ספייסרים מול gap
אותו כרטיס פעמיים, והרווחים מפוספסים. מימין כל רווח הוא div משלו. משמאל אין אף div: המכיל אומר flex flex-col gap-*, וקבוצה בתוך קבוצה נותנת את הקרבה (16 בין התגית לכותרת, 8 בין הכותרת לטקסט, 24 עד הכפתור).
uk-spacer-v-*flex flex-col gap-*בניית אתר תדמית
אתר שמציג את העסק, נבנה מהרכיבים של הסטודיו.
fix_height_for_fixed_navbar
Spacer placed at the top of content to offset the fixed navbar height (h-16 md:h-20). Only needed when the navbar is in fixed or auto-hide mode.
This is the spacer (h-16 on mobile, h-20 on desktop)
uk-clamp-*
חותך טקסט אחרי N שורות עם "…", כל מספר (uk-clamp-2, uk-clamp-5). ככה כל הכרטיסים בשורה באותו גובה גם כשאורך הטקסט משתנה. מספר אחר מ-768: md:uk-clamp-3. בלי חיתוך מ-768: md:uk-clamp-none.
uk-clamp-2 md:uk-clamp-3
תיאור ארוך של שירות בכרטיס, כזה שממשיך שורה אחרי שורה. בטלפון הוא נחתך אחרי שתיים, מ-768 אחרי שלוש, וכל הכרטיסים לידו נשארים באותו גובה. מי שרוצה את כל הטקסט נכנס לעמוד של השירות, שם הוא מופיע במלואו בלי שום חיתוך.
uk-clamp-2 md:uk-clamp-none
אותו טקסט ארוך, הפעם חתוך רק בטלפון. מ-768 החיתוך משתחרר והטקסט מופיע כולו, כי במסך רחב יש לו מקום. מתאים לכרטיס שבו התיאור חשוב יותר מגובה אחיד, ובטלפון עדיין לא רוצים שהוא ימלא את המסך.
uk-expand-to-edge
Breaks an element out of the container to touch the viewport edge. The expand element must be in the correct physical column: first child (physical right in RTL, physical left in LTR) for right-edge, second child for left-edge.
uk-expand-to-edge-right
In LTR, the image is at the inline-end (physical right) → expands to the right viewport edge.
uk-expand-to-edge-left
In LTR, the image is at the inline-start (physical left) → expands to the left viewport edge.
uk-expand-to-edge-right
In RTL, the image is at the inline-end (physical left) → expands to the left viewport edge.
⚠ שם הקלאס "right" מניח את הסטייל של LTR, [text][image]. ב-RTL הסדר מתהפך והתמונה בפועל בשמאל הפיזי.
uk-expand-to-edge-left
In RTL, the image is at the inline-start (physical right) → expands to the right viewport edge.
⚠ שם הקלאס "left" מניח את הסטייל של LTR, [image][text]. ב-RTL הסדר מתהפך והתמונה בפועל בימין הפיזי.
uk-expand-padding
Drop-in breathing room. Add this class alongside uk-expand-to-edge-left or uk-expand-to-edge-right to pull the bleeding side back from the viewport edge, useful when the image has rounded corners that would otherwise be hidden by the viewport boundary.
The class name is direction-agnostic (no "left"/"right" in the name) because under the hood it uses padding-inline-start / padding-inline-end, so LTR/RTL flip is automatic. Value comes from --uk-expand-padding (default 32px). Active ≥960px only, below that the expand mechanism is off, so the modifier is a no-op (image stays flush with the text column).
Compose, don't fight the cascade
The image still bleeds toward the viewport edge, but stops 32px short, leaving room for the rounded corner to read cleanly. Replace the inline padding override pattern used in older demos.
