Bricks vs Gutenberg - Feature Section Victor From Scratch (17min)
HTML-код
- Опубликовано: 7 янв 2024
- Two weeks ago I recorded myself trying to build this layout with default blocks in Gutenberg with the Twenty Twenty-Four theme.
It didn't go very well, as detailed in the following video and article:
Video: • I Tried Building a Lay...
Article: geary.co/wordpress-block-edit...
A TON of people wanted to see what the workflow looks like in Bricks Builder as a comparison, so I will show you that workflow today.
From scratch.
No Editing, No ACSS, No Add-ons, No Pre-Workout ... I don't even think I've had my usual amount of coffee. And I slept like shit last night because my daughter kept kicking me in her sleep.
17 minutes. And it was a relatively joyful experience.
I also talked through the whole thing, which I think added a few minutes, but there's no need to get ticky-tacky with the time. It certainly wasn't, say, a four-hour type situation or anything.
In any case, let me know how you think it went!
Oh, almost forgot:
Ads are off (as usual).
Here's my zero-commission Bricks affiliate link since I only care about money: bricksbuilder.io.
** MY TYPICAL TOOLS (Absent From This Video) **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
I'm a teacher transitioning into tech--I am SO grateful for your videos. Everytime I start to feel absolutely lost and frazzled, you have something that explains and clears the overwhelm. Thank you.
You got this!
Without ACSS: 17 minutes.
With ACSS: under 5 minutes.
With Frames: 47 seconds.
With Gutenberg: Are we there yet?
Jokes aside. Watching you do your thing is pure joy.
Thx, I Appreciate it 🙏
Let's count the clicks:
click on plus
click select group
click select layout
click for some reason again to select a layout
click on the alignment icon on the panel
click - full width selection
click - select layout again
Section installed
click on plus
click select group
click on the navigator to select an internal group
click on the desired group
click on the alignment icon on the panel
click - select by content width
click - select layout
The container is installed in the section
In total, 14 clicks were spent on the simplest operation in Gutenberg, and 1 click in Bricks
Do I want to continue working with Gutenberg? Of course not!!!
i can't appreciate enough the enormous amount of informations that you share in your channel in a structred raw way, thank you truly and keep doing what you are doing you have really educated me.
You're very welcome!
Kevin, an idea, while fresh, that I think would be great: same thing again, this time with ACSS and again with a stopwatch. Take those 5 minutes for us! Although it would be dangerous for the health of some...
Completely agree. A follow up video with ACSS and Frames would be amazing with this.
Yes please!
Bricks is selling itself once again! An amazing tool! Thank you Kevin for all the content you are doing for the community!! 😊
After about 9 months of using Bricks Builder, the only thing that can be said is amazing. Also, your tutorials and important points that are usually not mentioned anywhere, along with this page builder, are very satisfying and surprising. Thank you for your priceless videos.
Glad you like them!
It is pure joy watching a professional work his craft.
Kudos for the high energy rebuttal.
Cheers.
I learn something new every time I watch one of your videos. Great work. 👍
Love the affiliate link burn in the description 👍 Now waiting full anticipation to see if your section is responsive....such a thing certainly can't be done in anything less than 6 hours 😂
And Here. We. Go.
Kevin keep on making great content and don't get distracted by the haters. Keep the focus!!🙂
🙏
Fantastic Kevin....keep up the good work
It was an excellent quick tutorial Kevin. You always rock! 👍
Thanks for watching!
Geary Builder. You'll make it happen in a few years! 🙏🏼 I swear I wouldn't be surprised. What you've accomplished since you've started this channel is just WOW. I bet you didn't imagine ACSS would be THIS! amazing and this big. So getting together a team for creating the ultimate builder with your vision....I believe you will :P
Thx! I wish Wordpress wasn’t so against builders or I would consider it more.
Top quality video, thanks!
Let the games begin
Thank you, Kevin.
And *another* great one! Thanks for sharing your knowledge as always.
It's probably a good thing that it's on the shorter side too: it will make it appealing to more people, whereas a longer version can be intimidating to some (although I personally like the longer ones, ah!)
Your videos are so informative, detailed, and just fun to watch. I learned a lot. From what I've seen and tested (demo version), Bricks is an amazing builder. I am planning to use Bricks and forget about Elementor.
Great to hear!
I cant wait for this!🤩
I don't know why there's always a drama. But, always love Kevin and Bricks
Get the popcorn out! 🤩
As always: very nice and informative vid. Never saw someone throwing that stuff together that fast. I think you wanted to show how to share it. Probably that was what you were thinking about at the end. Would have been interesting. Thanks
Now this is content
Not really much to say except how bloody awesome was that to watch. It almost makes the pain of seeing you try this is Gutenberg go away Kevin 😃
Almost! I still have scars.
Awesome 🎉🎉
Fantastic… if we are tuned in to how powerful the offering is in a tool like Bricks, the scales should fall very quickly from our eyes, and rightly so. It would be refreshing to hear Gutenberg users, in the infamous words of Molly Bloom, say YES!
clean workflow and even cleaner code and it really looks awesome!! some german friends are not going to be happy let me tell you = )
It’s okay, the creator of bricks is German.
Nice new hat!
Good one. I think both are great options.
Hey Kevin, thank you. This quick "tutorial" made my life easier today. It's good stuff, as usual! In the meantime, do you own a flying licence?
No, I’ve thought about getting into it though
Love this, Kevin!! It goes to show that knowledge combined with well thought out tools can make a meal !!
If I heard correctly, we’re you going to share this section? I don’t find a link. :-(
I’m on mobile this week or so an YT mobile app is…UGGH! I greatly appreciate you!
Hi, guys! 😏 can't wait
For some reason your "is there anything else?" at the end reminded me of that scene from the film Troy where Achilles (Brad Pitt) has just slain the giant Boagrius... 😂
😂
Hi Kevin :) Thank you for your work, its amazingly helpful and im slowly starting to get better at all this. Looking at joining the inner circle too. I have a question about the video above. I followed it on my site and everything worked well. Except when i tried to add css to the content wrapper that houses the heading and description. When i tried to use css on this element then the heading link that was expanding over the whole card area reduced down to only the content element area. All i added on its root was a background color and backdrop-blur. Why would this be happening and is there a work around?
I would need a link to investigate, but it’s possible the backdrop blur changes the stacking context of the elements.
once again great content, thanks!
You mentioned sharing this layout is this for the public or only the inner circle?
Public but I have to see if I still have the file to be able to export it. Been too busy with ACSS 3.0
@@Gearyco that would nice
No last-minute changes from Bev, after recording?
Yes how many clicks it takes to build one section on both builders is the best way to measure the workflow effeciency.
Thank you for the video, I'm not sure where my mistake is, but on phone, the 4 columns are not displayed.....
rob come here
I have an important question.
If we use the loop/list in many places, what is the best way to make it as as template as possible ?
So when we change one , it also change the other but not breaking the difference query.
Bricks components feature being released soon.
Hey, I didn't know about 'Isolation'! :) 10:25
I’m curious to see how much ‘quicker’ it would be using ACSS, because aren’t you just replacing manual values in those fields with a variable? Eg instead of 1 rem for the grid gap, you’d put var(-grid-gap). I get that it makes the decisions a little quicker (once you’re familiar with the various ACSS options), but not hugely so.
Even the custom CSS would be pretty much the same, just with tokens sprinkled in there, rather than manual values.
Thoughts?
The benefits of ACSS are mostly realized within the context of a full project and not an individual section of content. It has benefits in so many different areas and ways outside of any one particular section, so a section to section comparison isn't ideal. But with that said, it would have shaved minutes off this layout. If you count the time it took me to write the CSS for clickable parent and focus parent, for example, none of that would have been needed because ACSS has utilities for those. Same with the grid functions. And magic grid would have removed the need for breakpoints. Additionally, the contextual panels would have made it faster to add a lot of the tokens. var and calc expansion shave time off as well. This stuff adds up to hours saved across most projects, but only minutes or seconds on a single section.
Another thing to consider is that I'm personally not the best to do a 1-1 comparison because I can do things many users can't do. I can write custom CSS for clickable parent and focus parent in seconds off the top of my head. If a user can't do that and has to look up how to do those things, it might take them 10-15 minutes. Maybe more if they make a mistake and have to try and diagnose what's happening. But with ACSS, they slap the utilities on and move on with their life. That's an immediate 10-15 minute savings for that user vs only a minute of savings for me. Same with grid. They might not know grid functions off the top of their head, but they can easily drop in a grid variable or use the contextual menu to insert a grid variable, saving them a bunch of time.
Hopefully all that rambling makes sense.
@@Gearyco Thanks Kevin, makes perfect sense. The speed of your development comes from deep understanding of CSS as WELL as the ability of the tools at hand to make that knowledge easier to apply. As a newcomer to Bricks, ACSS and Frames, I'm still poking my way around, working out where to put tokens v utility classes (to avoid 'littering') and just the full potential of ACSS. I'm thoroughly enjoying the learning curve, along with videos like these that show their potential.
i legitimately feel bad for Rob, but when he claimed that 4 hours isn't long and it's only half a work day, it was blatantly clear that he hadn't used or even tried Bricks (or any other page builder of this sort). One would think that before debating someone on the internet, you'd at the very least give it 10 minutes of research looking into the other side's argument.
I'm sure he originally said "I would have this done already" 15 mins into his video...how does 15 minutes suddenly turn into 4 hours?
Poor Rob 😂
Been racing along with this video and everything looks fine on the backend as well as in the preview mode but whenever I view the page on frontend it's showing nothing?? what am I missing here?
Not sure. Caching?
Rob's input on design 😅
21:26 May I ask where the setting for removing the ID‘s is?
Bricks admin settings.
You forgot to riff on Dodge Charger. Lol 😂
is it necessary to change the html to list? Why don't just leave it as div as it is originally?
Yes, proper semantic html is important for accessibility.
Sorry to have missed this Kevin, but the flu has arrived! Will catch up!
Oh no! Lots of fluids and rest! Feel better soon :)
NOOOOO not again! lol
but i will be following along with breakdance :)
and with no screen sharing :)
Popular request!
Gutenberg is best for beginner, non-tech users...
Kraft Builder is best for professional users...
That's all.
🤔
Which is better Bricks vs Breakdance in 2024?
They have different philosophies. Bricks is #1. Breakdance isn’t a bad builder by any means though.
Not sure what you mean by philosophies ... but are the builders pretty much the same in terms of the designing/building process, etc. Btw, can you build a 2-step form natively without using a third-party plugin in Bricks?@@Gearyco
No, they have a different workflow and a different philosophy for maintainability. Bricks is a class-first builder and Breakdance is a presets-based builder.@@Mars-lf1pz
Thanks! Much appreciated@@Gearyco
Which is better, class-firs of a preset-based builder for someone who does not code?
Apple presentation style??? 😁
Hope atleast this time it is FAST BALL... Don't be SOFT @Geary
Was it enough of a fast ball?
Great video, simple yet efficient way to show what Bricks is capable of vs Gutenberg for this kind of work.
One question Kevin : I recently watched a video from Kevin Powell using "overflow: clip" instead of hidden and started using it myself with the same outcome (ruclips.net/video/72pUm4tQesw/видео.html)
Have you tried it and do you have a preference ?
Well if you offer anything after wards is not a sin, is totally the opposite, you must to get something in exchange for what you give, is a universal law, other than that, you will be breaking the energy flow of how things work.
You get a whopping $0.000 in commissions for promoting bricks 😳? That’s a lot to buy a 3 bedrooms house in LA
You’re Robbing someone of his job.
Thoughts and prayers.
never buy a German Car.