Responsive and fluid

Pico Reforged uses five breakpoints, written as plain media queries with range syntax ((width >= 768px)). There are no Sass mixins to include.

Sizes are in rem, so the whole interface follows --pico-font-size. The root stays at 100% up to 1535px and takes one step to 106.25% on very wide screens. For a fixed root size at every width, build with --no-responsive-typography.

Responsive spacings#

By default the vertical spacing of landmarks, section and article is a constant --pico-block-spacing-vertical. The responsive spacings option makes it grow with the viewport, from 1.25 times --pico-spacing at 576px to 2.25 times at 1536px. For article the horizontal spacing grows the same way.

npx pico-reforged build --responsive-spacings --minify --out pico.css

The option is responsiveSpacings in a config file and in the Vite and PostCSS integrations.

Fluid build#

The fluid build sets --pico-container-max-width: 100% after the breakpoint values, so .container and the semantic container are full width at every size. When the semantic container is on, the side padding is kept.

The CDN file is pico.fluid.classless.min.css, the same name as in Pico CSS v2.1.1:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.fluid.classless.min.css" />

To build your own:

npx pico-reforged build --entry classless --fluid --minify --out pico.fluid.css

The live examples on this site use the regular classless build, so they do not show the fluid width. Load pico.fluid.classless.min.css in a page to see it.

Your own queries#

Media queries cannot read CSS variables, so repeat the pixel values in your own queries:

@media (width >= 768px) {
  .sidebar {
    display: block;
  }
}

See also Grid and Container.