# Utility Classes & Vars

With the flexibility of Core Framework, we offer options where you can create utility classes from variables.&#x20;

In this example, the Spacing section allows you to generate 3 different sets of utility classes ranging from gap, margin, and padding:

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FRfU6TWedcij2LBsXSUTK%2Fimage.png?alt=media&#x26;token=f873d49e-f262-4610-91dc-f5f2ed526026" alt=""><figcaption><p>Options to create utility classes</p></figcaption></figure>

This will automatically create utility classes using all of the variables created from the section above it. In the CSS, you will see that many new classes have been generated.&#x20;

For example, `.gap-m` will now have a value of `var(--space-m)` applied to it. Very powerful stuff! 🔥

## Creating new Groups

### Create a selector group

Creating a new group is very simple. At the bottom of the section you're in, simply click on the "Create a selector group" button. Enter a name for your group and then start adding your selectors along with the properties and values!

{% hint style="info" %}
You may notice that adding values will bring up a list of your existing variables! 🔥
{% endhint %}

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2F6Bw8Tcuv2hSWpIyEt0Aa%2Fimage.png?alt=media&#x26;token=6a5b20f5-b387-406f-93bb-55fb3e02c1cc" alt=""><figcaption><p>Adding new selectors</p></figcaption></figure>

### Create a variable group

To create a new variable group, simply click on the "Create a variable group" button at the bottom right. Then, give the group a name and start adding your variables. You'll notice that your variables will always be prefixed with --.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FY8DMSeM5yR4F2Ga7N8TF%2Fimage.png?alt=media&#x26;token=f3530b04-1771-4def-aa36-8d3dd707f92a" alt=""><figcaption></figcaption></figure>
