Dashboards are complex. You need a sidebar, a top bar, a main content area, and charts. Traditionally, this involves a lot of CSS grid and flexbox boilerplate. With AtomAttr, you can define your layout directly in the HTML structure.
The Structure
We use a simple `flex h-screen` wrapper for the entire app. Inside, we have a sidebar with `w="16rem" hidden md-block` to show it only on desktop, and a main content area with `flex-1 overflow-y-auto`.
Responsive Grids
For the data cards, we use `grid grid-cols-1 md-grid-cols-2 lg-grid-cols-4 gap="4"`. This single line handles the responsive behavior across three different breakpoints without writing a single media query.