Spacingjsp
Two spacing scales – component and layout – plus control and icon sizes, page gutters, container widths and seven breakpoints. Layout spacing and control sizes step up at the breakpoints on their own.
Foundation- Source
- tokens/semantic/spacing.json · size.json · layout.json
- Base
- A 4-pixel grid
- Two scales
*-component-* inside a component; *-layout-* between blocks and sections.
- Responsive
Tokens marked with steps grow at the breakpoints – no breakpoint prefixes in page code.
- Sizes
h-control-* for controls, size-icon-* for icons, max-w-site-* for columns.
Component spacing
Padding and gaps inside a component: p-component-md, gap-component-sm. Fixed at every width.
Layout spacing
Gaps between blocks and sections: gap-layout-md, py-layout-lg. Section's padding prop uses these. Resize the window to see Now change.
Control sizes
Heights shared by buttons and inputs, so controls of a size line up. shadcn's components keep their own sizes (ISS-03); the JSP tier and page code use h-control-*.
shadcn controls, as installed
Horizontal padding inside controls
Icon sizes
size-icon-xs … xl. shadcn draws icons at icon.sm inside its controls.
Breakpoints
Seven, smallest first. Prefixes are xs: sm: md: lg: xl: xxl: – there is no 2xl:. Use them for layout changes only.
- xxs:0px0px – 399px · smallest phones and up.
- xs:400px400px – 559px · large phones.
- sm:560px560px – 767px · phones in landscape, small tablets.
- md:768px768px – 999px · tablets in portrait.
- lg:1000px1000px – 1439px · tablets in landscape, small laptops.
- xl:1440px1440px – 1799px · laptops and desktops.
- xxl:1800px1800px and up · wide desktops.
Containers
Maximum widths for a column: max-w-site-xs … xxl, prose for reading and form for forms. Container's width prop uses them.
Gutters
Page side padding: px-gutter-sm … lg, or Container's gutter prop.