<button type="button" id="popover_button" class="btn" popovertarget="popover">
Open popover
</button>
<div popover id="popover" class="popover" role="dialog">
<= render "dimensions form" %>
</div>
• popover {
background-color: var(--color-surface);
border-radius: var(--rounded-md); border-width: var(--border);
box-shadow: var(--shadow-md);
color: var(--color-text);
inline-size: var(--popover-size, max-content);
/* Anchor position */
position-area: block-end;
position-try-fallbacks: flip-block;
margin-block-start: var(--size-1);
/* Setup transition */
transition-duration: var(--time-150);
transition-property: display, opacity, overlay, transform;
/* Exit stage to */
opacity: 0; transform: var(--scale-95);
/* On stage */
&: popover-open {
opacity: 1; transform: var(--scale-100);
}
/* Enter stage from */
@starting-style {
&: popover-open {
opacity: 0; transform: var(--scale-95);
}
}
}
Use svh to stop the mobile address bar from hiding your UI. It guarantees a perfect fit within the visible screen.
.hero {
height: 100svh;
}
You can create org charts and tournament brackets using pure CSS — no JavaScript required.
Use nested <ul> lists with flexbox and ::before/::after pseudo-elements to draw connecting lines:
.org-chart ul {
display: flex;
justify-content: center;
padding-top: 20px;
position: relative;
}
.org-chart li {
list-style: none;
text-align: center;
position: relative;
padding: 20px 5px 0;
}
.org-chart li::before,
.org-chart li::after {
content: '';
position: absolute;
top: 0;
border-top: 2px solid #ccc;
width: 50%;
}
.org-chart li::before { right: 50%; }
.org-chart li::after { left: 50%; }
Use CSS Grid or flexbox with border tricks to create bracket lines connecting matchups.
tabular-nums should be the default for any number that updates — timers, counters, prices, percentages, scores, live data, etc. It uses fixed-width digits so numbers don't jump around as they change.
Enable the tnum OpenType feature with font-variant-numeric:
.tabular-nums {
font-variant-numeric: tabular-nums;
}