Initial Setup and Configuration

For the Web App:

1. Account Creation: After creating your account outlined on the previous page, click on the Open Web App at the top right to access to the web app.

2. Create a new project: Next, you will have the option to create a new project. Start by entering a name for your project and then click 'Create'.

3. Core Framework: Once you have created your project, you will now be directed to the main interface of Core Framework. All projects will be set up with the standard, baseline setup. You can now navigate the sections of Core Framework and have a look around to familiarize yourself with the different sections such as Colors, Typography, Spacing, etc.

4. Preferences: We recommend navigating to the ⚙️ preferences section to familiarize yourself with the options available in this tab to help you set up your main configuration. This section contains some important values that will dictate both the way your website will look and how Core Framework will function.

5. Exporting CSS: Once you have the desired setup in Core Framework, you can click on the Preview CSS button and then download your generated CSS from here. Alternatively, you can copy the full CSS or the minified version to use on your websites.

For the WordPress Plugin:

1. Plugin Installation: After downloading and activating the Core Framework plugin, you can now access Core Framework right from your WordPress dashboard.

2. Plugin Setup: Configure the plugin settings to align with your site’s design needs from the preferences section. Please see the ⚙️ preferences section below for more information on the preferences fields.

3. Testing: Ensure everything is functioning correctly by previewing changes on your site's front end.

4. Builder: If you are using a page builder such as Oxygen Builder or Bricks Builder, then you will find our section on Builder Integrations useful.

Onboarding

When opening Core Framework for the first time, you will be presented with our simple onboarding screen. There are 2 steps for the web app, and 3 steps for the WordPress plugin (this includes an option for enabling addons).

Step 1

Here is the onboarding screen which you will be presented with when first opening Core Framework.

Core Framework: Full experience

This option will import everything you need regarding colors, typography and spacing, and will generate both utility classes as well as variables.

This option is recommended when using Core Framework UI kits!

Variables Only: Minimalistic

This option will streamline the outputted CSS as it will generate variables only for the default Core Framework setup. This includes colors, typography and spacing and radii.

Empty: Create your own

This option will give you an empty setup but will still import a default typography and spacing setup which includes both utility classes and variables.

Step 2

This second step is available on the plugin version of Core Framework

On the second step, you will be presented with the options to add license keys for any builder addons that you have purchased. Simply enter the license key in the relevant field and click the check mark!

Step 3 (Step 2 on Web App)

Choose your basic preferences

Regardless of which option you choose in step one, the final step will offer 2 more options for your basic preferences:

Root font size

This allows you to choose your root font size (options of 100% and 62.5%).

Dark mode

With dark mode toggled on, this will set up Core Framework with the necessary color options so that you can choose both your light and dark mode colors where necessary.