חזרה ל-Outside the Box9.1 Title over a card9.2 Mixed content9.3 Visible lines9.4 Lines as a background9.5 Baseline rhythm
Tailwind website style
גריד אחד לכותרות ולתוכן, כמו עיתון.
גריד אחד לכותרות ולתוכן, כמו בעיתון מודפס: אותן עמודות ואותו gap בשתי השורות, אז הכותרת מתחילה בדיוק על הקו של העמודה השנייה. רפרנס: ayocin.com, tailwindcss.com.
<div className="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-3">
<span>2.</span>
<h2 className="uk-m:col-span-2">…</h2>
</div>
<div className="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-3">
<article>…</article>
<article>…</article>
<article>…</article>
</div>1 · Title over a card👻 Snippet
המספר בעמודה הראשונה, והכותרת מעל הכרטיס השני.
2.
כותרת על קו העמודה
הנדסת ייצור מובילה
תצוגה באיכות חדה
2 · Mixed content👻 Snippet
אותם קווים עם משפט, תמונה ופסקה.
3.
אותם קווים, תוכן אחר
משפט פתיחה שיושב בעמודה הראשונה, מתחת למספר
הפסקה בעמודה השלישית, והתמונה בדיוק מתחת לתחילת הכותרת.
העין לא רואה קו, אבל מרגישה שהכול יושב על אותו גריד.
3 · Visible lines👻 Snippet
הגריד מצויר על האתר עצמו, כמו ב-tailwindcss.com: זה ה-design rhythm.
הכול יושב על קו
הגריד מצויר על האתר
קו מעל ומתחת לכל שורה של מלל, ומסילה מקווקוות בכל צד. הקווים לא מסמנים כלום, הם הריתם של העיצוב.
עיצוב מתקדם
הנדסת ייצור מובילה
תצוגה באיכות חדה
4 · Lines as a backgroundCSS engine
הקיט: uk-bg-rules ו-uk-bg-rails על כל סקשן. --uk-bg-rules-step, --uk-bg-rails-width, --uk-bg-lines-color.
כותרת על רקע של קווים
שני קלאסים על כל סקשן. הקווים מאחורי התוכן, ואין חובה שמשהו יישב עליהם.
5 · Baseline rhythm👻 Snippet
נושא נפרד: קווים לרוחב במקום עמודות. יחידה אחת לכל שורה ולכל רווח, עם קווי עזר להדלקה. בכל דף: ?lines בכתובת. דף בית שבנוי על זה, להשוואה: /beta/on-the-lines.
הריתם נשאר גם עם תוכן אמיתי
קובעים יחידה אחת, והטור מסתדר לבד. שורת מלל תופסת יחידה, כותרת שתיים, והרווח בין בלוקים עוד יחידה.
כשמדליקים את הקווים רואים את המנגנון: כל שורה יושבת על קו, וגם כל גבול של בלוק. שום דבר לא הוזז ביד. הכול נגזר ממשתנה אחד, ולכן אפשר לכוון את הריתם לגודל קריאה אחר בעריכה אחת.
איפה זה מפסיק להיות בחינם
התמונה מתחת היא 3:2, וזה לא כפולה של כלום. גם הכיתוב קטן מהמלל. כדי ליישר כל שורה צריך היה לחשב רווח מגובה התמונה, וזה ערך שמשתנה עם רוחב המסך.
הפתרון המעשי הוא ריתם ברמת הבלוק: כל בלוק מתחיל על הקו, והפנים שלו חופשי. זה רוב הסדר שהעין מרגישה, בלי השבריריות.
גריד אחד לכותרות ולתוכן, כמו בעיתון מודפס: הכותרת מתחילה על הקו של העמודה השנייה, בדיוק מעל הכרטיס או התמונה. הכול יושב על אותם קווים, גלויים או לא.
👻 Snippetמעתיקים את הקוד מהדוגמהCSS engineקלאס מהקיט נותן מבנה גמיש, והבחירה היא בשם (כמו grid-cols-[5fr_7fr]). ב-uk-mix: גריד של 20×20, ואת התמונות שמים עליו
<div className="uk-mix"><img className="col-[1/12] row-[1/21]" … />…</div>uk-grid + uk-m:col-span-2, styles/uk-components.css (uk-bg-rules, uk-bg-rails), app/docs/outside-the-box/_examples/PrintGrid.tsx
