|
|
|
|
|
|
|
Carbon components have motion built in for microinteractions. However, the motion design of the overarching UI — that is, how the components interact with each other and enter and exit the page…
|
|
Application of the color palette brings a unified and recognizable consistency to IBM's array of digital products and interfaces. This consistency is grounded in a set of well-defined rules…
|
|
Use this set of standard breakpoints to maintain layout integrity across screen sizes. For best results, test designs and code at each of these standard breakpoints. Create custom breakpoints to…
|
|
A grid can be formed with fixed boxes by arranging tiles in an inline block, icons in toolbars, etc. Column count grows with browser width. Tiles wrap to the next line, or are sometimes truncated…
|
|
Fluid column structures are ideal for editorial content, dashboards, images, video, data visualizations, etc. In each case, scaling the size of things is more useful to the user than scaling the…
|
|
Hybrid boxes have different scaling rules in each dimension, so they do not use aspect ratios. When a user would resize the browser expecting content to scale in one dimension but not the other, use…
|
|
After determining your base size, multiply it as needed for each use. For box sizing, apply an aspect ratio too.
|
|
Use the fixed sizing scale to set vertical spacing between sections, by adding it to the top or bottom margin of a box.
|
|
Components can be sized like other boxes: either fixed or fluid, and often hybrid, with fixed height and fluid width. When interior space within a component is cramped, use the minor sizing scale. …
|
|
The basic unit of 2x Grid geometry is the 8-pixel square mini unit. Multiples of mini units compose the dimensions of columns, rows, boxes, along with their margins and padding. The mini unit adapts…
|
|
The flexible panels allow for both collapsed and expanded states. The expanded state of a flexible Panel is a fixed width that cannot be adjusted by the user. The collapsed Flexible Panel expands…
|
|
This panel style floats above the primary content area and does not affect the responsive grid. Floating panels conceal any UI elements below them and must be dismissible by the user. Inline menus,…
|
|
Fixed panels maintain a static width, cannot be collapsed, and also exist outside of the responsive grid.
|