ניקוי uk-components.css (זמני)
הקובץ: 1,965 שורות בבוקר, 928 עכשיו. כבר בחוץ (7.11): הקונטיינר (UkContainer), הגריד (טייל), container-card, uneven, uk-inline, uncover (UkUncover), lead-large, uk-mix, image-tiles, dots-pill, offset-cols, edge-split ו-mix-grid-rows (דף א-סימטריה), overlay, list-count, הפוטר, הטפסים, sticky-head (לדף ה-Sticky), משחקי הכותרות, image-columns, השיידר של hover-swap, UkAnchorLink, FancyboxCloseLink.
★ עימוד: כשמנקים אותו, דברים נשברים.
| # | מה | שורות | מצב | |
|---|---|---|---|---|
| ★frame-rows | שורות במסגרת: תמונה בתוך מסגרת בהירה, טקסט בצד. לא בדוקס (frame-rows) | 37 | פריסה, לטייל: הבא בתור |
UIKit Template
Component Docs
Interactive demos and style references for every component in this template.
Road map
- 1
לעבור על כל הדמואים גם ידנית
אחרי ניקוי ה-CSS והספייסרים (7.11): הצילומים לפני ואחרי לא תופסים הכל. לעבור על כל דמו בעין, בדסקטופ ובטלפון.
- 2
לשקול לוותר על הספייסרים
נוסה ובוטל (7.11): קודמוד המיר 1,935 ספייסרים ל-mt על האלמנט שאחריהם, בסולם של טייל (8, 16, 24, 32, 64), והמדידה ב-40 דפים הראתה שהרווחים זזו. שתי סיבות: margin מתמזג עם ה-margin-bottom של האלמנט שמעליו (ספייסר מחבר, margin לוקח את הגדול), ו-CSS של דמו שלא בשכבה (margin: 0 על כותרת) גובר על ה-mt של טייל. לכן לא בסקריפט: בדמו חדש, ובדף שנוגעים בו ביד. flex-col עם gap על המכיל פותר את שתיהן. נשאר רק uk-spacer-after-h2 בכל מקרה. ו-npm run rhythm קורא את הספייסרים.
- 3
hover_card: כל אפקטי המעבר מעל תמונה במקום אחד
לשקול (7.11). מנגנון או קומפוננטה: ה-hover יושב על משהו חיצוני (נניח כרטיס שלם, hover_card), ובפנים hover_effect שמופעל ממנו, CSS בלבד. כל האפקטים של מעבר מעל תמונה יושבים שם: הזום (uk-hover-scale-image), ההחלפה (uk-hover-swap, fade ו-wipe) והשיידרים (UkHoverShader). לתמונה עצמה לא אכפת איך היא מעוצבת (cover, absolute). אותו מנגנון כמו ההמבורגר (components/uikit/uk-navbar/Hamburger): קומפוננטה אחת והרבה סוגי אנימציה, נבחרים ב-prop, גם אם רובם כמעט לא בשימוש. לא בטוח שיש לזה היתכנות לכל אפקט: ההחלפה צריכה שתי תמונות (הקסדה, ומי שחובש אותה), אז היא לא רק עטיפה של תמונה אחת. היום הכל ב-styles/kit/effects.css.
- 4
בהמשך (7.11). כש-uk-grid נמחק, הרווח הגדול (uk-grid-large) נכתב בכל מקום כ-gap-8 uk-m:gap-[70px], מספר קבוע בכ-280 מקומות. ההחלטה צריכה לשבת בטוקן אחד, למשל --uk-grid-gutter-lg (32 בטלפון, 70 מ-960), ואז gap-(--uk-grid-gutter-lg), כמו הרווח הרגיל. בסקריפט, עם צילום לפני ואחרי. ובאותה הזדמנות: לכל דמו יש גם גרידים משלו בקלאסים (is-cp-steps וכאלה), לא דחוף.
- 5
רובו נעשה (7.11): טייל הוא ברירת המחדל, קלאס רק להחלטה שמשנים במקום אחד (CLAUDE.md 1.3). הקונטיינר הוא UkContainer, הגריד טייל על הטוקן, הקיט נחלק לתיקייה styles/kit עם barrel אחד. נשאר: frame-rows לטייל, ה-effects (מעבר עכבר, רקעים, טקסטורה, sticky-stack) כל אחד לבית או לקומפוננטה, ו-UkStackCards עם מצב CSS בלבד.
- 6
אזור בדוקס לכל מה שעוד לא עלה לאתר החי: דמואים ודפי בית שלא נבחרו, ניסויים, המזבלה. האתר מראה רק מה שאושר. מכאן גם יוחלט מה זה "נבחרים" ב-/works (הכפתורים ירדו מהאתר החי, 7.11).
- 7
מגה מניו: overlay על הדף כשהיא פתוחה
כשהמגה מניו נפתחת, החלק של הדף שלא מכוסה בה משנה צבע (overlay כהה או טשטוש), כדי שהעין תהיה בתפריט (7.11).
- 8
מתקפת ההדרים
מפה של סגנונות והארסנל שלהם, במקום הירו מאפס בכל דמו. ובתוכה סקיל להדרים (6.11): הציונים ב-/works הראו שרוב הדמואים החלשים חלשים בהדר: יבש, נראה דף פנימי, אותו הדר כמעט תמיד. סקיל שמכריח לבחור הדר ולא לחזור על אותו אחד: תמונה פסיכית מננו בננה עם מלל על השמיים (התחדשות עירונית, כנס נדל״ן), שם המותג כ-PNG בכתב משלו (דולצ׳ה), ועוד. לא בטוח שסקיל יעזור: הדרים המודל כבר מכיר, מה שחסר הוא הבחירה.
- 9
תצוגת רשימה חווייתית במנגנון
כל תצוגות הרשימה היום נועדו כאילו אני ויקיפדיה עם 3,000 רשומות. לא לטפל כרגע. הדוגמה לטובה: Elementra, כל שורה תמונה גדולה בצד, מספר, כותרת גדולה ופסקה, עם קו בין השורות.
- 10
גריד של סרטונים שמציג את הדמואים המובילים
כל כרטיס סרטון של גלילה בדמו, כמו ב-HorizonX: רואים מיד איך הוא נראה, בלי לקרוא ובלי להיכנס. החלקים כבר קיימים (UkClip, record-clip, video_autoplay), חסרים הגריד וההקלטות.
- 11
לבדוק שגיאות קונסול באתר
רובן בית מרקחת, אבל לפעמים זה מגלה משהו שתורם. מה שנראה ב-2.11: GSAP target not found, preload שלא בשימוש (7), Forced reflow, ו-handlers ארוכים (message 621ms, setTimeout 352ms).
- 12
אודיט בסיסי לדף (run audit)
פקודה אחת על דף, שמריצה את מה שהיום מפוזר: ו רידם, כותרות, כרטיס שלא לחיץ כולו, תמונת LCP שנטענת lazy, safe zone, רשימה שמוקלדת בתוך דף. כל מיני חוקים נדחפו ל-MD במקום להיות audit שרץ (2.11). מה שיצא מ-MD לכאן: -webkit- שנכתב ביד אחרי השורה הרגילה, קלאס שדבוק ל-${ בטמפלייט, ו-_ בתוך ערך שרירותי של Tailwind.
- 13
עמודים פנימיים ל-VISION
בעתיד. עמודים פנימיים קצרים ממש, בשפה של הבית: אודות והטכנולוגיה (צור קשר כבר קיים). VISION ראשון בשורת הדמואים בבית, ומי שנכנס אליו מוצא היום רק את הבית ואת צור קשר (2.11).
- 14
סקיל ביקורת לעיצוב דף
בהמשך. הכלל "לכל היותר 2 סקשנים ברצף בלי תמונה או אלמנט גרפי" יצא מ-CLAUDE.md אליו (2.11). עד אז הוא בפרק הבדיקה לפני מסירה של סקיל הדמו.
- 15
flip sticky navbar idea
אחרי שנטפל בפרלקס. מנגנון אחר של סטיקי: לא הניווט העליון נדבק, אלא בגלילה הוא מתחלף בבר של הדף עצמו. בשורה העליונה שם הדף וכפתור פעולה, ומתחת טאבים לסקשנים של הדף (אודות, תוצאות, קורסים, המלצות, ביקורות), עם הסקשן הנוכחי מסומן. הדוגמה: צילום של דף קורס של Meta (4.11). קרוב לשאלה הפתוחה מ-31.10, אם בדפי השירותים התת-ניווט הוא שצריך להידבק.
- 16
בהמשך. בדף יש היום הכול באותה שורה: הסליידרים הבסיסיים, ולצדם מיקסים שמשלבים כמה סליידרים או נוגעים ב-Outside the Box, כמו סליידר שמשנה את צבע הרקע (Sync Layer). לסדר לשתי קבוצות: הבסיס, ואז המיקסים (5.11).
- 17
תפריט מסך מלא גם בדסקטופ
אפשרות ב-UkNavbar: גם בדסקטופ רק לוגו, כפתור פעולה והמבורגר, ובלחיצה מסך מלא בצבע של האתר, הקישורים בכותרות ענק אחד מתחת לשני, הנוכחי או זה של המכירה בצבע המותג, ושורת רשתות חברתיות מתחת. חרוש, אבל נפוץ באתרי Awwwards. הדוגמה: התפריט של Kai Rennard מ-HorizonX (5.11). קרוב ל"כל דמו עם אותו ניווט" מ-28.10. ועוד אחד, מ-KILN של HorizonX (5.11): פאנל שנכנס מהצד עם עקומה שמתיישרת, קישורים שמתגלגלים במעבר עכבר (המילה עולה ועותק שלה נכנס מלמטה), וכפתורים מגנטיים. כפתור מגנטי כבר יש בקיט: mouse_move_on_element עם mouse_move_area על אותו אלמנט. יש דוגמאות מעולות בכל ההורדות. ועוד דוגמה, מ-VELUNE של HorizonX (5.11): פאנל בהיר שנכנס מהצד מעל רקע כהה ומטושטש, קישורים גדולים עם מספר קטן לפני כל אחד וקו ביניהם.
- 18
כפתור "i" בכל הדמואים
כפתור קטן שפותח כרטיס כמו Linktree: התמונה, השם, שורה אחת, ואז וואטסאפ, טלפון, רשתות והכתובת. Cut the bullshit: מי שרק רוצה ליצור קשר מקבל את הפרטים מיד וזהו, בלי לגלול את כל הדף. הדוגמה: הלינקטרי של DJ עידן שדה (5.11). אולי בסוף כל האינטרנט יגנוב את הרעיון.
- 19
גלריה שבאמת מנגנת, על Swiper ברמה מקצועית: להצגת עבודות, נגנים, אירועים וכאלו. נולד מהדמו של ה-DJ: בשלושה אתרים אמיתיים של DJ, מהחופר ועד הישן, וידאו הוא הלב, ואצלנו אין (5.11). גלריית תמונות לא חסרה, היא Fancybox שיש בכל דמו; וגם סרטון בודד בפופאפ כבר יש (FancyboxVideo). מה שחסר הוא הגלריה של כמה סרטונים. פעם היה לך קודפן טוב לזה, הוא לא נמצא בתיקייה codepens. בלי תמונה עם כפתור Play שלא מנגנת כממלא מקום.
- 20
מנגנון לכבות אנימציה
השלב שאחרי אחרי. השאיפה: כשסיימת לגלול, צילום מסך של הדף הוא דף שיכול היה להיות כזה בלי אנימציה בכלל. האנימציה רק הובילה לעימוד הסופי. אז בקיצון: היוזר מסמן "בטל אנימציה" ומקבל גלילה רגילה של אותו עיצוב בדיוק. לא לכל האפקטים, אבל לאפקטים עם overload נמוך בהחלט. למשל לכבות את split נותן את אותו עיצוב סופי. קרוב לעיקרון שכבר קיים: ה-state בלי JS הוא המצב הסופי של העימוד (Puzzle on Scroll, 7.10). וחלק מהאפקטים כבר מכבדים את ההגדרה של הדפדפן להפחתת תנועה (5.11). התמונה: VISION הופך לאתר גלילה רגילה, וקליק בצד, "מצב קריאה". לכל אפקט: מה הפריימים שלו. ב-Kai: פריים 1 הדיוקן על כל המסך, פריים 2 הכרטיס עם ה-KR והשורות. מורף במצב קריאה הוא ה-layouts שלו אחד אחרי השני, כל אחד סקשן רגיל. אפקט עם OV גבוה לרוב אין לו פריים לעמוד עליו, ומאותה סיבה הוא גם יוצר שיט. אבל עם אפקט ספציפי אפשר לריב: ל-Before / After מצב קריאה הוא פשוט 2 תמונות אחת מתחת לשנייה.
- 21
אתר לדוגמה בלי הסקילים בכלל
לבקש מ-Claude אתר בלי הסקילים, בלי הקיט ובלי ה-CLAUDE.md, ולהשוות (6.11). ביקשת אתר מ-Copilot והעיצוב פשוט לא נראה כמו שלנו: יכול להיות שמרוב שהסקילים והכל מושקעים, המודל גם נעול קצת עיצובית. דוגמה: באתר של Copilot למוחיטו המוצר עומד על עיגול רך מאחוריו, קלאסיקה שאף פעם לא הוצעה כאן. בדיקה פשוטה של מה הקיט נותן ומה הוא לוקח.
- 22
סקיל לעיבוי תוכן בדפי שירות
דף שירות יוצא תמיד אותו דבר: כותרת, פסקאות, וכרטיס בצד עם משך, מחיר ו"מה זה כולל" (6.11, טיפולי שיער במספרה). 0 עיצוב, משעמם טילים. הסקיל אומר מה עוד נכנס לדף כזה ואיך הוא נבנה: תמונה של הטיפול, שלבים, לפני ואחרי, שאלות, אייקונים, רשימות, ועימוד שהוא לא עמודת מלל ליד כרטיס.
- 23
CMS משלי, בצ׳אט
אולי (6.11). CMS שאני בונה לעצמי, שבו לקוח או אני מבקשים בצ׳אט לשנות דברים באתר במקום טפסים ושדות. לנסות לחבר אותו לפרויקט.
הערות מזבלה
- לשקול לעשות בהמשך: ססמה קבועה בכניסה ל-/docs, כתובה בקוד. לא אבטחה, רק שמי שנפל על הלינק המוסתר בפוטר (המילה "שמורות.") לא ייכנס.
- להתקין Microsoft Clarity (מפות חום והקלטות גלישה), מידע שימושי לאתר חדש. חסר: מזהה הפרויקט, ואז שורה אחת ב-CLARITY_ID ב-components/studio/SiteTags.tsx, ושורה ב-/privacy.
- לטפל: התחדשות עירונית, מהדמואים המכוערים. נושא: גולש בחוף מול עצור פקח.
אתרים עם KIT
אותו כיוון שאנחנו תוקפים, בקונספט שונה: אצלם הקיט הוא אוסף של חלקים להורדה ולשימוש חוזר.
HorizonX horizonx.so
ספרייה להורדה: UI kits, קומפוננטות ותבניות בקוד או בפיגמה, כלי שיידרים וטקסטורות, MCP ופרומפט מוכן לכל קומפוננטה. מנוי מ-24.99$ לחודש.
BYQ Supply byq.supply
סקשנים להעתקה ל-Webflow, Figma ו-Framer או כפרומפט ל-Claude Code ו-Cursor, תבניות, design systems, אפקטי GSAP, AI builder ו-MCP. מנוי מ-20$ לחודש, בחיוב רבעוני.
עיצוב
Everything front-end: type, colour, tokens, components, heads, the navbar, layouts that break the box, sliders, popups, shaders, 3D.
Swiper
Slider variants: classic grid, scale active, sync, tabs, fashion, material you.
Fancybox
Gallery & popup components: autoscroll carousel, thumbs, booking gallery, HTML popup.
three.js
Real 3D in the browser, loaded only on a page that shows a piece of components/three. First piece: UkDepthParallax, parallax from depth.
Outside the Box
The static wow: layout concepts that break the boxes (pictures on one grid, a title over the picture, a band card, bento), each with its evolutions, picked by a question.
HorizonX
Five HorizonX templates of October 2026 read from above: the idea, the mood, how the scroll tells the story, what drives each one. In red: the parallax mechanism the kit is missing. The effect level comes after.
Style Guide
Colors, typography, grids, cards, buttons, spacers, UIkit utility classes.
Design Tokens
Every CSS variable: color, spacing, radius, typography scales. Check here before inventing a new token.
מיפוי לפי תוכן
The arsenal by what a page has to show: one yes/no question per piece, read from every catalogue, grouped by content (pictures, lists, topics, navigation, text).
UIKit Components
Shared components, each live with its code, by use: the 🏆 ones in every demo first (UkBreadcrumb, UkSocialLinks, UkToggleList with uk-list-rows, UkAccordion), then uk-card-link, UkLiveFrame and the rest.
Navbar
Every UkNavbar option on one page: a live bar with its props, the full props list with defaults, mobile menus, the current-page mark, the per-page override and the hamburger.
Heads & heroes
UkInsideHeader clean and classic, the studio PageHeader, the breadcrumb gaps they share, and the hero pieces, live with their props; hero sections to copy at the bottom.
Tooltips
Tooltips on Tippy.js, the one engine: a short text label, or HTML with a picture or a link inside, and why none opens on a phone.
Shaders
WebGL transitions between two pictures: twelve shaders, every component that uses them, a lab to drag one by hand.
Clips
Every recorded clip of our sites in one place, how to record a new one, and the idea of a clip instead of a screenshot.
Footer
UkFooterCol, the link column that folds into an accordion row on a phone, and the footer's four classes.
Sort / filter
UkFilters, filter and sort any collection, and UkSheet, the panel it opens on a phone. One demo uses it (realty).
BETA
A dump of front-end things on their way, even half-done ones.
GSAP
Scroll animation: entrances, depth, showpieces, section and page transitions, loaders, and how the engine runs.
פיתוח
What runs under the pages and keeps them right: the engine, the skills, search, the checks and scripts, Vercel.
Engine
What runs on every page and route change: the init order (Lenis first), the click and Back rules, the current-page mark, route popups, scroll restoration and Lenis with its escape hatches.
Skills
Every skill in .claude/skills with the docs page of the same ground. Create a Demo has its own page, and Shared Inner Pages (one demo, several homepages) sits under it.
Checks & scripts
Every npm script in one table: the four checks CI runs on a pull request, the ones run by hand (rhythm, heads, unused CSS, look), images, and the Google data scripts. What each guards and where its docs are.
ESLint
The CLAUDE.md rules as automatic checks: npm run lint, the rules that are on, and the next ones to add.
Vercel
What Vercel bills for (builds x cores, stored deployments), what was done on 28.10, the rules for every project, and npm run vc.
Algolia
Real-time autocomplete over the site index: Fuse.js fuzzy match, RTL, keyboard nav.
webiny_course
A short course in chapters: sticky chapter list, progress that remembers, previous / next, blocks for long text. One data file per instance.
Image Generator
Generating demo imagery with Gemini: the API key, the manifest, the five scripts, and the rules that keep breaking.
מבקר חיצוני
The question set for a neutral review by an outside AI model: six parts of ten points, the context it needs, and an answer format with evidence.
שיווק
The ads: where an ad lands, how a lead is measured, how the results are read.
PPC overview
The advertising mechanism as it stands: the landing pages, the lead and click conversions, attribution in the lead email, remarketing, the Ads connection and the scripts that read the results.
Landing Pages
The ad landing page, by month: one page in the words of each field, the ad URL, and which page a search lands on, as plain links.
CTA
Elements that push a page toward a lead: the sticky contact buttons, the floating strip, the open form.
Analytics
GA4 on the site and in the terminal: the tag, one sign-in, npm run ga reports, Google Ads through GA, landing-page tracking.
Connect Google Ads
The step-by-step guide, with screenshots, to give Claude access to Google Ads and GA: the Cloud project, the service account, the access level, the test.
ארכיטקטורת מידע
The Flood: the site's page tree, picked by search volume, and the search data it is built from.
The Flood
The idea of 26.10, started 29.10 on the services of the studio: CMS pages (a row of data, one template, an override for a page that needs its own block) in a three-level flow, parent, child, grandchild, picked by search volume, with the bar, the breadcrumbs and the index derived from the tree. Next: the lawyer demo as the first client tree.
מיפוי מילים
The site as it is, page by page: each existing page with up to 5 words from its own title, their search volume (DataForSEO) and the place on Google Israel. npm run kw → serp → seo-map.
DataForSEO
Search data paid per use: how many search a word in Israel a month and where a site stands on Google for it. The three scripts, their cost, and a client site built from them step by step.
