Introduction to the Builderius CSS Framework
HTML-код
- Опубликовано: 20 окт 2024
- We have released an alpha version of the Builderius CSS Framework. This is a minimal framework based on PIco CSS, but optimized for use insde the visual site builder for WordPress, Builderius. Still it works on its own as well.
This framework is built-in, into the Builder and provides basic styling for all the html elements as well as some elementary CSS classes and CSS Variables to be used to style the website consistenly.
Get the Builderius Alpha version here: builderius.io/...
View the Builderius Alpha Introduction video: • Builderius Alpha 1.0 i...
This framework is in early stage, and we are releasing it to the public to gather feedback. Please visit the github page: github.com/bui..., / builderians to give us feedback or use the comment section.
CHAPTERS:
1:34 Building blocks: The Selectors, The Variables, The Code Mode
2:25 How to inpsect or explore the Framework
3:35 Classless part of Framework at work
4:52 Using built in classes
6:42 Using the code editor find feature
7:10 Exploring the CSS variables (Theme Settings / Presets vs Framework)
9:10 Grouping Variables in the panel
11:11 Working with fluid typography using Utopia and other web clamp calculators
Great content, thank you! Only one suggestion i have is if audio could be a little bit better. Maybe with another mic?
I am trying ... not one of my skillsets ... but will be working on it soon. :)
yes, Audio quality is really weak. I would look out for a USB stand mic for the desk. It's good enough for any audio or spoken recordings. The big A will have it :)
Is it possible to add variables in bulk using the builder or import them from a CSV file? Builderius is hands down the best WordPress builder, even in its alpha stage. It puts everyone, especially Bricks, on notice.
Yes, it is possible to do. Any css variables under :root selector in All CSS tab will be recognized and then displayed on CSS vars tab. So, simple copy/paste of css code works 😊
How does it integrate with the builder? Through a plugin? One-click install without a plugin? What’s the process?
Is it plug and play or is there a settings panel one must configure?
A video on the onboarding process might help!
The framework is already inside the builder when you install it and activate. If you open Selectors -> select specific selector -> enable code mode -> switch to "All CSS" - you see the entire framework here. It is part of global settings. So, by default it is installed, it is part of global settings and it can be removed any time if you don't need it. If you remove it then global settings will be empty. You may paste here you preferred framework instead. Or leave empty and use WindPress/CF/ACSS/etc - those which load css in external stylesheet.
@@mrpsiho That’s a real smart way of doing things. 10/10. Impressed.
I hope the framework too gets better over time and negates the need to use third-party frameworks like ACSS/Core etc.
Good Luck!
It gives you a choice and makes it easier for acss and others to integrate, rhey don't need to override anything, if you are an acss user, remove the built in framework, and then acss does all of it. Even if you combine it, it should be easy since our framework uses low specificity selectors, so it's easy to override
Does this Builderius css framework come as a part of the builder plugin or is it a separate paid plugin?
I don’t like that one has to type to search the class, it involves memorization and a learning curve, rather many frameworks have come up with the ‘right-click context menu’ option where one simply right clicks on the value field and all relevant options for the element come up. (See Oxyprops, and even Cwicly did a smart integration of Tailwind with this approach, might wanna check it out).
I have checked oxyprops - video ruclips.net/video/mn9CEQGsTpY/видео.htmlsi=vMZub4U8de1z3aAK, timeline 1:12 where the author says "if you do not remember exact class name you can start typing". And Builderius has exactly the same approach!
I don't think a framework is there to get paid. I think its more showcasing the option of integrating one. Additionally, this shown framework is lightweight and applies for basic styling without you have to add it specifically to the elements.
@@mrpsiho That right click context menu in the video you shared about Oxyprops was exactly what I referred to, and Cwicly improved on that as well.
No cheat sheets or memorisation required, as the context menu provides all necessary options.
What about the first question? CSS framework as a part of the builder itself, as a paid add-on or as a paid separate plugin?
Builderius CSS framework is free and open source: github.com/builderius/builderius-css-framework
@@PicSta Yep, exactly this! :)