Search for tag: "carbon design system"

45 Media

Updated checkout modal duration 11 seconds Updated checkout modal Updated checkout modal	Updated checkout modal updated checkout modal carbon design system en-us english (u.s.) From 310000JV3M 310000JV3M
Grid Introduction duration 8 minutes 12 seconds Grid Introduction Grid Introduction	Grid Introduction grid introduction carbon design system en-us english (u.s.) From 310000JV3M 310000JV3M
2x grid: overview duration 50 seconds 2x grid: overview 2x grid: overview	2x grid: overview 2x grid overview carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
Motion: overview duration 55 seconds Motion: overview Motion: overview	Motion: overview 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
Color: overview duration 57 seconds Color: overview Color: overview	Color: overview 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: breakpoints duration 11 seconds 2x grid: breakpoints 2x grid: breakpoints	2x grid: breakpoints 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: fixed boxes duration 10 seconds 2x grid: fixed boxes 2x grid: fixed boxes	2x grid: fixed boxes 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: fluid columns duration 11 seconds 2x grid: fluid columns 2x grid: fluid columns	2x grid: fluid columns 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: hybrid boxes duration 10 seconds 2x grid: hybrid boxes 2x grid: hybrid boxes	2x grid: hybrid boxes 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: sizing scale - scaling multiple duration 18 seconds 2x grid: sizing scale - scaling multiple 2x grid: sizing scale - scaling multiple	2x grid: sizing scale - scaling multiple After determining your base size, multiply it as needed for each use. For box sizing, apply an aspect ratio too. carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: sizing scale - vertical rhythm duration 15 seconds 2x grid: sizing scale - vertical rhythm 2x grid: sizing scale - vertical rhythm	2x grid: sizing scale - vertical rhythm Use the fixed sizing scale to set vertical spacing between sections, by adding it to the top or bottom margin of a box. carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: sizing scale - components duration 9 seconds 2x grid: sizing scale - components 2x grid: sizing scale - components	2x grid: sizing scale - components 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. … carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: mini unit duration 14 seconds 2x grid: mini unit 2x grid: mini unit	2x grid: mini unit 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: grid influencers - flexible panels duration 5 seconds 2x grid: grid influencers - flexible panels 2x grid: grid influencers - flexible panels	2x grid: grid influencers - flexible panels 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… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: grid influencers - floating panels duration 7 seconds 2x grid: grid influencers - floating panels 2x grid: grid influencers - floating panels	2x grid: grid influencers - floating panels 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,… carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW
2x grid: grid influencers - fixed panels duration 9 seconds 2x grid: grid influencers - fixed panels 2x grid: grid influencers - fixed panels	2x grid: grid influencers - fixed panels Fixed panels maintain a static width, cannot be collapsed, and also exist outside of the responsive grid. carbon design system en-us english (u.s.) From 550003PPHW 550003PPHW