Pictures on one grid
כמה תמונות חופפות על גריד אחד.
גריד של טייל, grid-cols-20 grid-rows-20, בקופסה ביחס קבוע: חתוכה ל-20 על 20, כל קו הוא 5%. אין קלאס: תמונה או בלוק יושבים על קווים, וחלקים על אותן משבצות חופפים (האחרון ב-DOM למעלה).
<div className="grid grid-cols-20 grid-rows-20 aspect-5/4"> {/* the box's ratio: any aspect-* */}
<span className="block size-full min-w-0 min-h-0 rounded-(--uk-global-border-radius) bg-[var(--uk-mix-shape,var(--primary))] col-[4/18] row-[6/18]" /> {/* 15→85% wide, 25→85% high */}
<img className="block size-full min-w-0 min-h-0 rounded-(--uk-global-border-radius) object-cover col-[1/12] row-[1/21] grayscale" … /> {/* 0→55%, all of it */}
<img className="block size-full min-w-0 min-h-0 rounded-(--uk-global-border-radius) object-cover col-[14/21] row-[3/17]" … /> {/* 65→100%, 10→80% */}
</div>
line N sits at (N − 1) × 5%: col-[4/18] = from 15% to 85%.
--uk-mix-shape = the block's colour (default --primary); corners = --uk-global-border-radius.הטריק: חפיפה בלי position: absolute
בגריד רגיל כל פריט מקבל תא משלו. כאן כל פריט מקבל קואורדינטות, עמודות ושורות, ושני פריטים יכולים לקבל את אותן משבצות. אז הם פשוט חופפים, וכל אחד מהם נשאר פריט רגיל של הגריד.
- מי מעל מי: האחרון בקוד מצויר מעל. כדי להפוך: להחליף את הסדר, או
z-10על הראשון. - הצדדים: העמודות רצות לפי כיוון הקריאה, אז בעברית עמודה 1 היא הימנית.
- למה לא absolute: absolute מוציא את הפריט מהזרימה, ואז צריך להמציא לקופסה גובה, למקם בפיקסלים או באחוזים, ולסדר מחדש בכל רוחב מסך. כאן הקופסה שומרת על הגובה שלה מה-aspect, כל המיקומים יחסיים, והכל מתכווץ כיחידה אחת בטלפון.
- לא רק תמונות: כל דבר שחופף, תמונה על תמונה, תווית על פינה, בלוק צבע מאחור (כמו בראש של דף הנחיתה).
col-[1/12] row-[1/10]col-[6/21] row-[6/21]1 · Stepped Pairuk-mix
שתי תמונות: גבוהה, ולידה קצרה שיורדת מדרגה; הבלוק נראה ביניהן ומתחת, ואחת בשחור-לבן. הכותרת עולה על הרצועה הבהירה של השנייה.
שמלות כלה בתפירה אישית
כל שמלה מתחילה בשיחה: מה את אוהבת, איך את רוצה להרגיש ביום הזה ומה מתאים לאולם ולעונה. משם בוחרים יחד בד וגזרה, והשמלה נתפרת עלייך בסטודיו, מדידה אחרי מדידה.
לתיאום פגישה2 · Triouk-mix
שלוש תמונות בקופסה ריבועית: הדמות גבוהה בצד אחד, העבודה הגמורה רחבה למעלה ועולה על הקצה שלה, והפרט קטן על בלוק למטה. שלושה גדלים ושלושה חיתוכים (השלם, העבודה, היד), אז העין קוראת סיפור ולא גלריה.
רהיטים מעץ מלא, בהזמנה אישית
מטבחים, ארונות ושולחנות שמתוכננים למידות של הבית ונבנים אצלנו בנגרייה, מהלוח הראשון ועד ההרכבה אצלכם.
לתיאום פגישה3 · Cascadeuk-mix
שלוש תמונות שיורדות באלכסון, כל אחת על הפינה של הקודמת, במסגרת בצבע הדף כמו הדפסים שמונחים על שולחן. בית קפה: הבר, המגש, השולחן ליד החלון.
קפה טוב, מאפה מהבוקר וחלון לרחוב
פותחים בשבע עם מאפים מהתנור שלנו וקפה שנטחן במקום. יש שולחנות ליד החלון, שקעים לכל מי שבא לעבוד, ומקום לעגלה.
לבית הקפה4 · Circle detailuk-mix
החלל גדול, הכלים בעיגול על הפינה שלו (rounded-full על ריבוע של משבצות: הקופסה ריבועית, אז עשר על עשר זה עיגול), ובלוק צבע קטן בפינה הרחוקה. שתי התמונות בשחור-לבן, אז הבלוק הוא הצבע היחיד.
כיסא, מספריים ותור בלי לחכות
מספרה שכונתית עם שלושה כיסאות. תספורת, זקן ותספורת ילדים, בתיאום מראש או בכניסה חופשית כשיש מקום.
לקביעת תור5 · Offset frameuk-mix
הטיפול גדול, מסגרת קו צעד אחד מאחוריו (uk-mix-shape עם border ובלי מילוי), והמוצרים קטנים על הפינה של המסגרת.
טיפול שמתחיל באבחון
לפני כל טיפול בודקים את העור ומדברים על השגרה שלך בבית. רק אז בוחרים טיפול ומוצרים, ולא להפך.
לקביעת תור6 · Editorialuk-mix
גם המלל יושב על הגריד, ולא לידו: שתי עמודות בשני קצבים, מלל מעל תמונה רחבה, ותמונה גבוהה מעל שורה קצרה. מלל לא מתכווץ עם הקופסה, אז כאן מתחת ל-960 החלקים נערמים לפי הסדר.
בית קפה שכונתי, מהבוקר
קפה שנקלה אצלנו ומאפים שיוצאים מהתנור כל בוקר, בשולחן ליד החלון או לדרך.
פתוחים כל יום, ובשישי עד הצהריים.
שתיים-שלוש תמונות ובלוק צבע על גריד יחסי אחד (uk-mix): חופפות, יורדות מדרגה, אחת בשחור-לבן. קופסה אחת שמתכווצת כיחידה, אז בטלפון זו אותה קומפוזיציה, וב-RTL היא מתהפכת לבד.
<div className="uk-mix"><img className="col-[1/12] row-[1/21]" … />…</div>styles/uk-components.css (uk-mix) + app/docs/outside-the-box/_examples/
