گرید و چیدمان

وضعیت: در حال بازبینی

گرید اسلاید

اسلایدها روی گرید ۱۲ستونی بوم ۱۹۲۰×۱۰۸۰ چیده می‌شوند. در چیدمان راست‌به‌چپ، اولین ستون سمت راست است.

توکن	مقدار	کاربرد
--hq-grid-slide-columns	12	تعداد ستون‌ها در هر اسلاید.
--hq-grid-slide-column	100px	پهنای هر ستون.
--hq-grid-slide-gutter	48px	فاصلهٔ بین ستون‌ها.
--hq-grid-slide-margin	96px	حاشیهٔ چپ و راست؛ ناحیهٔ محتوا ۱۷۲۸ پیکسل.
--hq-grid-slide-content-top	264px	شروع محتوا زیر ناحیهٔ عنوان.

ترکیب‌های استاندارد ستون‌ها: ۱۲ · ۸|۴ · ۶|۶ · ۴|۸ · ۴|۴|۴ · ۳|۳|۳|۳ · ۶|۳|۳ · ۵|۷.

گرید وب

نقطه‌های شکست از IBM Carbon گرفته شده‌اند، چون پالت و آیکن‌های هارمونیک هم از خانوادهٔ IBM هستند. تعداد ستون‌ها در دسکتاپ ۱۲ است، نه ۱۶ستونی Carbon، تا ترکیب‌های ستونی وب و اسلاید یکی باشند: چیدمان ۸|۴ در اسلاید همان ۸|۴ در وب است. همهٔ فاصله‌ها و حاشیه‌ها از مقیاس فاصله‌ها می‌آیند و مقدار تازه‌ای اضافه نمی‌کنند.

اندازه	کاربرد	ستون‌ها
sm	موبایل	۴
md	تبلت	۸
lg	دسکتاپ	۱۲
xl	دسکتاپ بزرگ	۱۲، با فاصله‌های بزرگ‌تر

توکن	مقدار	کاربرد
--hq-grid-web-sm-breakpoint	0px	موبایل: از صفر.
--hq-grid-web-sm-columns	4	۴ ستون.
--hq-grid-web-sm-gutter	16px	فاصلهٔ ستون‌ها در موبایل.
--hq-grid-web-sm-margin	16px	حاشیهٔ صفحه در موبایل.
--hq-grid-web-md-breakpoint	672px	تبلت: از ۶۷۲ پیکسل.
--hq-grid-web-md-columns	8	۸ ستون.
--hq-grid-web-md-gutter	24px	فاصلهٔ ستون‌ها در تبلت.
--hq-grid-web-md-margin	32px	حاشیهٔ صفحه در تبلت.
--hq-grid-web-lg-breakpoint	1056px	دسکتاپ: از ۱۰۵۶ پیکسل.
--hq-grid-web-lg-columns	12	۱۲ ستون، هم‌خوان با گرید اسلاید.
--hq-grid-web-lg-gutter	32px	فاصلهٔ ستون‌ها در دسکتاپ.
--hq-grid-web-lg-margin	48px	حاشیهٔ صفحه در دسکتاپ.
--hq-grid-web-xl-breakpoint	1312px	دسکتاپ بزرگ: از ۱۳۱۲ پیکسل.
--hq-grid-web-xl-columns	12	۱۲ ستون.
--hq-grid-web-xl-gutter	48px	فاصلهٔ ستون‌ها در دسکتاپ بزرگ؛ همان فاصلهٔ ستون اسلاید.
--hq-grid-web-xl-margin	64px	حاشیهٔ صفحه در دسکتاپ بزرگ.
--hq-grid-web-max-width	1584px	بیشینهٔ پهنای ظرف صفحه، با حاشیه‌ها. بالاتر از این، محتوا وسط صفحه می‌ماند.

ستون‌ها

اندازهٔ پنجره را تغییر دهید تا تعداد ستون‌ها عوض شود. در موبایل، ۱۲ خانه در سه ردیف ۴تایی می‌شکنند.

hq-demo-cell فقط برای نمایش خانه‌ها در این صفحه است و جزو کامپوننت‌ها نیست.

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

<div class="hq-grid">
  <div class="hq-col-1 hq-demo-cell">۱</div>
  <div class="hq-col-1 hq-demo-cell">۲</div>
  <div class="hq-col-1 hq-demo-cell">۳</div>
  <div class="hq-col-1 hq-demo-cell">۴</div>
  <div class="hq-col-1 hq-demo-cell">۵</div>
  <div class="hq-col-1 hq-demo-cell">۶</div>
  <div class="hq-col-1 hq-demo-cell">۷</div>
  <div class="hq-col-1 hq-demo-cell">۸</div>
  <div class="hq-col-1 hq-demo-cell">۹</div>
  <div class="hq-col-1 hq-demo-cell">۱۰</div>
  <div class="hq-col-1 hq-demo-cell">۱۱</div>
  <div class="hq-col-1 hq-demo-cell">۱۲</div>
</div>

چیدمان پاسخ‌گو

هر فرزند گرید به‌صورت پیش‌فرض تمام عرض را می‌گیرد. کلاس hq-col-N تعداد ستون را از موبایل به بالا تعیین می‌کند، و hq-col-md-N، hq-col-lg-N و hq-col-xl-N از همان اندازه به بالا. این نمونه در موبایل دو ردیف تمام‌عرض است، در تبلت ۴|۴ و در دسکتاپ ۸|۴.

محتوای اصلی

ستون کناری

<div class="hq-grid">
  <div class="hq-col-md-4 hq-col-lg-8 hq-demo-cell">محتوای اصلی</div>
  <div class="hq-col-md-4 hq-col-lg-4 hq-demo-cell">ستون کناری</div>
</div>

ظرف صفحه

hq-container حاشیه‌های هر اندازه را اعمال می‌کند و پهنای صفحه را به grid-web-max-width (همان بیشینهٔ Carbon) محدود می‌کند؛ در صفحه‌های پهن‌تر، محتوا وسط می‌ماند.

<main class="hq-container">
  <div class="hq-grid">
    <article class="hq-col-md-6 hq-col-lg-8">…</article>
    <aside class="hq-col-md-2 hq-col-lg-4">…</aside>
  </div>
</main>