Core Framework

Description

Hey there! If you’re tinkering with WordPress and have a knack for making sites look just right, you might like what we’ve cooked up with Core Framework. It’s like a Swiss Army knife for your CSS woes but way easier to use and with a lot more fun involved.

What’s Cooking?

Make It Yours: Ever felt boxed in by CSS frameworks? We get it. That’s why we made Core Framework as customizable as a build-your-own pizza. You start with our base (which is pretty awesome on its own), and then add, tweak, or remove anything you don’t need. It’s all about making it fit your project like a glove.

Play Well with Others: Whether you’re team Gutenberg, all about Bricks, or an Oxygen fan, we’ve got your back. Core Framework slides right into your workflow, making it that much smoother to sprinkle your design magic everywhere.

A Dash of This, A Dash of That: Organize your colors, manage those borders, and set your typography scale just right. We’re all about making the tedious tasks a piece of cake, so you can focus on the fun parts of design.

Components Galore: Reusable components are your best friends. Buttons, input styles, cards – you name it, we help you keep it all neat and tidy, ready to be reused whenever you need them.

Join the Club: With over 4,000 buddies already in the Core Framework family, you’re in good company. Our marketplace is like a treasure chest of our ecosystem, full of add-ons, UI kits, and templates. Plus, you’re more than welcome to contribute as an author!

Who’s It For?

From solo freelancers to big-time agencies, if you’re crafting websites, you’ll feel right at home with Core Framework. It’s all about making your life a bit easier and a lot more creative.

Easy Peasy Setup

Getting started is as simple as installing any WordPress plugin. Find Core Framework in your dashboard, hit “Save” after making changes, and voila! The framework is live on your site.

Learn more about all settings in our documentation portal.

Customize to Your Heart’s Content

Inside Core Framework, everything can be tweaked. Colors, classes, variables – mix and match them to create something that’s uniquely yours.

Need a Hand?

Our support crew is here for you via Intercom on our site, and our docs are always available for a quick how-to or when you’re in the mood for some light reading.

Simply contact us at any time using the Intercom at the Core Framework website or in our Facebook community group.

Keeping It Fresh

We’re always rolling out updates and staying on top of WordPress changes to make sure you’ve got the smoothest ride possible.

Find out about every Core Framework update in our changelog.

From Friends You Trust

Brought to you by the folks behind Motion.page, we’ve been around the block and we’re here to stay. We love hearing from our users, so don’t be shy!

Come On In, The Water’s Fine

Core Framework isn’t just about making sites look pretty (although it does that pretty well). It’s about enjoying the process, exploring new possibilities, and being part of a community that gets it. So, why not give it a whirl?

Screenshots

  • The cutting-edge CSS framework toolkit built to transform the way you design and develop websites.
  • Manage colors effortlessly using our visual GUI, that allows you to set up your colors, organize them, generate shades and tints, and more.
  • Perfectly calculated typography fluid scale, automatically responsive and consistent on all devices.
  • Not only typography, but also spacing needs to be perfectly calculated and automatically responsive.
  • Visually edit and organize reusable elements like buttons, inputs, cards, and anything else.
  • Manage your utility classes and variables to reuse across your project. Anything can be tweaked, added or removed.
  • Less than 12kB out of the box and editable to be even lighter. The output CSS is as clean as it gets.
  • Super-charge your WordPress experience with the power of our included Gutenberg addon.

Blocks

This plugin provides 1 block.

  • Theme Toggle Easily add toggle between dark and light mode. This feature requires use of the Core Framework classes and variables.

Installation

Installing the plugin
1. In your WordPress admin panel, go to Plugins > New Plugin, search for Core Framework and click “Install now“.
2. Alternatively, download the plugin and upload the contents of core-framework.zip to your plugins directory, which usually is /wp-content/plugins/.
3. Activate the plugin.
4. In your WordPress admin panel, go to Core Framework > Addons and enable or activate your preferred page builder integration.
5. Click the ‘Save’ button to confirm and push the framework live.

Reviews

