Cracka, I'm so glad you're working with Bricks more. It's the builder I've chosen (I've tested and made use of most of them) and it's good to know you'll be helping to broaden my skills. Thank you!
I love you are getting on Bricks. Maybe one day a whole site with ACF dynamic content, even if it's just a few pieces of content, or ugly, but comprehensive, so later one can work on his own.
NIce video. I tend to use ACSS more these days for everything. Still some unorthodox layouts that I need to learn how to do in ACSS if you want to do any videos on those?
Nice, quick video and good to see you making some videos for Bricks. I was previously using Oxygen but made the switch following the recent 'announcement', so these will come in handy.
O love grids, but this makes wonder if flex box is underrated for layout, I mean grids do offer very granular control but this is so automatic, love it
This really helped me understand how bricks handles flex, thank you. I will say I was confused at first because your divs came in at 100%, where mine came in at 100px. I didn't know if you set the default to 100% somehow, or if the defaults changed since the version you used in the video (I'm using 1.7.2). I changed to using blocks instead of divs (which have a default width of 100%) and it worked great.
I finally get Flex Basis, thank you! Oxygen doesn't seem to have it in the settings/ui (though it has Grow and Shrink).. which is insane. But Bricks does have it.. :)
Bricks Builder is starting to grow on me, all thanks to you! Now, how do I tear myself away from Oxygen which I just started using over the last year...?
@@DesignwithCracka my problem is I also do SEO and it is hard work in multiple platforms for clients. Plus I think my brain is starting to slow down from age... 😁
Cracka, great video as Always, i tried to replicate this technique with Breakdance, even i have the same field under the wrapper, i could not reach out the same result. Could you tell me if is it possible to do the same trick under Breakdance. I know this video is for Bricks, but i know also your knowledge of Breakdance. Thank you in advance
Yes it works in Breakdance, I've tested it. Remember to set the flex parent container to wrap. Also make sure you use a div with a width of 100% as the parent container, not the section.
Bricks = CSS/HTML standard compliant, built with VueJS modern framework code, and a fast builder for professionals. Already with a robust community of developers building extensions like Automatic CSS and BricksExtras. Elementor = old code-base that outputs bloated CSS/HTML (bad Lighthouse scores), but easy builder with a huge plugin community for the masses.
That's the compromise in this technique, if you need to make the divs all the same when they collapse, make the following changes to the class: - the change the flex grow to 0, - flex-basis = calc((100% - (total value of column gap in px ) / number of columns) e.g. calc((100% - 60px ) / 4) - at lower breakpoint (phone landscape), change flex grow back to 1
I must have watched this video at least a dozen times pause and play. It doesn't work like you show in the video. You have grid-item psuedo class created and making the flex 1 and 25% in one di and that gets applied to all the other divs. It's not happening on my end. I have the grid-item selected on div 1, and doing exactly what you are doing. I'm unsure what am missing, but i need this to work :). Is there a way to create this as a template for various columns, and reuse it across the sites? Looking forward to your response.
Also, when I select the grid-item class on the second div, because the 25% is expanding only on the div 1, the second div grid-item applied is not taking the same flex value 1, 1 and 25%. it's confusing. wish i can send a screenshot.
I right clicked through mouse, and it worked like yours. And then, i saved, refreshed the screen, now i can't even find the class. I don't know if it has to do with cache/bricks settings or what not. It shows 4 classes from bricksdesignset, and nothing from what i have created, neither the default. If you have any idea of what might be happening, that' d be helpful.
Don’t add ‘grid-item’ as a pseudo class, add it as a class. There’s a difference. The Pseudo class input is for :before, :after, :nth-child etc. the input field for classes is below the pseudo class input.
I would use calc((100% - 3* gaps)/4) as the flex-basis value of the flex items, so that every item has the same width. otherwise, when you have 6 items, the last 2 items in row 2 will have 50% width of the container
Good video for understanding flex in Bricks. However I would highly suggest NOT to mix CSS selector types. Your DIVs should be named with class *flex-item*, not grid-item. I think this will cause confusion when grid properties are added to the Bricks builder. Still worth a big thumbs up ;)
@@mrnordjr The class name "grid-item" is just a generic name, refering to the english term "grid", nothing to do with CSS. But I understand it could be confusing to viewers...
Cracka, I'm so glad you're working with Bricks more. It's the builder I've chosen (I've tested and made use of most of them) and it's good to know you'll be helping to broaden my skills. Thank you!
An awesome solution to using gaps while maintaining wanted column counts.
Love your work.
You are an absolute beast. Loved the video. No fluff only value 🙌🏽
I love you are getting on Bricks. Maybe one day a whole site with ACF dynamic content, even if it's just a few pieces of content, or ugly, but comprehensive, so later one can work on his own.
All hail Cracka !!! Thank you for such amazing tutorials.
Very happy to see more content for bricks! are you planning on doing a menu tutorial, hopefully, a mega menu? :D
Watching the video made me realize how easy and right it is to use grids for layout! (I mean a real grid, not a Flexbox)
Amazing 🤩
Was doing some of this already, but you filled in a few gaps I didn't think about. Great Stuff Cracka!
NIce video. I tend to use ACSS more these days for everything. Still some unorthodox layouts that I need to learn how to do in ACSS if you want to do any videos on those?
hopefully will do, what type of layout are you looking at?
This was very easy to understand, thanks very much
Very informative and well explained. Thank you very much 🤝
Yesssss, thats what i was looking for. hanks for helping
You got yourself a New Subscriber. I like the way you present. Keep it up bro. cheers.
Thanks highly informative and much appreciated!
What about responsive font sizes?
Wonderful lesson my man. Thank you.
Nice, quick video and good to see you making some videos for Bricks. I was previously using Oxygen but made the switch following the recent 'announcement', so these will come in handy.
good stuff
O love grids, but this makes wonder if flex box is underrated for layout, I mean grids do offer very granular control but this is so automatic, love it
Nicely explained. I now understand the use of those flex properties. Thank you for this
This really helped me understand how bricks handles flex, thank you. I will say I was confused at first because your divs came in at 100%, where mine came in at 100px. I didn't know if you set the default to 100% somehow, or if the defaults changed since the version you used in the video (I'm using 1.7.2). I changed to using blocks instead of divs (which have a default width of 100%) and it worked great.
Totally brilliant! Thanks.
Solid Tut thanks Cracka !
I finally get Flex Basis, thank you! Oxygen doesn't seem to have it in the settings/ui (though it has Grow and Shrink).. which is insane. But Bricks does have it.. :)
Awesome video... Bookmarking it.
Came here via WebSquadron. Perfectly explained, thanks. Here's my subscription :-)
Thank you
Thank for Cracka 👍
Nice 🔥
Bricks Builder is starting to grow on me, all thanks to you! Now, how do I tear myself away from Oxygen which I just started using over the last year...?
well, you can use both!
@@DesignwithCracka my problem is I also do SEO and it is hard work in multiple platforms for clients. Plus I think my brain is starting to slow down from age... 😁
Great as usual !!! A question ... What software did you use to make the motion graphics in this video ?
Camtasia
Cracka, great video as Always, i tried to replicate this technique with Breakdance, even i have the same field under the wrapper, i could not reach out the same result. Could you tell me if is it possible to do the same trick under Breakdance. I know this video is for Bricks, but i know also your knowledge of Breakdance. Thank you in advance
Yes it works in Breakdance, I've tested it. Remember to set the flex parent container to wrap. Also make sure you use a div with a width of 100% as the parent container, not the section.
@@DesignwithCracka Thank you, i'll give it a try👍
For example, finding out wNice tutorialch notes fit into a particular chord (chords make up the basis of most soft) - you don't need to even know
how does bricks compare to Elementor
Bricks = CSS/HTML standard compliant, built with VueJS modern framework code, and a fast builder for professionals. Already with a robust community of developers building extensions like Automatic CSS and BricksExtras.
Elementor = old code-base that outputs bloated CSS/HTML (bad Lighthouse scores), but easy builder with a huge plugin community for the masses.
.grid-item? is this class part of ACSS? newbie here brother
No it’s not. I should have called that class flex-items. But it’s just a name and not connected to any CSS framework. You can name it what suits you.
How can I avoid the last two cards to grow? @4:44 Is it possibile to keep it at 20% leaving the last two cells empty?
That's the compromise in this technique, if you need to make the divs all the same when they collapse, make the following changes to the class:
- the change the flex grow to 0,
- flex-basis = calc((100% - (total value of column gap in px ) / number of columns) e.g. calc((100% - 60px ) / 4)
- at lower breakpoint (phone landscape), change flex grow back to 1
I must have watched this video at least a dozen times pause and play. It doesn't work like you show in the video. You have grid-item psuedo class created and making the flex 1 and 25% in one di and that gets applied to all the other divs. It's not happening on my end. I have the grid-item selected on div 1, and doing exactly what you are doing. I'm unsure what am missing, but i need this to work :). Is there a way to create this as a template for various columns, and reuse it across the sites? Looking forward to your response.
Also, when I select the grid-item class on the second div, because the 25% is expanding only on the div 1, the second div grid-item applied is not taking the same flex value 1, 1 and 25%. it's confusing.
wish i can send a screenshot.
I right clicked through mouse, and it worked like yours. And then, i saved, refreshed the screen, now i can't even find the class. I don't know if it has to do with cache/bricks settings or what not. It shows 4 classes from bricksdesignset, and nothing from what i have created, neither the default. If you have any idea of what might be happening, that' d be helpful.
Don’t add ‘grid-item’ as a pseudo class, add it as a class. There’s a difference. The Pseudo class input is for :before, :after, :nth-child etc. the input field for classes is below the pseudo class input.
If this doesn’t suit your need, check this other video. ruclips.net/video/I1o4LfHn288/видео.html
I would use calc((100% - 3* gaps)/4) as the flex-basis value of the flex items, so that every item has the same width. otherwise, when you have 6 items, the last 2 items in row 2 will have 50% width of the container
Good video for understanding flex in Bricks. However I would highly suggest NOT to mix CSS selector types. Your DIVs should be named with class *flex-item*, not grid-item. I think this will cause confusion when grid properties are added to the Bricks builder. Still worth a big thumbs up ;)
I don't get it, I don't see Nice tutorialm make a lody in tNice tutorials video?
I think CSS grid > flex boxes
you refer to the class grid-items as flex-items thats confusioning
Children of a flex container are flex items. The class of the flex items can be called anything, I chose to call it grid-items.
@@DesignwithCracka that I do know so why name the class grid
@@mrnordjr The class name "grid-item" is just a generic name, refering to the english term "grid", nothing to do with CSS. But I understand it could be confusing to viewers...
@@readywhen that's what is said and meant
Flex-item would be more clear
@@mrnordjr just know that a "grid-item" class is conventional, descriptive naming, regardless of the css properties assigned
viru adobe acrobat crack ive in!!
hahsdhahah good
Sae