# Preferences

## Video Overview

{% embed url="<https://www.youtube.com/watch?v=e4WOSHZlTzI>" %}

## Project Settings

### 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.

### Default Theme

Select the default theme for your project. Use .cf-theme-dark on the element for manual dark mode. Auto will use system preferences.

{% hint style="info" %}
If you are not seeing the selected theme being applied, please make sure to view the website from incognito, because sometimes a cookie is stored when logged in from when using the theme toggle.
{% endhint %}

## Font and Spacing

### 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).

{% hint style="info" %}
If using a website builder, we recommend setting the max screen width the same as you have it set in your builder.
{% endhint %}

## CSS Processing

### Enable PostCSS

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

{% hint style="success" %}
With PostCSS, you can write your CSS rules without vendor prefixes (in fact, forget about them entirely!)
{% endhint %}

For example, this CSS:

```css
::placeholder {
  color: gray;
}
```

Automatically becomes:

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

### Output REM Units

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

### Smooth Linear Gradients

Generates more iterations on the value to create smoother linear gradients for enhanced visual appeal.

## Prefixes and Customization

### Class Prefix

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

{% hint style="danger" %}
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!
{% endhint %}

### 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.

{% hint style="danger" %}
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!
{% endhint %}

## Accessibility and Usability

### Disable Hover on Touch Devices

Disable hover styles on touch devices for improved user experience.

### Respect Reduced Motion

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

### Enable Clickable Parent

Enable a clickable parent class to use on your links. This is useful for adding to card titles, which will expand the clickable area and improve accessibility. By default, this class name is `.expand-click`

{% hint style="info" %}
Please remember to set the parent wrapper to `position: relative;` so that the expansion does not go over the bounds of the wrapper.
{% endhint %}

### Disable Focusable Parent On Click

A focusable parent is added on click by default, toggle this option to turn it off.

## Readability

### Add Group Comments

Enable comments in the final stylesheet to identify and organize groups easily.

## Plugin Preferences

### Theme

Choose between a light, dark and gray theme for the Core Framework user interface.

{% hint style="info" %}
Please note that this is only for the appearance of Core Framework and not the website itself.
{% endhint %}

### Uninstall

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

## White Labeling

### Plugin Name

Change all instances of the name of the plugin within the WordPress dashboard.

### Plugin Icon

Change the icon of the plugin, which must be an .svg file. You can reset this back to default by hovering over the icon and clicking on the red trash icon.

### Plugin Author

Change the author of the plugin located in the Plugins section.

### Plugin Description

Change the description of the plugin located in the Plugins section.

### Hide plugin

Here, you can hide the plugin completely from the WordPress menu.&#x20;

{% hint style="success" %}
You can regain access by using the following path:&#x20;

`yourdomainname/wp-admin/admin.php?page=core-framework`
{% endhint %}

## Reset

{% hint style="danger" %}
**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!
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.coreframework.com/navigating-the-ui/preferences.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.