30 Aprel 2024
If you are using Oxygen Builder on your WordPress site, this plugin should be in your must-have list. The framework makes it so easy to build sites, and the customer support team are friendly, responsive and very knowledgeable. Extensive framework that is easy to use even for beginners.
25 Aprel 2024
A great plugin that lets you basically create your own design guide / style and components. Very flexible and robust, you add what you need and remove what you don’t need as you go!
25 Aprel 2024
It’s a dream to be able to have so much control over the styling of your website by using this awesome plugin.
02 Aprel 2024
A plugin from the same team that gave us the amazing OXYNINJA and this just takes you even further into the realmes of WordPress alterations. A “Cracking” bit of kit. Well done Team
30 Mart 2024
Wonderful CSS framework for WordPress. A great side note is you can use it for non WP projects too.
Read all 31 reviews

Contributors & Developers

“Core Framework” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Core Framework” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.3.10
March 26, 2024
FIXED
Resolve issues with server side caching with LiteSpeed Cache

1.3.9
February 19, 2024
ADDED
Grid templates in Variable Ui (Bricks Builder).
Select colors from the Variable Ui by right-clicking on the colour picker pop-up trigger in the Bricks Builder.
Wrap CSS declarations containing the :hover pseudo-selector with @media (hover: hover). This setting prevents hover styles from appearing on touch devices. This feature is disabled by default.
IMPROVED
Prevent minimum font sizes being larger than maximum.
After selecting the colour using Variable UI colour previews on hover are temporally disabled (Bricks Builder).
Increase allowed manual font and spacing size to 2000px.

1.3.8
February 5, 2024
ADDED
Auto generate margin classes, eg. .margin-top-auto, .margin-left-auto, etc.
IMPROVED
Tweak paste component tooltip.
Improved sanitisation.
Optimize database calls.
FIXED
Allow underscores in variable names.
Ensure latest variables are loaded into Variable UI and variable dropdown.

1.3.7
January 22, 2024
FIXED
Don’t open Variable Ui in certain fields in Oxygen Builder.
Fix overflow in components preview.
Zip archive incompatibility with WordPress 6.4.3.

1.3.6
January 22, 2024
FIXED
Incompatibility of custom theme toggle icon in Bricks Builder (reported with Feather Icons).
Custom variables created in the colors category will appear in the Colour tab of the Variable UI (Bricks and Oxygen).
Fixes miscalculations introduced in version 1.3.5

