The Top 12 Bricks Builder Keyboard Shortcuts for Crazy Efficient Building
Vložit
- čas přidán 10. 07. 2024
- When I first started using Bricks, I felt like things were taking way too many clicks. People asked me about the negatives and I said, "The UX needs improvement."
Well, it turns out I was just being a chump, manually clicking everything with the mouse.
Bricks has some fantastic keyboard shortcuts and implementing them into my workflow has completely changed my outlook on Bricks. These keyboard shortcuts immediately solved a ton of the UX issues I was running into!
In this video I'm going to review my top 12 keyboard shortcuts, how they work, and why I think they're so valuable.
Hey! Make sure you subscribe and hit the notification bell if you like these trainings!
Join my Inner Circle: digitalambition.co/inner-circle/
Get a copy of ACSS: automaticcss.com
Note: The one major downside I've found to the front end preview shortcut is that when you need to inspect the page, you're inspecting builder code and not the actual front end code. If you don't need to inspect code, then it's still a great option.
00:00 Intro
00:48 01 - Select Parent or First Child
03:00 02 - Select Adjacent Siblings
04:53 - Cycle Through Breakpoints
06:17 - Duplicate Element
07:05 - Undo & Redo
07:38 - Toggle Setting Search Field
09:57 - Add New Element Via Search
12:22 - Add Classes to Element
15:24 - Wrapping Element in Div/Block
17:48 - Delete Element
18:38 - Toggle Preview Mode
19:50 - Auto Select New Element
#DontBeAChump
14:08 - you can also hit 'tab' after the first class to add classes instead of cmd+enter again :D
Slick!
Wow, this kinda feels like writing code but still utilzing the Bricks UI. Amazing indeed! Perhaps having a way to show only the altered parameters of an element would be a handy addition as well. So when we want to modify a value of a parameter we already have a value set, it's much easier to find it. But maybe with the search function it's not that big of a deal.
As for the ugly WP toolbar, you can disable that in Users > Profile. It's one of the first things I do with a fresh WP install.
P.S: I loved the "woohoo" at 12:13 😂🙌🏼 Your channel is truly irreplaceable! Thank you very much for all the new content.
I’m a huge fan of native shortcuts within software. Because they work on any site they don’t need to be custom configured to use. I wasn’t aware of many of these shortcuts Kevin, so thanks for the heads up.
I gotta tell ya mr. geary, i no longer just watch your videos because they are seriously top notch, you are also as funny as f,
Not a chump - love it man, you're doing such a great service to the bricks community and the company too.
cheers.
😄
I appreciate that
Hi Kevin, there is another nice combination:
cmd-p for preview and then..... (drum roll).... cmd-b for breakpoints. It also works in preview mode!
Yep, good call!
Here's another one that I use a lot -> Cmd + S in the Builder saves your changes (Ctrl + S on Windows)
Excellent video. Really useful to avoid being “a chump”! 😉🤣
Very valuable! Just started building in Bricks and these keyboard shortcuts make it a lot faster.
- In Windows, CTRL + DEL works without combining using FN key
- writing a class name with space automatically adds-hyphen to the class name, that's super-time-saving
- CTRL P for preview mode
I feel parent to child selection should have been up and down arrows, siblings selection should have been left and right arrows.
Using hydrogen pack, I realize that most of the shortcuts don't really need to combo buttons, wrap with a div should have just been 'W' etc. Or the give us option to choose our shortcuts
Agree
And add the CMD + right/left arrow to open the structure panel (only the element where you're)
Haha cool to see the real Cracka here :D @all follow him, he has many amazing bricks tutorials too! :)
@Design with Cracka: May you post your shortcut ideas on the bricks forum and push it in a CZcams video? Would be awesome if they make that changes now, instead somewhere in the future when anyone is used to the current shortcut layout and upcoming features clutter it even more :)
Also I think it might be important to use shortcuts nearer the left hand on the keyboard for the most often used actions. Shortcuts needing two hands should be used when followed by a keyboard usage as typing sth. after cmd + enter
100% agree on the "I feel parent to child selection should have been up and down arrows, siblings selection should have been left and right arrows." It is counter intuitive.
- writing a class name with space automatically adds-hyphen to the class name, that's super-time-saving?
I know it was 11 months ago, but space just indicates another class, so you can add multiple classes simultaneously. Or em I missing something?
So valuable! Thanks, Kevin!
For delete function, I think you only need to use FN key when you're working with keyboard that doesn't have specific DEL key, like the built-in Mac keyboard. I use external keyboard that has both BACKSPACE key and DEL key and for this I just press CMD+DEL just like CTRL+DEL in Windows
Still one of the best Bricks videos! Any new shortcuts make it into your workflow?
No new shortcuts as of now
Top video. You know the shortcuts are there. But then you see it in the video and see what a time saver. Started putting it into practice right away. Thank you.
But am still searching for all the classes of ACSS. So no 8- Add classes to Element - is not yet my favorite.
Brilliant tips Kevin
I need to put these in a PDF, Print them and place it on my desk!
You certainly grew on me… some really valuable advise these last few videos! Thanks.
Does that mean you didn't like the first video you saw? ;)
@@Gearyco Fair question. Well, you are opinionated and insightful, and it took me a moment to adjust to your style, but now I dig it! And who wants to be a non-professional chump. So, time to slash some of these habits.
I have to agree. At first your attitude might come across as arrogant, and coming from someone who used Oxygen in the past, that wasn't really a surprise. Oxygen users have that reputation. Then I've seen a few posts on the Bricks facebook group, where you were very defensive about ACSS and got into some heated discussions with some people who didn't fully agree with you. Another red flag. But after watching a few more videos, I realized it's not arrogance, it's passion. You are really passionate about what you do, about Bricks and about ACSS. I can tell by some of your reactions in this video, when you found out you could combine some of the shortcuts, that you were having the time of your life, and I can certainly relate to that. When you add to that passion the amount of useful information you give away on each video... man you can be as arrogant (sorry, passionate) as you want! You got another fan here! ;)
@@antonio.carreira passion ftw 🙌
Hi Kevin, strangely, the shortcuts don't work for me, for example if I use CMD + Shift + L/R arrow, Google Chrome jumps back to the previous page - is there a solution to make the shortcuts work for me?
Nice show hide element buttons - would be nice to have that in vanilla
How do you add var() automatically when you type a variable name?
I noticed you just type --abc and it auto adds the var()
Automatic.css
Great stuff as always. Do you think breakdance will be up there with bricks and oxygen or does it currently not meet all your requirements that you listed that a builder should have. I haven’t personally had the time to play with it yet and test it.
Not only does it not have the minimum features to be a professional builder, the creator of Breakdance has specifically said that the builder isn't for professionals and will probably never have these features. Now, he's already backtracked on multiple other things he's said, so maybe in the future things will change, but I'm unsupportive of breakdance in general. Mainly because of the way the creator treats people and turns his back on his community and on the creators who support that community.
@@Gearyco ah ok I see. The positioning of the builder is what was confusing me. Glad to hear your opinion. Thank you.
Now, I will watch your more recent videos with a little more attention to (keyboard) detail … 😉
The difference between preview and wordpress frontend is that you might enable some script only in the frontend to not crash bricks.
Sir need more tutorial on oxygen also perticular pro menu element....
I don't use the pro menu because it's not accessible.
18:38 - Toggle Preview Mode One difference I found was that if I am using a Bricks variable such as "{site_title}", preview mode does not show the actual, but only the variable. Do you see that also?
Yes, definite downside of preview.
It will b awesome if you provide all the shortcuts in pdf.. nice informative video sir
Bricks already provides them here: academy.bricksbuilder.io/article/keyboard-shortcuts/
Chump
Ultra-chump
Mega-chump
Facepalm chump
Chernobyl chump
Where am I right now? Chernobyl chump level, working my way to Chump level. By next year, I will not be any level of chump at all.
🤞
That the spirit!
at 19:47 you did something to go back from preview to the builder. what was that?
CMD + P -- it was the keyboard shortcut I was covering in that segment.
@@Gearyco ah. Cmd P both too and from. Ive not yet got the builder so im learning but not doing yet
#ChumpHasLeftThebuilding
You know I am making a tab on my streamdeck with these shortcuts ;)
Is it fast enough to have to reach for it?
@@Gearyco Yeah its right next to my keyboard to the left of it.
@@Gearyco Can even make macros for it. Open class panel -> insert bg--accent -> press enter just in one click.
Great idea!
Here's my lazy ass trying to think of ways to now map the shortcuts to less keys. Have you ever considered a custom keyboard or something like a streamdeck to use when developing? It would probably be overkill for what I do but could see something like that being handy for repetitive tasks.
I have a streamdeck that I use when recording, but I wouldn't put shortcuts like this on it. Too slow to reach for it to push the buttons.
@@Gearyco - True, I guess there are physical limitations to consider if things are worth it. Just seems like some of the Apple/Mac shortcuts you need a third hand for them.
You can remove that ugly wordpress admin toolbar from wordpress -> your user settings -> Show Toolbar when viewing site. This is the first checkbox I click on every wp install.
I actually like its functionality in most cases, I just don't like it being there when I'm trying to preview a page.
Personally, I hate that the shortcuts are so long. It isn't comfortable to use them, at least on windows.
In case people were wondering you can find the full list of shortcuts here
academy.bricksbuilder.io/article/keyboard-shortcuts/
#DontBeAChump
I found another limitation that "chumps" me a bit. I like to use Firefox Developer as my main editing browser. CMD + SHIFT + P opens a new browser page. There are add ons to modify this but
also, when using CMD + SHIFT + P in say Chrome, it ONLY will wrap with a Block element. If I want to wrap with a DIV, It seems I must still use the right click with the mouse.🖱