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 reduce the drop shadow 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 , you are doing it wrong. 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. I really want the CSS minimised at the very least and ideally 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 take a look at Elementor’s roadmap: “CSS Selectors: Group advanced settings in a class, manage them and apply them to any element across your website.” So it does look like Elementor will have better support in the future. 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 refer to it in the header. The CSS is no longer embedded in the HTML for all to see.
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. But I am finding enough benefit from Core Framework to switch over to it for all my future projects.