# CoreKit

Meet the ultimate **UI Kit** for Core Framework, featuring 170+ modern sections to rapidly build sleek and beautiful websites. It includes a comprehensive collection of visually stunning pre-designed layouts, sections, and components that are ready for use in production right out of the box.

**✅ Features:**

* 170+ pre-designed original layouts and sections across headers, footers, mega menus, heros, features, CTAs, blogs, and more.
* Takes full advantage of the Core Framework utility classes and utility variables.
* Beautiful yet minimal by default.
* Dark and light theme-ready out of the box.
* Easily customizable and responsive by design.
* Ready to import templates for blog archives and single posts
* Trusted by thousands of users since 2020.

## Installation Guide for Oxygen 🟪

{% hint style="danger" %}
If you are using CoreKit for Oxygen Builder, then you will need to have purchased the [Oxygen Integration addon](https://coreframework.com/marketplace/oxygen-builder-addon).
{% endhint %}

### 1. Oxygen Builder

Please make sure you have installed and activated Oxygen Builder. You will need to navigate to **Oxygen** → **Settings** → **Library** → set '**Enable 3rd Party Design Sets**' → **Add Design Set** → and paste in your CoreKit site key before clicking on 'Add Source Site'.

### 2. Core Framework

1. Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FIyufn6uDo6VNo6FGRwcz%2FSetup%20CoreFramework.jpeg?alt=media&#x26;token=1207c45c-ffd4-40aa-a223-30f0455cfb58" alt=""><figcaption></figcaption></figure>

2. Next, kindly navigate to **Core Framework** → **Addons** and enter your license key for Oxygen Builder Core Framework add-on. Don't forget to hit '**Save Changes'**.
3. Then, navigate to **Core Framework** → **Manage Project**. Here, you can import the **CoreKit.core** project file. Click '**Overwrite**' and then '**Save Changes'**.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FFkEsGKsZBTCmmoCd6lwB%2F596shots_so.png?alt=media&#x26;token=10f1185d-0a82-41f2-ab1c-bdda2821cc46" alt=""><figcaption><p>Import the .core file, click overwrite all, and don't forget to hit 'Save Changes'</p></figcaption></figure>

### 3. Import Global Styles

In order to streamline your setup, please use our blueprint Global Styles file for Oxygen Builder so that the necessary styles are applied globally. You can do this by navigating to the Oxygen Export & Import section under Oxygen from the WordPress dashboard and copying the JSON from our blueprint.

{% hint style="info" %}
[Please find our blueprint JSON here and instructions on how to import.](https://docs.coreframework.com/builder-integrations/oxygen-builder#option-1-import-our-blueprint)
{% endhint %}

### 4. Blog Templates

When adding blog templates, you will need to make sure that you have the correct settings applied. There are two main blog types: **Blog Archive template**, which generally displays all of your blog posts on the page, and **Single Blog template**, which is the layout of a single blog post.

#### Blog Archive Template

To add a blog archive, add a new Oxygen Template by navigating to **Oxygen -> Templates -> Add New Template**. Give it an appropriate name, such as 'Blog Archive', and make sure to inherit your Main template. Then, under **Archive,** check **Post Types** and add **Posts:**

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FjwsRYgeX54RKQCL0tQey%2F632shots_so.png?alt=media&#x26;token=8a80ab7e-8c57-4219-ac43-4de534c246ea" alt=""><figcaption><p>This is how your settings should look for the Blog Archive.</p></figcaption></figure>

{% hint style="warning" %}
**Regarding Pagination:** a blog archive may sometimes have pagination. If you are using pagination, then it is important that your Repeater element is set to 'Default' for the query.
{% endhint %}

#### Single Blog Template

To add a Single Blog template, once again, let's add a new template by navigating to **Oxygen -> Templates -> Add New Template**. Give it an appropriate name, such as 'Single Blog', and make sure to inherit your Main template. Then, under **Singular,** check **Posts:**

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FLSC1VufZMevbvlH10UWc%2F637_1x_shots_so.png?alt=media&#x26;token=5c4373c9-848f-4ff0-b9bc-efdc77e3a741" alt=""><figcaption><p>This is how your settings should look for the Single Blog template.</p></figcaption></figure>

#### Importing the Templates

Finally, you can choose the appropriate templates from CoreKit's Design Set to add to these templates, which will be located inside Oxygen Builder by navigating to **Add Element -> Library -> Design Sets -> CoreKit - CF -> Templates**.&#x20;

## Installation Guide for Bricks 🟨

{% hint style="danger" %}
If you are using CoreKit for Bricks Builder, then you will need to have purchased the [Bricks Integration addon](https://coreframework.com/marketplace/bricks-builder-addon).
{% endhint %}

### 1. Bricks Builder

Please make sure you have installed and activated Bricks Builder. Then, navigate to **Bricks -> Settings -> Templates** -> Enter the **URL** and **Password** in the Remote templates section. We also recommend using '**CoreKit**' in the Name field. Be sure to click on **Save Settings**.

Another important step is to ensure you have **SVG Uploads** enabled in the Bricks Builder settings. Kindly navigate to **Bricks -> Settings -> General Tab**, and make sure **Administrator** is checked. This is important when it comes to importing templates containing .svg elements.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FyKVVydt10H0n4Qw1GKaQ%2F856_1x_shots_so.png?alt=media&#x26;token=05a4eefd-5f4b-4176-9524-85c4d18f8411" alt=""><figcaption><p>Ensure Administrator is checked on this section.</p></figcaption></figure>

### 2. Core Framework

1. Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.

   <figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FIyufn6uDo6VNo6FGRwcz%2FSetup%20CoreFramework.jpeg?alt=media&#x26;token=1207c45c-ffd4-40aa-a223-30f0455cfb58" alt=""><figcaption></figcaption></figure>
2. Next, kindly navigate to **Core Framework** → **Addons** and enter your license key for the Bricks Builder Integration add-on. Don't forget to hit '**Save Changes'**.
3. Then, navigate to **Core Framework** → **Manage Project**. Here, you can import the **CoreKit.core** project file. Click '**Overwrite**' and then '**Save Changes'**.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FFkEsGKsZBTCmmoCd6lwB%2F596shots_so.png?alt=media&#x26;token=10f1185d-0a82-41f2-ab1c-bdda2821cc46" alt=""><figcaption><p>Import the .core file, click overwrite all, and don't forget to hit 'Save Changes'</p></figcaption></figure>

### 3. Import Theme Styles

In order to streamline your setup, please use our blueprint Theme Styles file for Bricks Builder so that the necessary styles are applied globally. Please follow the instructions on the page linked below:

{% hint style="info" %}
[Please find our blueprint JSON here and instructions on how to import.](https://docs.coreframework.com/builder-integrations/bricks-builder#option-1-import-our-blueprint)
{% endhint %}

## Fluent Forms

The contact forms included in our sections make use of Fluent Forms. We therefore recommend having this plugin installed so that you can make use of the forms right away! Fluent Forms offer a free version of their plugin which will work just as well.

## CoreKit Counter Sections

CoreKit includes sections featuring counters that utilize JavaScript for animated counting from 0 to a specified target number.&#x20;

To implement these counters, assign the class `.counter-display` to the counting element, as this is recognized by the JavaScript. Set your target number by adding a `data-value` attribute to the element and specifying the desired target number as its value.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FL6grkl1OlkpJmW9ou2VF%2F230shots_so.jpg?alt=media&#x26;token=2f46e4ac-8b32-40ae-bde6-287f14995b11" alt=""><figcaption><p>In this example, we have set the target number to 500.</p></figcaption></figure>

{% hint style="success" %}
The sections already come with the attributes attached, so you can simply change the values to anything you like.
{% endhint %}

## Custom Code for Excerpt Length

In our own blog archive and blog single templates, our excerpts are a little shorter than the default value of 55 words. In our examples, we are using a value of 20. To implement your own custom value, you can use the code snippet that we are using below. Simply paste this into a code editor, such as [Fluent Snippets](https://wordpress.org/plugins/easy-code-manager/) (free), to customize your excerpt length!

```php
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
/**
 * Change the length of excerpt.
 *
 * @param int $length The number of words. Default 55.
 * @return int New excerpt length.
 */
function custom_excerpt_length( $length ) {

    return 20; // number of words. Default is 55.

}
```