CoreKit
Reintroducing Core as CoreKit - The original OxyNinja's design set library is now powered by Core Framework.
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 🟪
If you are using CoreKit for Oxygen Builder, then you will need to have purchased the Oxygen Integration addon.
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
Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.
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'.
Then, navigate to Core Framework → Manage Project. Here, you can import the CoreKit.core project file. Click 'Overwrite' and then 'Save Changes'.
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.
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:
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.
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:
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.
Installation Guide for Bricks 🟨
If you are using CoreKit for Bricks Builder, then you will need to have purchased the Bricks Integration addon.
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.
2. Core Framework
Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.
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'.
Then, navigate to Core Framework → Manage Project. Here, you can import the CoreKit.core project file. Click 'Overwrite' and then 'Save Changes'.
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:
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.
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.
The sections already come with the attributes attached, so you can simply change the values to anything you like.
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 (free), to customize your excerpt length!
Last updated
