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.”
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.
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. I already had solutions for the first two but was not happy with a solution to the third: the lack of custom CSS.
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 you 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. Now first up I should say that it doesn’t integrate well with Elementor but it does have good integration with Bricks. [This was another reason I was interested in a CSS framework as it’s highly recommended when using Bricks]. In January 2023, Elementor launched version 3.10 which included custom units in numerous places. 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
In reality I am not using Core Framework in this way. I have in fact disabled a huge amount of it because 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 e..g –text-m, –text-l, –text-xl, –text2xl , –text3xl.
- 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
- I can create my own utility variables like –display-none and .image–noshadow. I don’t have to memorise somebody else’s variables.
- 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 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.
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.