How I configure Core Framework to work with Elementor
Follow this link.
Why do I need a CSS Framework?
I have been looking out for a CSS Framework that I can use alongside Elementor and believe that Core Framework meets my needs. If you don’t know the benefits of having a CSS Framework then a Google search will provide lots of articles on the subject. I liked this response I saw on Stack Overflow in answer to the question “why do I need a CSS framework?”.
“You can think of frameworks (in any language, not just CSS) as a bunch of existing reusable codes you can readily use for your own projects. They essentially make your life easier because you don’t have to reinvent the wheel anymore. Simply put, frameworks are a bunch of tested reusable codes for common tasks.”
Here is an example. You want the buttons on your website to have a white border, rounded corners and a drop shadow. But you don’t want this on all buttons because you have multiple styles. You could use Elementor global settings to set the button properties but you will have to override it wherever you want a different button. If you create a class that applies these CSS properties you just need to add the class name to the button. Now if you want to say increase the radius or change the border there is only one place to change it and it applies to all buttons that use this class.
If you ever use “Paste Style” in Elementor, stop. If two widgets or more have the same style you should be using a class. What happens when you have a dozen pages and you are still using “Paste Style” and then you realize you need to change the style. You have to find all the widgets on all the pages to change each style individually. Use a class, change it in one place and the job is done.
Less is more
One CSS framework often mentioned is Bootstrap and Elementor incorporates this anyway. But when you run Page Speed Insights you will often see recommendations to remove unused CSS so the last thing I wanted was some hugely bloated framework providing stuff I just don’t need. I want something lightweight that I could use as a library and didn’t have to memorise hundreds of variable names. Core Framework allows you to customise which classes you want to use so you can strip it down to just what you need.
But the second driving force for me was the change in Elementor Pro subscription where the new Essential subscription no longer offers a) Popups b) Custom Code and c) Custom CSS on widgets. I already had solutions for the first two but needed a solution to the third: the lack of custom CSS on widgets.
Keep CSS in one place
Elementor Pro did allow you to add custom CSS directly onto a widget and this is what most developers would resort to but it does not make for an easily maintainable site – twelve months from now if you edit the site would you remember where the custom CSS is? The better approach is to have all of the CSS in one place and use classes to assign it to a particular widget. Elementor Pro previously allowed you to put custom CSS into Site Settings but this is not available in the new Essentials version. So the next best option is to put it into the Additional CSS of the theme. I tried this out with the Hello theme and found that the CSS was retained after upgrading the theme to a new version. But what I hate about that as a solution is that the CSS is embedded into your HTML exactly as it is laid out and it looks so unprofessional. It also means that if you change themes your formatting is lost. I really want the CSS minimised at the very least and in a CSS file that is referenced in the HTML header.
Enter Core Framework. Elementor doesn’t play as nicely with a CSS Framework as does Bricks but it does look like Elementor will have better support in from 2025. But there are still advantages in using Core Framework today with Elementor. In January 2023, Elementor launched version 3.10 which included custom units in numerous places (font sizes, margins, padding etc.). Developers immediately saw the benefit of being able to use the CLAMP function when defining font sizes to enable a responsive typography. But custom units also allow you to add variables so you can make your website design driven by CSS variables if you want.
Benefits of Core Framework with Elementor
Elementor does a good job of providing global control of text, padding and widgets like buttons and images. So where does Core Framework provide benefits?
- It provides an easy way to add responsive typography. In Elementor I define custom fonts for my various heading styles and then would paste in a clamp function. Core Framework provides a very easy way to generate all the clamp functions and then you refer to them using the appropriate variable eg. –title-m, –title-l, –title-xl, –title2xl , –title3xl.
- Line heights can also be defined using variables like –line-height-s, –line-height-m, etc.
- I can create my own padding variables and reuse them in all my projects eg. –pad-m, –pad-l
- I can create my own utility variables like –display-none and classes like .image–noshadow. I don’t have to memorise somebody else’s variables or classes.
- I can create a library of classes that I can reuse in my projects
- I can create classes that will allow me to have different button styles other than the default style from Elementor site settings
- I can either copy the CSS or export it as a file
This last feature is really useful. During development I can copy the CSS into the theme’s additional CSS area where I can tweak it but when the site goes live I can export it as a minimised CSS file and then use <link rel””> to load the CSS. (I found using wp_enqueue_style() would load the CSS first so it didn’t work). The result is the CSS is no longer embedded in the HTML for all to see. By the way I don’t add the CSS file into the theme directory and I don’t bother with child themes – I just create a custom-css directory in the uploads folder and copy the stylesheet there.
Core Framework has also forever changed the way I think about heading sizes. Previously I just picked a size for H1 and then a smaller one for H2 but it is much better to use a mathematical scaling factor like “Major Second” or “Perfect Fourth”. When you see the headings on a page they just look right – it’s why you also find these scales used in music.
Conclusion
The key drawback at the moment is that you can not assign global colors in Elementor as variables. Core Framework has an excellent tool for building a color pallet. I particularly like the ability to create multiple shades and tints for a color. Core Framework writes these out in the CSS as variables and I would really like to be able to refer to them when defining Elementor’s global colors so that they can be controlled from one place. The new Elementor Editor v4 appears to allow custom colors to be assigned to variables so that should solve the problem. But I am finding enough benefit from Core Framework now to switch over to it for all my future projects.