فواصل و اندازه‌ها

فاصله

فاصله نشان می‌دهد چه چیزهایی با هم‌اند و صفحه را بی‌آنکه خط و قابی لازم باشد مرتب می‌کند. هر فاصله در پیوند از خانه‌های ۴ پیکسلی ساخته می‌شود و نام هر پله می‌گوید چند خانه دارد: space-6 یعنی ۶ خانه و ۲۴ پیکسل.

مقیاس

مقیاس ۱۴ پله دارد، از نیم‌خانه تا ۳۲ خانه. اگر عددی لازم دارید که در مقیاس نیست، به ما بگویید تا پله درستش را با هم پیدا کنیم یا مقیاس را کامل کنیم. روی هر پله بزنید تا توکنش را زیر مقیاس ببینید و از همان‌جا کپی کنید.

نقش‌ها

هر فاصله را از روی کارش انتخاب کنید. پدینگ فاصله لبه کامپوننت تا محتوای آن است، گپ عمودی فاصله چیزهایی که زیر هم‌اند و گپ افقی فاصله چیزهایی که در یک ردیف کنار هم‌اند. فاصله بخش‌ها از همه بزرگ‌تر است و بخش‌های صفحه را از هم جدا می‌کند. فاصله‌های این کارت را مرورگر شما همین حالا اندازه گرفته است.

اندازه‌ها

کنترل‌ها، آیکون‌ها، آواتارها و ریل‌ها هم اندازه‌شان را از توکن می‌گیرند. ارتفاع هر کنترل به پله اندازه‌اش بستگی دارد و با متن یا پدینگ تغییر نمی‌کند. برای همین دکمه متوسط با یک کلمه یا سه کلمه همان ارتفاع را دارد.

ارتفاع کنترل‌ها

ارتفاع کنترل‌ها پنج پله دارد و ۳۶ پیش‌فرض است. روی صفحه لمسی، خود کامپوننت اندازه متوسط را ۴۴ و بزرگ را ۴۸ می‌کند. کوچک و خیلی کوچک روی صفحه لمسی بزرگ‌تر نمی‌شوند، پس فقط جایی به کار می‌روند که کاربر با ماوس کار می‌کند، مثل جدول‌ها و نوار ابزار پنل.

آیکون، آواتار و ریل

آیکون‌ها روی گرید ۲۴ پیکسلی Solar طراحی شده‌اند. آیکون درون کنترل‌ها ۱۶ است و در اندازه بزرگ ۲۰. ریل سنجه و نوار پیشرفت ۴، ۶ یا ۸ پیکسل ضخامت دارد و در میان توکن‌های اندازه، ۶ تنها عددی است که مضرب ۴ نیست.

پنجره، گرید و کانتینر

پیوند پنجره مرورگر را از روی پهنایش در یکی از پنج کلاس اندازه می‌گذارد و هر کلاس تعداد ستون، گاتر و گپ گرید خودش را دارد. محتوای صفحه داخل کانتینری می‌نشیند که پهنایش سقف دارد. خط‌کش را بکشید تا ببینید صفحه در هر پهنا چطور چیده می‌شود.

توکن‌ها

هر تصمیم این صفحه در کد یک توکن نقش است و کامپوننت‌ها فقط با همین نام‌ها ساخته می‌شوند.

فاصله

پله‌های فاصله بر پایه ۴ پیکسل، برای فاصله داخل هر جزء و فاصله بین اجزا.

• space.0--pv-sys-space-00px
• space.1--pv-sys-space-10.25rem
• space.2--pv-sys-space-20.5rem
• space.3--pv-sys-space-30.75rem
• space.4--pv-sys-space-41rem
• space.5--pv-sys-space-51.25rem
• space.6--pv-sys-space-61.5rem
• space.8--pv-sys-space-82rem
• space.10--pv-sys-space-102.5rem
• space.12--pv-sys-space-123rem
• space.16--pv-sys-space-164rem
• space.20--pv-sys-space-205rem
• space.24--pv-sys-space-246rem
• space.32--pv-sys-space-328rem
• space.inset.xs--pv-sys-space-inset-xs0.5rem
• space.inset.sm--pv-sys-space-inset-sm0.75rem
• space.inset.md--pv-sys-space-inset-md1rem
• space.inset.lg--pv-sys-space-inset-lg1.5rem
• space.inset.xl--pv-sys-space-inset-xl2rem
• space.stack.xs--pv-sys-space-stack-xs0.25rem
• space.stack.sm--pv-sys-space-stack-sm0.5rem
• space.stack.md--pv-sys-space-stack-md1rem
• space.stack.lg--pv-sys-space-stack-lg1.5rem
• space.stack.xl--pv-sys-space-stack-xl2.5rem
• space.inline.xs--pv-sys-space-inline-xs0.25rem
• space.inline.sm--pv-sys-space-inline-sm0.5rem
• space.inline.md--pv-sys-space-inline-md0.75rem
• space.inline.lg--pv-sys-space-inline-lg1rem
• space.inline.xl--pv-sys-space-inline-xl1.5rem
• space.section.sm--pv-sys-space-section-sm3rem
• space.section.md--pv-sys-space-section-md4rem
• space.section.lg--pv-sys-space-section-lg6rem
• space.half--pv-sys-space-half0.125rem

