picocss/scss/_settings.scss

@use "sass:map";

// Config
// ––––––––––––––––––––

// Prefix for CSS variables
$css-var-prefix: "pico-" !default;

// Set the root element for $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;

// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;

// Enable .container and .container-fluid
$enable-class-container: true !default;

// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
// Fluid layout if disabled
$enable-viewport: true !default;

// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;

// Enable responsive typography
// Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default;

// Enable .classes
// .classless version if disabled
$enable-classes: true !default;

// Enable .grid class
$enable-grid: true !default;

// Enable transitions
$enable-transitions: true !default;

// Enable overriding with !important
$enable-important: true !default;

// Breakpoints, viewports and root font size
$breakpoints: () !default;
$breakpoints: map.deep-merge(
  (
    // Small (landscape phones)  
    sm: (
      breakpoint: 576px,
      viewport: 510px,
      root-font-size: 17px,
    ),
    // Medium (tablets)
    md: (
      breakpoint: 768px,
      viewport: 700px,
      root-font-size: 18px,
    ),
    // Large (desktops)
    lg: (
      breakpoint: 992px,
      viewport: 920px,
      root-font-size: 19px,
    ),
    // Extra large (large desktops)
    xl: (
      breakpoint: 1200px,
      viewport: 1130px,
      root-font-size: 20px,
    ),
  ),
  $breakpoints
);

// // Shortcut for CSS vars prefix
$✨: --#{$css-var-prefix};