Sizing

To keep in mind

• We use 3 primary Sizing options for most components: "Small", "Medium", "Large".
  • In code, sm, md, lg.
  • Some components only need 2 sizes, e.g. “Small” and “Medium”.
  • If a component has only one size, we refer to it by its name or “default”.
• For additional sizing options, if absolutely necessary, you can use these 7 options: "Extra Extra Small", "Extra Small", "Small", "Medium", "Large", "Extra Large", and "Extra Extra Large".
  • In code, xxs, xs, sm, md, lg, xl, and xxl.
• A component sizing option doesn’t mean it is necessarily fixed width or fluid width.
• In some cases, we don’t specify a “size” but rather a minimum and maximum width and let the content determine what exact width is appropriate. For example, our modals have min and max widths instead of sizes.
• For some components, the page, context, and content will likely dictate where breakpoints make sense. For example, a data table would vary depending on what data is present.

When to use

• When the component has a particular layout at a particular size.
• Use this component sizing with fixed width or fluid width components.
• Let containers decide the exact size.

When not to use

• For describing specific content such as body, heading, image, use those words instead of sizes (that is, don’t use “tall” to describe a heading when you could use “heading” or “square” to describe an image when you could use “image”)

External links

Here are some examples of other design systems:

• Salesforce's Lightning Design System: sizing utilities.
• Salesforce's Lightning Design System: sizing tokens.
• Semantic-ui.
• Atlassian's Design System: logos.
• Redbubble: button.
• Yelp: layout.
• USPTO: icons.
• Wal-Mart: layout.
• Microsoft: layout.
• Microsoft: spacing.
• Bootstrap: buttons.
• Bootstrap: sizing.
• Elements: tag.
• Elements: checkbox.
• Code for America: bookmark icons.
• Ionic: menu.
• Thumbprint: button.