Hi Paul, Would you think about doing a video comparing/contrasting Core Framework and Automatic.css (ACSS)? I’d be interested to hear what you thought of both, especially if you’ve decided on Core Framework as the one for you moving forward…
I’ve installed Core Framework with Gutenberg on a FSE vanilla and it integrates much better than ACSS. It continues working with Generateblocks and 20-20-4, not tried it with GP theme. It seems to be a smaller database than ACSS but that suits me as I can’t remember half of what Automatic offers 🙂 It is more attractive from a cost point being free for core Wp and a one off for the Bricks integration. I forgot to check if fluid uses Clamp but I’ll search the data tomorrow…. Be interested in a deeper dive please Paul though I’ll probably splash on the Bricks adapter anyway. Keep up the good work! 👏
This was fantastic, especially for a newbie like me who is absolutely clueless about using a framework, and still figuring out bricks. Are you planning on making any more videos about core and bricks integration? You hinted that you might, but I don't see any in your video library. Would love to see the more intermediate or advanced level uses of Core (if there are any), along with maybe something about how BEM works with core (along with examples on how to set it all up). I'm just learning about BEM, and would like to figure out how that works in relation to CF. Loooove your videos, of course. Thank you so much for taking the time to make them!
Really interesting Paul. Hope you had a great New Years and really looking forward to your 2024 content. Another interesting comparison, CF for Bricks $137 - unlimited websites, ACSS $399 - 100 websites.
That's exactly how it is! And now ACSS has become even more expensive. In my opinion, a CSS framework is simply not worth what ACSS charges for it, especially since they apparently no longer want to offer discounts. Perhaps the ACSS success has gone to their heads ;-) Too bad about the good product. I'll give Core a chance now =)
@@flaviricci My biggest issue with ACSS is how Geary treats anyone who critiques ACSS in forums, groups, etc. There's no reason for him to be condescending towards them, but he's behaved rudely on a number of occasions and continues to do so. I just can't get behind that.
🎯 Key Takeaways for quick navigation: 00:00 🛠️ *Introduction to Core Framework and Bricks Builder* - Overview of using Core Framework with Bricks Builder. - Aimed at beginners, providing basic usage examples. 01:19 ⚙️ *Setting up Preferences in Bricks Builder* - Adjusting root font size and maximum screen width. - Importance of aligning Core Framework and Bricks Builder settings for consistency. 02:19 🎨 *Theme Styles in Bricks Builder* - Creating and applying theme styles across a website. - Setting up element containers and typography in Bricks Builder. 03:40 💼 *Introduction to Hostinger Hosting Services* - Hostinger's WordPress hosting features and benefits. - Mention of WordPress staging tools and AI assistance. 04:06 🎨 *Exploring Core Framework Interface* - Detailed walkthrough of Core Framework features. - Explanation of colors, typography, and spacing settings. 07:01 🌈 *Customizing Colors in Core Framework* - How to manage and customize brand colors. - Setting up dark mode and transparent color variations. 08:24 📝 *Setting up Fluid Typography* - Explanation of fluid typography and scale ratios. - Customizing font size classes and headings. 10:19 📐 *Managing Spacing in Core Framework* - Configuring minimum and maximum sizes for spacing. - Generating gap, margin, and padding classes. 11:44 🏗️ *Utilizing Components in Core Framework* - Creating pre-styled elements like buttons and badges. - Using variables and classes for component customization. 12:14 📏 *Adjusting Layout Settings* - Setting up rows, columns, and flex layouts. - Customizing grid and layout for consistency. 13:13 🔧 *Other Design Elements in Core Framework* - Managing utility classes and additional design elements. - Customizing cursors, Z-index values, and more. 14:12 🖌️ *Applying Core Framework in Bricks Builder* - Demonstrating the use of Core Framework classes in Bricks Builder. - Customizing container elements with colors and classes. 16:33 📊 *Advanced Styling with Core Framework* - Styling headings and text using Core Framework variables. - Overriding default styles for customization. 18:29 📐 *Creating Responsive Grids and Layouts* - Building a responsive grid layout with CSS classes. - Adjusting gaps, columns, and row spans for responsive design. 20:46 🧩 *Advanced CSS Grid Techniques* - Implementing advanced grid layouts with Core Framework. - Customizing layouts for different screen sizes. 22:09 🚀 *Leveraging Framework for Efficient Design* - Benefits of using a framework for web design. - Simplifying the design process with Core Framework and Bricks Builder. Made with HARPA AI
Exceptional video! Would absolutely love to see how you'd approach building a landing page with bricks + core. Maybe even how helpful this would be alongside BEM or another class naming philosophy to build fully maintainable repeating sections or components. Cheers!
Excellent overview/review, Paul !! Thank you so much for covering this. You answered a couple of lingering questions which helped tremendously. I'm sure I won't be alone in begging to see some more in-depth videos covering this. Merry Christmas to the Charlton clan!!
Great video as usual. Personally little confused with Bricks, Advanced Themer and Core framework settings. Which overrides which etc. For example, are the Advanced Themer theme styles redundand when using core framework?
Great tutorial. One single page tutorial will help understand how to use it with in bricks. Not much info on where and how to use in builder. I also need to learn grid and how to manipulate the grid with cf in bricks.
Hi Paul, why do we have to set the container width as the same as the max screen width which is just for the maximum size in fluid calculators (spacing and typography)?, the container width is to limit all the website content within a certain width, while the max screen width is just for calculating the largest spacing and typograhy value, they are two different thing and not related to each other.
To be honest, it's pretty simple - you can find most of it here - learnbricksbuilder.com/recommended-tools/ I may swap in some additional tools like Bricksmaven for rapid prototyping or Bricksforge if needed.
I have a situation and I don't know how to approach it. In the Core Framework, the initial design and color generator are based on the fact that the website starts with a "light" design. But my upcoming project and client require the original design to be dark. I want to say that the client's website must first be dark, and if necessary, whoever wants can switch to light mode. I don't know, on the surface this seems simple, but for some reason I can't wrap my mind around this. Because I have the impression that the Core Framework always generates all colors with "light" mode. Even if I choose the default mode to be "Dark", all the colors are still the same, especially the text. How to approach and setup this so that the Framework emphasize dark color first and light mode second? If am am not clear enough: I want to design and generate dark colors first and light color to come in later. But the system insist every color is "light" so it's weird. It would be great if I am able to tell CoreFramework that my project default is Dark and then for each color instead of option "Enable dark mode" there's "Enable light mode". But this does not exist so I wonder how other people solved this?
Hi, thank you very much, but I would like to know if you could make a tutorial on how to create professional layouts with Core Framework, learning to design with columns, rows and grids, thank you. I learn a lot from you. Hola muchas gracias, pero me gustaría que si pudieras hacer un tutorial sobre como maquetear profesionalmente con Core framework, aprender a diseñar con columnas, filas y con grid, gracias. Aprendo mucho contigo.
ACSS has a number of features missing from CF, namely automatic header offset for overlay header, the rightclick context menu has more applications (in ACSS you can right click to adjust your widths, not in CF that I could see). There are a number of things like that
It's missing a lot of features and workflow enhancements that ACSS has. It also has some fundamental differences that we consider downsides to maintainability and effiicency.
Personally, with modeern browsers and larger screen resolutions, I think 1366px is a good size for the standard layout. 1100 seems a bit too small these days.
Your timing couldn't be better., I'm learning bricks and have Core Framework, spent all day today doing Bricks lessons and having to pause to figure out how my setup with CF differs from theirs. Why do you say to setup the H1s etc. in Bricks as opposed to CF? I've been adding CSS to the existing Heading setting in CF today. Guess I better restore defaults on that one haha. A more detailed tutorial would be great. I noticed that when I was editing Typography in Bricks, for example the colour of H1s, it wasn't taking effect because CF was overriding it.
I beleive what I demonstrated was how you could overide the default heading styles (for visual purposes) while retaining the semantics of the HTML structure. This could be handled in various ways, the demonstration was just to show how you don't need to stick rigidly to the CF definitions if you want to visually style things. Think of the difference you may have on your H1 on a hero section of your homepage as opposed to the hero section on a blog page (which would probably be much smaller).
@@reufjaha123 I just preferred the user experience with CF over ACSS. Both are great products, but for me I just preferred the user experience in CF. :)
I still dont really get how this is smart. I just stack classnames on elements, instead of modifying one element and then re-use the styling of that? The latter seems more efficient. All these things are also something i can just configure in Bricks. Why is it smarter for me to type the classname instead of just pressing the setting in Bricks? Some of the variables seem nice i guess
Paul's demonstration wasn't the best here, he's using utility classes in the video, the true power of frameworks is manipulating your styles using variables.
@@sevenelven but isn't it somewhat overkill and expensive just so I can get --space-xl variables? I guess they are nice, but it's not like I've lacked them much
A comparison of frameworks for Wordpress is urgently needed ;)
Hi Paul, Would you think about doing a video comparing/contrasting Core Framework and Automatic.css (ACSS)? I’d be interested to hear what you thought of both, especially if you’ve decided on Core Framework as the one for you moving forward…
Yes please!
I’ve installed Core Framework with Gutenberg on a FSE vanilla and it integrates much better than ACSS. It continues working with Generateblocks and 20-20-4, not tried it with GP theme.
It seems to be a smaller database than ACSS but that suits me as I can’t remember half of what Automatic offers 🙂 It is more attractive from a cost point being free for core Wp and a one off for the Bricks integration.
I forgot to check if fluid uses Clamp but I’ll search the data tomorrow…. Be interested in a deeper dive please Paul though I’ll probably splash on the Bricks adapter anyway. Keep up the good work! 👏
Would like to say THANK YOU, for all your work this year!
This was fantastic, especially for a newbie like me who is absolutely clueless about using a framework, and still figuring out bricks. Are you planning on making any more videos about core and bricks integration? You hinted that you might, but I don't see any in your video library. Would love to see the more intermediate or advanced level uses of Core (if there are any), along with maybe something about how BEM works with core (along with examples on how to set it all up). I'm just learning about BEM, and would like to figure out how that works in relation to CF.
Loooove your videos, of course. Thank you so much for taking the time to make them!
Really interesting Paul. Hope you had a great New Years and really looking forward to your 2024 content. Another interesting comparison, CF for Bricks $137 - unlimited websites, ACSS $399 - 100 websites.
My choice is CF - in fact, that's exactly what I bought before Christmas. :)
That's exactly how it is! And now ACSS has become even more expensive. In my opinion, a CSS framework is simply not worth what ACSS charges for it, especially since they apparently no longer want to offer discounts. Perhaps the ACSS success has gone to their heads ;-) Too bad about the good product. I'll give Core a chance now =)
@@flaviricci My biggest issue with ACSS is how Geary treats anyone who critiques ACSS in forums, groups, etc. There's no reason for him to be condescending towards them, but he's behaved rudely on a number of occasions and continues to do so. I just can't get behind that.
Looking forward to more in-depth CF videos - wonderful!
🎯 Key Takeaways for quick navigation:
00:00 🛠️ *Introduction to Core Framework and Bricks Builder*
- Overview of using Core Framework with Bricks Builder.
- Aimed at beginners, providing basic usage examples.
01:19 ⚙️ *Setting up Preferences in Bricks Builder*
- Adjusting root font size and maximum screen width.
- Importance of aligning Core Framework and Bricks Builder settings for consistency.
02:19 🎨 *Theme Styles in Bricks Builder*
- Creating and applying theme styles across a website.
- Setting up element containers and typography in Bricks Builder.
03:40 💼 *Introduction to Hostinger Hosting Services*
- Hostinger's WordPress hosting features and benefits.
- Mention of WordPress staging tools and AI assistance.
04:06 🎨 *Exploring Core Framework Interface*
- Detailed walkthrough of Core Framework features.
- Explanation of colors, typography, and spacing settings.
07:01 🌈 *Customizing Colors in Core Framework*
- How to manage and customize brand colors.
- Setting up dark mode and transparent color variations.
08:24 📝 *Setting up Fluid Typography*
- Explanation of fluid typography and scale ratios.
- Customizing font size classes and headings.
10:19 📐 *Managing Spacing in Core Framework*
- Configuring minimum and maximum sizes for spacing.
- Generating gap, margin, and padding classes.
11:44 🏗️ *Utilizing Components in Core Framework*
- Creating pre-styled elements like buttons and badges.
- Using variables and classes for component customization.
12:14 📏 *Adjusting Layout Settings*
- Setting up rows, columns, and flex layouts.
- Customizing grid and layout for consistency.
13:13 🔧 *Other Design Elements in Core Framework*
- Managing utility classes and additional design elements.
- Customizing cursors, Z-index values, and more.
14:12 🖌️ *Applying Core Framework in Bricks Builder*
- Demonstrating the use of Core Framework classes in Bricks Builder.
- Customizing container elements with colors and classes.
16:33 📊 *Advanced Styling with Core Framework*
- Styling headings and text using Core Framework variables.
- Overriding default styles for customization.
18:29 📐 *Creating Responsive Grids and Layouts*
- Building a responsive grid layout with CSS classes.
- Adjusting gaps, columns, and row spans for responsive design.
20:46 🧩 *Advanced CSS Grid Techniques*
- Implementing advanced grid layouts with Core Framework.
- Customizing layouts for different screen sizes.
22:09 🚀 *Leveraging Framework for Efficient Design*
- Benefits of using a framework for web design.
- Simplifying the design process with Core Framework and Bricks Builder.
Made with HARPA AI
Exceptional video! Would absolutely love to see how you'd approach building a landing page with bricks + core. Maybe even how helpful this would be alongside BEM or another class naming philosophy to build fully maintainable repeating sections or components. Cheers!
I'll be looking into content like that in the New Year for sure. :)
Yes, would love to see how to setup and use BEM with Core.
great vid Paul, loving all this Bricks content!
Glad to hear it!
Excellent overview/review, Paul !! Thank you so much for covering this. You answered a couple of lingering questions which helped tremendously. I'm sure I won't be alone in begging to see some more in-depth videos covering this. Merry Christmas to the Charlton clan!!
Cheers Jim, great to hear this video helped answer those questions for you. :)
Have a wonderful Xmas and New Year too. :)
Thank for the video! A video giving some hints and tips to make everything scalable would be great...
Very good, very helpful, deeper dive would be great
Was looking forward to this on Core Framework.
Great video as usual. Personally little confused with Bricks, Advanced Themer and Core framework settings. Which overrides which etc. For example, are the Advanced Themer theme styles redundand when using core framework?
I'd love to see a full build. I'm debating Core Framework vs ACSS.
Great tutorial. One single page tutorial will help understand how to use it with in bricks. Not much info on where and how to use in builder. I also need to learn grid and how to manipulate the grid with cf in bricks.
Hi Paul, why do we have to set the container width as the same as the max screen width which is just for the maximum size in fluid calculators (spacing and typography)?, the container width is to limit all the website content within a certain width, while the max screen width is just for calculating the largest spacing and typograhy value, they are two different thing and not related to each other.
After seeing your Black Friday haul, I'd be interested in a video covering your preferred Bricks tech stack.
To be honest, it's pretty simple - you can find most of it here - learnbricksbuilder.com/recommended-tools/
I may swap in some additional tools like Bricksmaven for rapid prototyping or Bricksforge if needed.
Great video Paul, we need more deep videos like this
I’ll be releasing more on Core Framework and Bricks over the coming weeks and months. 😁
Thank you. Waiting more video for CF and Bricks.
Coming soon!
Excellent walkthrough and well presented! Could you show how breakpoints in Core Framework and Bricks Settings should be synchronized? Cheers!
Great suggestion! I’ll be doing something on that topic very soon. 👍
I released the video yesterday that included setting mobile breakpoints between CF & Bricks. 👍
Great video, thanks for sharing your knowledge...
Glad it was helpful!
Why don't I have a variable class category like you do? All in one cateogri I have “Default Core Framework Project”
At 21:34 how did you select all the divs at once? Is it native bricks feature? Also, why the radius style only applied for the first div?
If you apply the same class to all of the divs, selecting the class in one will select the class in all of them. :)
I have a situation and I don't know how to approach it. In the Core Framework, the initial design and color generator are based on the fact that the website starts with a "light" design. But my upcoming project and client require the original design to be dark. I want to say that the client's website must first be dark, and if necessary, whoever wants can switch to light mode. I don't know, on the surface this seems simple, but for some reason I can't wrap my mind around this. Because I have the impression that the Core Framework always generates all colors with "light" mode. Even if I choose the default mode to be "Dark", all the colors are still the same, especially the text. How to approach and setup this so that the Framework emphasize dark color first and light mode second?
If am am not clear enough: I want to design and generate dark colors first and light color to come in later. But the system insist every color is "light" so it's weird. It would be great if I am able to tell CoreFramework that my project default is Dark and then for each color instead of option "Enable dark mode" there's "Enable light mode". But this does not exist so I wonder how other people solved this?
Hi, thank you very much, but I would like to know if you could make a tutorial on how to create professional layouts with Core Framework, learning to design with columns, rows and grids, thank you. I learn a lot from you.
Hola muchas gracias, pero me gustaría que si pudieras hacer un tutorial sobre como maquetear profesionalmente con Core framework, aprender a diseñar con columnas, filas y con grid, gracias. Aprendo mucho contigo.
First view, first like... Best channel.
More please.
Is this a good replacement for ACSS? Seems more intuitive. Anything missing im not noticing?
ACSS has a number of features missing from CF, namely automatic header offset for overlay header, the rightclick context menu has more applications (in ACSS you can right click to adjust your widths, not in CF that I could see). There are a number of things like that
It's missing a lot of features and workflow enhancements that ACSS has. It also has some fundamental differences that we consider downsides to maintainability and effiicency.
So its more normal to have 1100px or 1366px as width ?
Personally, with modeern browsers and larger screen resolutions, I think 1366px is a good size for the standard layout. 1100 seems a bit too small these days.
Your timing couldn't be better., I'm learning bricks and have Core Framework, spent all day today doing Bricks lessons and having to pause to figure out how my setup with CF differs from theirs.
Why do you say to setup the H1s etc. in Bricks as opposed to CF? I've been adding CSS to the existing Heading setting in CF today. Guess I better restore defaults on that one haha.
A more detailed tutorial would be great. I noticed that when I was editing Typography in Bricks, for example the colour of H1s, it wasn't taking effect because CF was overriding it.
I beleive what I demonstrated was how you could overide the default heading styles (for visual purposes) while retaining the semantics of the HTML structure.
This could be handled in various ways, the demonstration was just to show how you don't need to stick rigidly to the CF definitions if you want to visually style things. Think of the difference you may have on your H1 on a hero section of your homepage as opposed to the hero section on a blog page (which would probably be much smaller).
@@WPTuts Ah yes I understood what you meant by that part, thanks for the reply and have a fantastic Christmas.
My inner Kevin was screaming, please don't class litter your project. Use BEM to help build your projects correctly. :) Core framework is amazing.
And I certainly will do when I demo a full project - this was more about showing how to get started with CF in Bricks Builder. :)
Any specific reason why you are using CF and not ACSS ?
Any particular reason not to? 😉
@@WPTuts not at all, I am just curious why you are using CF.
@@reufjaha123 I just preferred the user experience with CF over ACSS.
Both are great products, but for me I just preferred the user experience in CF. :)
@@WPTuts thanks a lot for your feedback, appreciate it.
i'm guessing not compatible with Elementor?
I'm afraid not, no. Elementor doesn't support any kind of CSS framework.
Shouldn't it be max-width and not width? So your content can shrink and still grow to the max allowed size?
I think you're right, it must be. That would make sense anyway.
Yep, should be max-width imo.
Yup, my mistake in that portion of the video. :)
Are you referring to time stamp 2:53? Thanks!
Why pay $119 for the Bricks integration when the Gutenberg integration is free?
I’m not suggesting you have to buy it. But, it makes working with CF much easier in Bricks if you do.
Because not everyone uses Gutenberg obviously. The addon is optional anyway, you can use the generated stylesheet even without it.
I still dont really get how this is smart. I just stack classnames on elements, instead of modifying one element and then re-use the styling of that? The latter seems more efficient. All these things are also something i can just configure in Bricks. Why is it smarter for me to type the classname instead of just pressing the setting in Bricks? Some of the variables seem nice i guess
Paul's demonstration wasn't the best here, he's using utility classes in the video, the true power of frameworks is manipulating your styles using variables.
@@sevenelven but isn't it somewhat overkill and expensive just so I can get --space-xl variables? I guess they are nice, but it's not like I've lacked them much
insoichere
Interesting and useful video, thanks