Layout
Grid, containers, regions, and breakpoints.
Grid
Xenon uses a fluid 12-column grid. Column count is fixed per breakpoint; column width scales with the container.
12 columns at lg+ (64rem)
1
2
3
4
5
6
7
8
9
10
11
12
base
4 1rem gutter · — min
md
8 1rem gutter · 48rem min
lg
12 1rem gutter · 64rem min
Grid classes
xnn-grid
xnn-grid Fluid column grid; count follows breakpoint.
xnn-grid--flush
xnn-grid--flush No column gap; borders separate cells.
xnn-col-span-full
xnn-col-span-full Span all columns at every breakpoint.
lg:xnn-col-span-{n}
lg:xnn-col-span-{n} Span n columns from lg (n = 1–12).
lg:xnn-col-start-{n}
lg:xnn-col-start-{n} Start at column n from lg (n = 1–12).
Page recipes
ATSocy pages declare column spans instead of fixed rail widths.
Home at lg+
3
6
3
Article at lg+
2
8
2
Home
lg:xnn-col-span-3 · lg:xnn-col-span-6 · lg:xnn-col-span-3 3 · 6 · 3
Article
lg:xnn-col-span-2 · lg:xnn-col-span-8 · lg:xnn-col-span-2 2 · 8 · 2
Participate
lg:xnn-col-span-8 lg:xnn-col-start-3 8 centered
Pulse
xnn-col-span-full 12
Regions
Header
Sidebar
Main
Footer
Header
— Brand, navigation, search.
Sidebar
— Secondary navigation.
Main
— Primary content.
Panel
— Grouped content within a region.
Footer
— Secondary links, identity.
Containers
max-w-reading
max-w-reading 48rem
max-w-wide
max-w-wide 64rem
max-w-page
max-w-page 96rem
max-w-editorial
max-w-editorial 47.5rem
Breakpoints
sm
sm 40rem
md
md 48rem
lg
lg 64rem
xl
xl 80rem
2xl
2xl 96rem