To get the most out of Pico, we recommend compiling your own version with SASS. This way, you can include only the required modules and personalize the settings without overriding CSS styles.
Avoid modifying Pico’s core files whenever possible. This approach allows you to keep Pico up to date without conflicts since the Pico code and your custom code are separated.
Import#
You can import Pico into your SCSS file with @use:
If you are using Sass Command-Line Interface to compile your .scss files, you can define the load path using sass --load-path=node_modules/@picocss/pico/scss/ to avoid using relative URLs like:
If you are using React, or Webpack with sass-loader, the default configuration will automatically resolve the path to node_modules so you can simply import Pico with:
Settings#
You can set custom settings with @use "pico" with ( ... );. These custom values will override the default variables.
Here is an example to generate the classless version:
// Pico classless version
@use "pico" with (
$enable-semantic-container: true,
$enable-classes: false
);
Example to generate a lightweight version without .classes, uncommon form elements, and components.
This version reduces the weight of Pico by ~50%.
// Pico lightweight version
@use "pico" with (
$enable-semantic-container: true,
$enable-classes: false,
$modules: (
"content/code": false,
"forms/input-color": false,
"forms/input-date": false,
"forms/input-file": false,
"forms/input-range": false,
"forms/input-search": false,
"components/accordion": false,
"components/card": false,
"components/dropdown": false,
"components/loading": false,
"components/modal": false,
"components/nav": false,
"components/progress": false,
"components/tooltip": false,
"utilities/accessibility": false,
"utilities/reduce-motion": false
)
);
All default settings
// Theme color
$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
// Define the root element used to target <header>, <main>, <footer>
// with $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 a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings by default
$enable-responsive-spacings: false !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 transitions
$enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Optional parent selector
// If defined, all HTML tags are wrapped with this selector
// :root is not wrapped
$parent-selector: "" !default;
// Breakpoints, viewports and root font size
$breakpoints: () !default;
$breakpoints: map.deep-merge(
(
// Small (landscape phones)
// Font size: 17px
sm:
(
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
),
// Medium (tablets)
// Font size: 18px
md:
(
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
),
// Large
// Font size: 19px
lg:
(
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
),
// Extra large
// Font size: 20px
xl:
(
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
),
// Extra extra large
// Font size: 21px
xxl:
(
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
)
),
$breakpoints
);
// Modules to export
$modules: () !default;
$modules: map.merge(
(
// Theme
"themes/default": true,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/overflow-auto": true,
// Content
"content/link": true,
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": true,
"content/code": true,
"content/figure": true,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": true,
"forms/input-date": true,
"forms/input-file": true,
"forms/input-range": true,
"forms/input-search": true,
// Components
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/group": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true
),
$modules
);
Theme color#
Pico comes with a default "azure" theme.
You can easily recompile Pico using a different primary color from a selection of 20 colors.
Possible color choices: amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc.
Custom theme#
To create a custom version of Pico with a fully custom theme that reflects your brand identity, you can:
- Exclude the default theme from compilation,
- Import your custom theme (you can duplicate Pico’s default theme as a starting point and customize it to match your brand’s style).