1.3.5
January 17, 2024
ADDED
Add option to include comments in the stylesheet. [#75]
Add option to disable applying variable preview and auto changing unit on hover in Oxygen builder.
FIXED
Calculations for fluid input were not updated with latest configuration on save. [#84]
Disable Autosuggestion of variables in icon size component in Oxygen Builder.
Resolved an issue in certain WordPress multisite configurations where saving changes were not updating stylesheet.
Hide admin notices on Core Framework page.
Certain variable configurations were not prefixed in the root declarations.
IMPROVED
Quicker save time.
Various other fixed and improvements.

1.3.4
December 13, 2023
FIXED
Variable UI couldn’t be opened in certain project configurations.
Incorrect dark mode color schema property in generated CSS.

1.3.3
December 7, 2023
ADDED
Implement easing gradients to create create smooth linear-gradients. This option is disabled by default and can be toggled on in preferences.
Add core_framework_exclude_pages filter that allows excluding pages from loading framework.
Added getStylesheetUrl, getStylesheetPath, and getStylesheetVersion functions in the Helper class. Read more.

1.3.2
November 15, 2023
FIXED
Variable UI couldn’t be opened in some cases.
Tabbed navigation could result in duplicate autocomplete dropdowns.

1.3.1
November 14, 2023
ADDED
Added option to open Variable UI using right click both in Oxygen and bricks builder.
IMPROVED
Variable suggestions are now sorted based on relevancy, for example autosuggestions in font size inputs will show fluid font size variables first. Applies to both Oxygen and Bricks add-on.
Navigate back in the CSS rows using tab + shift.
FIXED
Autocomplete dropdown compatibility issues with Advanced Themer plugin.
Adding state to the component could result in editing multiple states at the same time.

1.3.0
November 13, 2023
ADDED
Visual Variable UI modal in Oxygen and Bricks builder addon.
Open by holding down ⌘/Alt and clicking on an input.
Preview class on hover in Oxygen builder.
Variable dropdown with autocomplete and preview on hover in Oxygen Builder.
Added settings pages for each add-on:
Enable and disable features: apply a class on hover, toggle preview dark mode, variable dropdown, variable UI.
Added focus-visible component state.
Added option to duplicate group.
IMPROVED
Scroll to the selected variable in the variable dropdown in Bricks Builder.
Increase the maximum number of generated spacing and typography variables.
The dropdown suggests color variables in raw color input in Bricks.
Improved dropdown position in Bricks.
Persistent previewed theme in Components.
FIXED
Incorrect generated variable with double — chars in helper’s getVariables() method.

1.2.9
October 30, 2023
FIXED
Add a missing variable prefix to custom variables in the Bricks Builder autosuggestion dropdown.

1.2.8
October 25, 2023
ADDED
Added the ability to use a custom icon in the theme toggle Bricks element.
IMPROVED
Framework stylesheet loaded in the Gutenberg preview has a higher priority. This fixes compatibility issues with Greenshift components (e.g. “Advanced Core Button Block”).
Categorise settings in the Theme Toggle element for Bricks.
FIXED
Component modifier classes (e.g. .btn.small) were not visible in Gutenberg integration.

1.2.7
October 16, 2023
ADDED
Added WordPress Multisite support.
Added CoreFramework\Helper which can be used by plugin developers to access the list of variables and classes.
IMPROVED
Previewed theme is now persistent on reload and is shared between frontend and builder preview. This change affects theme preview button in Gutenberg, Oxygen and Bricks builders.
Allow more digits in custom scale ratio in spacing and typography calculators.
FIXED
Added missing aria-label to the Theme Toggle elements (Bricks builder, Oxygen builder, Gutenberg).
Under certain conditions both cf-theme-dark and cf-theme-light class was added to the html element inside of Bricks builder preview iframe.

1.2.6
September 25, 2023
FIXED
Reduced API requests within the Gutenberg add-on.
Fixed an incorrect property in the bold class. This class will be automatically corrected on save.
Increase the maximum value of the ‘Max Screen Width’ preference to 4000px.
Shades and tints for dark mode were not generated under certain conditions.
Set stage for UI kit preset import.
Reorder Gutenberg add-on ui – move applied classes section to the top.

1.2.5
September 10, 2023
FIXED
Fixed an issue with overlapping text in tabs in the Gutenberg add-on when the “Show button text labels” WordPress preference is enabled.
Fixed an error that could occur when trying to update the plugin on a site that has moved between domains.
The framework stylesheet had the wrong order in the Bricks builder iframe, resulting in style differences between the Bricks builder preview and the frontend.

1.2.4
September 4, 2023
ADDED
Add Theme toggle block (Gutenberg add-on).
Control size, colour and icon type.
Add preview dark mode button to the page and site editor.
Add variables autocomplete with a dropdown to Bricks builder integration (resave required after the update). Supports every input that accepts variables. Hover over a variable to preview it.

1.2.3
August 23, 2023
FIXED
Incorrect variable value in color classes when using \’–\’ characters in color name.
Incorrect behaviour of \’theme-invert\’ class in light mode.

1.2.2
August 21, 2023
FIXED
Text size classes not regenerating clamp value on save when using a manual typography and root font size 100%.
IMPROVED
Cleaned up the CSS output to always display variables instead of clamps, plus a last resort REM fallback.
Size of the stylesheet is now showing a minified and gzipped size.

1.2.1
August 18, 2023
FIXED
Incorrect value of of .width-auto class.
In some cases, importing a project file created with older versions may result in manual typography sizes being reset.

1.2.0
August 17, 2023
ADDED
Learn how to use the new Dark Mode feature
Dark Mode
Create a dark mode variant of any color. Including shades, tints and transparent variants.
Quickly add a theme toggle with dedicated Bricks and Oxygen elements.
Toggle any specific section by adding a class .theme-inverted
Choose a preferred default theme or set it automatically based on system settings.
Preview dark mode in Oxygen and Bricks builder with button in the builder UI.
Preview components in dark mode.
Colors for backgrounds, text, border and shadow for both Light / Dark mode
Visual preview of classes on hover in Bricks Builder Addon
Z-Index utility classes eg. .z-index-10 , .z-index-100 , etc.
Position classes .sticky , .fixed
Utilities .display-none , .visible , .hidden
Relative width clases, eg. .width-50 , .width-60, etc.
Screen classes, .screen-width (100vw), .screen-height (100vh)
Components .divider , .checkbox , .radio
In order to see new classes, you may need to reset the framework to default (from the Preferences pane).
The update itself will not attempt to write to your saved framework.

IMPROVED
Components default styles and output
Dark / Light mode toggle in component previews
Remove prefix from generated colour classes selector. For example colour variable named –bg-primary would generate background class .bg-primary instead of .bg-bg-primary
Refined PostCSS config – expose variables in all declarations, make clamp fallback shorter.
Improve components preview to ensure previewed css matches generated file.
Display three inputs for checkbox and radio input in Components.
Add missing states in component editor, :checked and :valid
Hide WordPress notices when in Core Framework interface

FIXED
Fixed issue with previewing :before and :after in component editor.
Fixed overflow issues with Menus in component editor.
Performance improvements in WordPress admin dashboard.
Fixed issue with styles being applied to Gutenberg Editor UI.
Fixed issue when Column Span or Row Span classes were used together with Column Start or Row Start

1.1.0
July 28, 2023
Learn more about the new Manage Project screen here.
New \”Manage Project\” view, replacing the previous Import / Export view:
Import parts of the project with a side by side view.
Reorder sections between categories. Import the project remotely from the web app with a link.
Add functionality to import and export individual colours, colour groups, fluid spacing configuration, fluid typography configuration, individual components, classes and variable groups.
Resolved an issue related to saving the project on specific database configurations.
Fixed a bug that was causing media queries to be improperly generated when using new variables in media query mode.
Repositioned Core Framework in the menu bar.
Resolved a problem where theme colours were disappearing in Gutenberg when the child theme was activated.
Fix the issue with breakpoints not being removed correctly.

1.0.4
July 11, 2023
Fixed an issue of duplicate colours in Gutenberg (noticed in Kadence and GeneratePress themes).
Fixed an issue of overwriting theme colours (noticed in GeneratePress).

1.0.3
July 7, 2023
Load prefixed stylesheet in Gutenberg editor, resulting in improved specificity of classes.
Fixed an issue with a missing prefix in the variable name of the main colour in Oxygen and Bricks Integrations.
Fixed an issue with incorrect colour ID in Oxygen causing incorrect colour assignment.
Oxygen colour sync now uses variables instead of hex values.
Improved drag\’n\’drop feature in the component editor by adding a drag handle.
Fixed autocomplete filtering when using shorthand for variables – \’–\’.
Fixed the issue of unnecessary loading of CSS in the Gutenberg integration.
Fixed an issue with inserting space into the component variant selector.
Added a tooltip, advising to push changes after enabling an add-on.
Fixed an issue of selector specificity in the Oxygen builder iframe – affecting element selectors.
Fixed an issue with FOUC when hovering over a class in Gutenberg widget.
Fixed an issue with class sync when multiple integrations are enabled.
Fixed an issue with the visibility of group icons in Gutenberg.

1.0.2
July 4, 2023
We have fixed an issue with the search function in the Gutenberg component.

1.0.1
July 4, 2023
Fixed an issue where Oxygen Builder was not detected in certain cases.
Resolved an error that occurred when deleting a variant of a component with associated states.

1.0.0
July 3, 2023
Production Launch