FIRST LOOK at CSS GRID controls in Bricks Builder - Fire or Flop?
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- Bricks 1.6.1 is now available and includes CSS Grid controls. Unfortunately, it's not via a beautiful Weblow-style UI as we had hoped. Rather, it's a fairly raw implementation that seems to require users to learn/know CSS Grid (unless you have the cheat code I'm going to show you in this video).
Turn that frown upside down, though, because this still an IMPORTANT and VALUABLE update. And if you're an ACSS user, you'll be able to use these new grid controls immediately without any learning curve whatsoever!
In this video I'll do a quick overview of the grid controls without ACSS, point out two major bugs in this initial implementation, and then demonstrate how you can use ACSS inside of these new grid controls right away (via ACSS 2.2).
The most important aspect of this release is that you can now assign grid structures, including ACSS grid structures, to custom classes. This dramatically improves scalability and maintainability of grids that appear in multiple locations on a site and is a much better practice than defining grids with utility classes in many cases.
If you don't own ACSS yet, get a copy here: automaticcss.com
And don't worry, I will be releasing a series of tutorials teaching the ins and outs of CSS Grid in the coming weeks, so even if you don't own ACSS you'll be comfortable using these new grid controls in Bricks!
Stay tuned my friends!
Please note: The grid variables shown in this tutorial are only available in ACSS 2.2, which is releasing later today. These variables were implemented earlier this month and the timing of Bricks 1.6.1 just kind of magically coincided with this, so it's a fantastic day for ACSS users!
what a coincidence...mind blown ! hahah, this is fantastic news!
You are the man!
The Hitch reference was spot on. I'm still chuckling. I don't know how many times I've told clients "No, don't do that". Thanks for another great tutorial!
Excited for the grid tutorials. I spent an afternoon a little while back going through a gamified program to learn it...I enjoyed seeing what is possible with it. It will be good to see your implementation into the workflow and best practices.
Hey Kevin! Thx for sharing this... Fantastic NEWs again for Bricks.
This update for me is just another great thing happening. Just another FIRE🔥
In the past weeks, I've conducted time learning how to do Grid via custom CSS & I did it pretty well THEN I hooked it with ACSS variables...So all of this is tremendously great.
I cross this by watching your previous videos showed a lot about these cases & more research.
Regards
P.S. I don't really care about the grid UI currently. It does the job ^__^.
Also, I support whatever they do with it in the future to keep these options available.
I never really got the webflows UI, this is much more straightforward for me. Love it!
Everyone thought it would be multiple choice, but it turned out to be a fill-in-the-blank question.
Excellent instruction. As I like to watch tutorials on my iPad Air, please consider closeups of the text areas. I cannot read any of the control titles as they are too tiny.
Uff! the blessings of simplicity, scratching my head over how to do things with cwicly grid builder and if only that thing had a simple box called grid template columns...
Another fantastic video, Kevin. I look forward to more tutorials on CSS Grid. I ❤ACSS!
Agreed - I like the current grid interface and hope they keep it along side any future custom UI. I'll still use ACSS for most purposes, but having the option to create more complex grids with standard CSS controls directly within the builder is wonderful.
Since I discovered your channel, my ENTIRE approach to web dev changed for the better. In just a few months, I've made tremendous progress! 🙏🏼 P.S: The Amazon Music icon being larger than the rest of the icons on your dock, triggers my OCD every single time! 😂😂
OMG me too. Why is that icon so aggressive?
Automatic CSS is an amazing product especially for us beginners using Bricks - Thank You!
Our pleasure!
The Grid builder in Cwicly is pretty neat btw...
Awesome informative video as usual keeping us up to date. As a version one it is an acceptable workflow for CSS Grid, allowing us to define the properties in a class level. Tried adding CSS Grid in Oxygen builder on the class level and it broke the grid.
Just listened to you on wp builds. Oh man, I'm getting automatic css today. Super excited!
Hope you enjoy it!
Alright Kevin... admit it! You're an alien from the planet Gridopia! Your mission is to scramble the brains of all the developers on earth who thought they were the masters of the treasures hidden away in the mystical grid system. The mission is completed when the former holders of these secrets succumb to your powers and purchase AutomaticCSS. Mission accomplished!
That is brilliant..
Grid is awesome.. Kevin Powell has a 4-hour training on Grid, which speaks to its potential complexity and use.
This UI actually works for me, as I started learning Grid when it first came out. But since I use ACSS and Frames, I don't see myself taking advantage of this too much.
Now, if I could get you to incorporate ACSS and Frames into Drupal, THAT would be immensely helpful for a project I'm working on at the moment. (And as long as I'm dreaming, I'd like a pony.) 😄
That sounds like a nightmare lol.
@@Gearyco You have no idea. I've told the client that I could already have the site finished if she would move it to WP, but she's a Drupaler from way back. (She's an old colleague of mine, and she pays well despite my inexperience, so I keep slogging on.) The just released Drupal 10 reportedly incorporates CSS Grid, so we will see. But it's taking me back to school, I'll tell you.
19:20 is when the ACSS tutorial starts btw.
@Gearyco I'm watching this for like the 4th time, this time I'm drinking coffee, and I get to "Can weeeee.. play with the children"
Not sure how many people know how HOT Starbuck's coffee is.. you don't wanna have an unexpected laugh right before sipping it!
Awesome! Thanks for creating this video overview.
My pleasure!
10:33 I hope you don't get demonetized for that 🤣
This video did. But it was worth it.!
Thanks for the quick (after release) and helpful video!
uhh - just found out that i can just use --space-m without var() :)
No, you can't use it without the var. Var definitely needed. Watch my screen closer ;)
@@Gearyco I guess what he meant (and I just saw in that video as well) is that you don't have to type it: Bricks adds it for you.
@@NelmediaCa Oh, that's not Bricks doing that, my friend. That's ACSS :)
@@Gearyco I guess it was a spoiler now that i saw the 2.2 video 😅
Thanks for sharing your knowledge, I have acquired automaticcss and frames because I am passionate about the way you teach and I want to acquire that learning curve.
I am new to css but I feel that it is much easier to understand with css utility classes and analyze the behavior of the elements.
💪🏻💪🏻💪🏻
Awesome job Kevin!
Great video as always 😊
bro you save me. Thanks really thanks.
Gold. Thank you! Waiting for ACSS to be released as a lifetime license. Any plans?
That ship sailed already :/
@@Gearyco Sad panda :(
Regarding Frames and accessibility
How should we approach the aria attributes on all templates if the site is not in English? Should we manually change all attributes to the language used on the site?
Yes they should be in the primary language of the target visitor
In your tutorial you were adding partially items like starting with "--grid-" and hitting return filled the rest in? Did I see that correctly? Tried to do it on my Bricks 1.6.1 install and was not able to duplicate that. What is happening here then? @19:30 (ish)?
You missed the latest ACSS update?
I moved this discussion to the group.
@12:34 Wouldn't it also be accurate to say the column count starts at "0" because the grid is an array?
No the grid never starts at 0. That’s why it’s a little confusing. The very left side of a grid container is line 1.
Great Grid intro! I noticed that it autocomplete the variables when you were writing the grid structure, is it part of ACSS or a Mac keyboard shortcut?
New ACSS feature :)
Is it possible to target the child elements when using a query loop? For example, I want the first column to span full width and the following elements to be 2 columns.
Yep! Not natively but easy with CSS. I have shown how in a couple other videos on this channel. maybe in oxygen with the repeater but same concept.
That’s great, thanks
Not sure if it's a bug but grid-auto seems to break in a query loop in Bricks 1.8 beta
Post a link in the group
Hey Kevin, how are you getting it to auto wrap the var? I upgraded acss thinking that was the trick, it wasnt. So what gives?? I want to put in --grid-3 and have it do the var() for me too. So whats your secret?
After upgrading you have to turn the feature on in options.
@@Gearyco ahh very cool, you should mention that in a future video, i think a lot of potential customers on the fence may find that not having to write the var() is worth the price of addmission alone. It seems everyone is afraid of actually writing any "code" lol. Great addition though, thanks.
@@jamesl.223 I already did a whole section of a video on it on the ACSS channel
Great! Thought we would have to wait for Bricks 1.7 (since it's a major thing)! Does that mean that you'll go through Frames and replace CSS custom code with that version of CSS Grid (i.e. fill the fields)?
Yes but not right away. Have to give people a chance to upgrade. And we have to wait for the bug fixes.
gracias por compartir tu conocimiento, he adquirido automaticcss and frames por que me apacionado la forma que la que enseñas y deseo adquirir esa curva de aprendizaje.
soy novato en css pero siento que es mucho mas facil comprender con clases de utilidad css y analizar el comportamiento de los elementos.
Kevin, with only ACSS will i be able to create the same kind of grids with containers overlapping two columns ans rows like you showed in the beginning of this video?
Yes, overlaps, spans, etc. are all doable purely with ACSS utility classes. It has full support for 12-column grid.
i dont now why is everybody so afraid of CSS.. when you are a webdeveloper, you need to learn css. There no way around it, and with a pagebuilder is much easyer to learn. That distinguishes us from amateurs.
You made me re-watch Hitch instead of learning CSS grid 😆
Not a bad use of time
Golden content as always 🎉
Thank You!
You're welcome!
whats the point of a GUI what you need to lookup the syntax and type settings in. Needs work.
?
So half a year later... still no "nice"-UI... maybe they leave it like this?
Yeah nothing wrong with it
How do you get bricks to automatically put the var() on input?
Upgrade to ACSS 2.2
My head already exploded into 24 pieces. Grid in Oxygen feels much easier to build. I'll wait until Bricks came up with some good interface to use them easily. Thanks
I like the bricks approach. Doesn’t have any limitations like oxygen does.
How did you implement the var bracket after typing in just the variable value in 19:27
Magic. Read the ACSS release notes later today ;)
Amazing. Will you update acss cheat sheet with the new variables too?
Yes
We have to type everything out. Ugh that's a bit tedious.
Often faster than a GUI if you know what you’re doing.
Thanks now I have to watch hitch lol
It's a shame, this is the first time I've been disappointed by a video. The title promises a detailed introduction to Bricks Builder's grid feature and not a promotional event for automatic.css.
Where in the title does it say detailed introduction to Bricks' grid feature?
Qtip, Qtip, throw it away.... 😂
The controls bug looks to only happen if the parent container has the grid defined on a custom class. The child containers controls appear whether they are on the id or a custom class as long as the grid on the parent is on the ID.
The truth is that I have always respected you within the Bricks community, however I had never seen your tutorials because they are all using ACSS (and I understand it) but this video taught me quickly and easily how to build CSS grid... Thank you really . 🥲😭
You’re missing out on so much great info that has nothing to do with ACSS. Subscribe and watch - ACSS is a tiny part of what I show.
Surely you are right, I said this because I saw 3 of your videos and in all of them you talked about "X" anything using ACSS (and I understand it) and I decided not to watch more.
But now that I was looking for how to make CSS grid I saw many videos and documentation and your video was the one that helped me understand the most, in fact your explanation was so simple that I now understand how to make CSS and I thank you.
I'm going to give the content another chance (which is in a language other than mine) because you use bricks and the explanation is clear, congratulations.@@Gearyco