اندازه

ارتفاع کنترل‌ها، اندازه آیکون‌ها، کوچک‌ترین سطح لمس و اندازه‌هایی که چند جزء با هم شریک‌اند.

• size.control.xs--pv-sys-size-control-xs1.75rem
• size.control.sm--pv-sys-size-control-sm2rem
• size.control.md--pv-sys-size-control-md2.25rem
• size.control.lg--pv-sys-size-control-lg2.75rem
• size.control.xl--pv-sys-size-control-xl3rem
• size.field--pv-sys-size-field2.25rem
• size.icon.in-control-xs--pv-sys-size-icon-in-control-xs1rem
• size.icon.in-control-sm--pv-sys-size-icon-in-control-sm1rem
• size.icon.in-control-md--pv-sys-size-icon-in-control-md1rem
• size.icon.in-control-lg--pv-sys-size-icon-in-control-lg1.25rem
• size.icon.in-control-xl--pv-sys-size-icon-in-control-xl1.5rem
• size.target.min--pv-sys-size-target-min1.5rem
• size.target.touch--pv-sys-size-target-touch3rem
• size.track.sm--pv-sys-size-track-sm0.25rem
• size.track.md--pv-sys-size-track-md0.375rem
• size.track.lg--pv-sys-size-track-lg0.5rem
• size.thumbnail--pv-sys-size-thumbnail3.25rem
• size.avatar.sm--pv-sys-size-avatar-sm2rem
• size.avatar.md--pv-sys-size-avatar-md2.5rem
• size.avatar.lg--pv-sys-size-avatar-lg3.5rem
• size.logo.sm--pv-sys-size-logo-sm1.5rem
• size.logo.md--pv-sys-size-logo-md2rem
• size.logo.lg--pv-sys-size-logo-lg3rem
• size.window.small--pv-sys-size-window-small25rem
• size.window.medium--pv-sys-size-window-medium30rem
• size.window.large--pv-sys-size-window-large40rem
• size.window.xlarge--pv-sys-size-window-xlarge47.5rem
• icon.size.16--pv-sys-icon-size-161rem
• icon.size.20--pv-sys-icon-size-201.25rem
• icon.size.24--pv-sys-icon-size-241.5rem
• icon.size.32--pv-sys-icon-size-322rem
• icon.stroke--pv-sys-icon-stroke1.5px

چیدمان صفحه

پهنای ظرف صفحه، فاصله لبه‌ها، ستون‌ها و نقطه‌های شکست.

• layout.container.narrow--pv-sys-layout-container-narrow30rem
• layout.container.prose--pv-sys-layout-container-prose40rem
• layout.container.default--pv-sys-layout-container-default64rem
• layout.container.wide--pv-sys-layout-container-wide80rem
• layout.container.max--pv-sys-layout-container-max90rem
• layout.gutter.compact--pv-sys-layout-gutter-compact1rem
• layout.gutter.medium--pv-sys-layout-gutter-medium1.5rem
• layout.gutter.expanded--pv-sys-layout-gutter-expanded2rem
• layout.gutter.large--pv-sys-layout-gutter-large2rem
• layout.columns.compact--pv-sys-layout-columns-compact4
• layout.columns.medium--pv-sys-layout-columns-medium8
• layout.columns.expanded--pv-sys-layout-columns-expanded12
• layout.grid-gap.compact--pv-sys-layout-grid-gap-compact1rem
• layout.grid-gap.medium--pv-sys-layout-grid-gap-medium1.5rem
• layout.grid-gap.expanded--pv-sys-layout-grid-gap-expanded1.5rem
• breakpoint.compact--pv-sys-breakpoint-compact0px
• breakpoint.medium--pv-sys-breakpoint-medium600px
• breakpoint.expanded--pv-sys-breakpoint-expanded840px
• breakpoint.large--pv-sys-breakpoint-large1200px
• breakpoint.extra-large--pv-sys-breakpoint-extra-large1600px