⚙️ Preferences

On this page, you can set your important preferences such as adding your own class/variable prefixes, option to output REM units, set your min and max screen widths, root font size, plus more.

Project Preferences

Project Title

Give your project a title to easily identify it. This title will also be used as the file name when exporting your preset.

Root font size

You can choose between 100% and 62.5% for the root font size. Values in fluid calculators (spacing and typography) will get automatically recalculated.

Min screen width

Screen width for the minimum size in fluid calculators (spacing and typography).

Max screen width

Screen width for the maximum size in fluid calculators (spacing and typography).

If using a website builder, we recommend setting the max screen width the same as you have it set in your builder.

Class prefix

Add a custom prefix in front of all Core Framework classes, to avoid conflicts with existing classes with the same generic name.

If you decide to add class prefixes, we recommend setting this before building your website. If you have added classes to your elements and then decide to use class prefixes later, then you will need to re-add the classes to your elements!

Variable prefix

Add a custom prefix before every Core Framework variable (colors, spaces, and sizes), to avoid conflicts with existing variables with the same generic name.

If you decide to add variable prefixes, we recommend setting this before building your website. If you have added variables to your elements and then decide to use variable prefixes later, then you will need to re-add the variables to your elements and classes!

Enable PostCSS

Use PostCSS to process the outputted CSS to automatically include vendor prefixes and fallbacks to ensure cross-browser compatibility.

With PostCSS, you can write your CSS rules without vendor prefixes (in fact, forget about them entirely!)

For example, this CSS:

::placeholder {
  color: gray;
}

Automatically becomes:

::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

Output REM

Pixel values in typography and spacing will get automatically recalculated and outputted in REM.

Respect prefers-reduced-motion

If enabled, all animations will be disabled when the user has enabled the 'Reduce motion' option in their OS settings.

Plugin Preferences

Theme

Choose between light and dark theme.

Please note that this is only for the appearance of Core Framework and not the website itself.

Uninstall

Remove all data on uninstall, including core framework classes and colors from builders (can't be undone).

Reset to default

This option will reset the entire framework and preferences to the default settings. Please be advised that this option cannot be reversed!