Forms

Coming sooon...

Responsive Design

Responsive design is an important feature of modern web applications. AIS Components includes breakpoints from sm to 2xl that allow developers to customize their applications for a wide range of screen sizes. The breakpoints follow Tailwind's default configuration. The one exception being md, which has been modified to 855px to match an important UIDS breakpoint.

Although our users primarily interact with our applications on large screens, it is not true of all our products, and it is not uncommon for our users to need to refer to our data on mobile devices. Please review the Tailwind CSS docs for details on how to use its utilities for responsive design.

Breakpoints

• sm - 640px
• md - 855px
• lg - 1024px
• xl - 1280px
• 2xl - 1536px

Recommendations

• Start with a mobile-first design that will work on small screens. This typically means starting with a single column that can grow vertically.
• Desktop designs should start at the md breakpoint. The sm breakpoint should be reserved for tweaking details for the smallest screens.
• Use xl as the starting point for "large" screens. This leaves lg and 2xl for attending to special needs.

Layering

Every z-index in the library comes from a small semantic scale defined in tailwind.config.js under theme.extend.zIndex. Use these tokens instead of numeric z-* classes so components layer predictably against each other and against your application chrome.

Token	Value	Used for
z-control	10	Buttons, inputs, tabs, and other controls at rest
z-raised	20	A focused control, an element layered over a control (such as a clear icon), sticky table footers
z-sticky	30	Sticky table headers, the sticky editor toolbar
z-chrome	40	Fixed AisHeader, a standalone AisNavBar
z-popover	50	Menus, dropdowns, tooltips, popovers, datepickers, combobox menus, the mobile menu
z-modal	150	AisModal and its backdrop
z-toast	200	AisToast. Always above modals

Rules of thumb

• Keep your own elements at or below z-chrome. Library menus, tooltips, and popovers open at z-popover, so anything you place above 40 will cover them. A fixed application header belongs at z-chrome or lower (see the next point about ties).
• Two elements on the same layer are ordered by their position in the page: the later one paints on top. A fixed AisHeader sits at z-chrome, so app chrome at z-chrome placed after the header in the page will cover the header's menus. Put such chrome below z-chrome, or before the header.
• The gap between z-popover and z-modal is reserved. It gives an application room for an overlay that must sit above library menus but below modals, such as a slide-out drawer. Use it deliberately, not as a default.
• Only z-toast sits above modals. Anything that must stay visible while a modal is open belongs there. Note that clicking such an element also counts as a click outside the modal and will close a dismissible one.
• Popovers render in place, not teleported to body, so a popover inside a positioned ancestor with its own z-index is capped at that ancestor's layer. Controls lift themselves to z-raised while focused so their menus paint above neighbouring controls.
• A container whose popovers render in place must not tie with a later sibling on the same layer, or the sibling will cover its popovers. Either order the two locally (a sticky table footer sits at z-raised, below the z-sticky header and its column filters) or keep the container from becoming a stacking context at all.
• Inside AisHeader, the brand bar and navbar are not stacking contexts, so the user menu and navbar menus open at z-popover against the whole page (or inside the header's z-chrome layer when it is fixed). Anything placed in the bars through slots should stay below z-popover so those menus can cover it.
• Avoid negative z-index. Where a decorative element must sit behind its siblings, give the parent isolate so the negative value stays inside that component.