Kevin's CSS mastery shines in his online classes. I've gained a solid understanding of complex styling concepts, all thanks to his patient and well-structured lessons
i love you too. your content win over a night at the movies. just a tip: copy the text even if it’s all caps, paste it, select all and right click, then select transform on the mac contextual menu. you can set it on uppercase, lowercase, whatever you want, in a snap. also curious about why not using a grid acss class instead of writing the code, but i’m not an expert on bricks, just playing around and using now for my first real world website. i also missed the final PEACE. always on pint kevin!
Hey Kevin! Wanted to thank you for this video. Love your focus on workflow - I see so much talk about Tailwind and trends and specific tech choices but IMO *THIS* is where the gold is. I started using ACSS recently, and can't wait to get familiar with it and implement these techniques. Cheers!
New Inner Circle member here. I'm curious for your thoughts on adjusting the workflow in this video somewhat. I have an innate aversion to setting styles in a GUI. To me, Brick's sole purpose, function, and value is for the structure, and assigning classes. That's it. Then, all styling would happen in my SCSS partials in WPCodeBox; utilizing, of course, AutomaticCSS variables along the way. This is the path I intend to venture down on an upcoming build. Curious for your input as to this workflow's longterm viability and sustainability. I appreciate you!
Thanks for another great tut! I understand that the general idea is to style as much as possible in the Bricks panel and use a scss snippet in WPCodeBox for the rest. Just wondering if there are specific cases when the power of sass/scss is advantageous even when the particular style could be set directly in the Bricks panel?
If it's basic styling of a few things, it's faster in the builder. If it's more advanced, especially if it includes parent/child relationships, pseudo elements, hovers, etc. then it's MUCH more efficient to do it in WPCB.
Fantastic video Kevin and so damned helpful. Just one thing, you mix and match setting up the classes in Bricks and in SCSS (wpcodebox), would you advocate doing your custom classes completely in SCSS or is mixing OK? Cheers dude
Good question. There are pros and cons to either method. I might have to do a video about that. If you tend to do almost everything in bricks though, I’d stick to that.
One thing that sometimes bogs me down is if I'm doing all these components with BEM, and then I do want to copy or re-use, then I have to rebuild the structure and then add all the classes in. Of course, this is solved if the entire module or row or container or whatever can be saved as an individual template or reusable block. If I come back to a site months later, there is no simple/easy way to get an overview of all the global components, reusable components, component classes etc. I have to create something like a design guide or a readme and try and document all the classes. I don't know if there is any easier way to "remember" all the classes, elements, globals. Like maybe you want to create a thing and don't even realize a set of BEM classes already exists, because that "thing" was only used on one or two obscure pages that I didn't see when looking for a reusable element. In any case, some kind of style guide or documentation of components and elements is very helpful. Another thing that bogs me down are elements that have too many variations. Like a button. I had a site where they used both solid and outline buttons, 3 different primary colors, along with alternate colors when over light or dark backgrounds, different sizes and widths, and alternate hover colors which also change based on what background color the button is over. I started with variations like "--solid1", "--solid2", etc. Then "--outline1", "outline2", to cover different colors. But then all these modifiers grew and grew and became very annoying dealing with something like 15 different button variations changing each aspect of the button. It's almost like, even though the button was "global", each instance of it had some random variation that it needed. Probably nothing can be done about such things, it is what it is. Thanks for the reminder to stick with standard practices!
In the Card example you placed the background image as an actual background in css (instead of inserting an actual image and using absolute and realtive, etc.). I assume this is fine from a coding standards perspective as it is a small decorative image that adds no real value? (so no real worries about alt tag or srcset)
I am at Minute 28 and while watching i came across four things for now: 1. For someone who is not familiar with it, suddenly "WPCodeBox" Pops up and you sit there and ask yourself what now, do i need this also, is it necessary? 2. When you type in the variables, it would be helpful if you take the input coursor away from the input field so it is easier to follow what you exactly type :) 3. When i set the hero__accent-heading HTML Tag to "paragraph" i'll get a gap between the accent heading and the hero heading and this does not happen to you. 4. When giving the hero heading the "var(--width-m)" it looks completely different for and still only has two rows. I'm sorry if i might spam some of your videos, its just to help me and other newbs get over some problems that may occur. And its good for the algorith :p Thanks!
@@AutomaticCSS Thanks alot! And btw: Sorry for some of my stupid comments. After i researched for longer i found out all the stuff myself with WPCodeBox etc. It took awhile, but now i know. :D
Kevin's CSS mastery shines in his online classes. I've gained a solid understanding of complex styling concepts, all thanks to his patient and well-structured lessons
This content was totally KING 👑👑👑❤ I learned a lot!!!
i love you too. your content win over a night at the movies.
just a tip: copy the text even if it’s all caps, paste it, select all and right click, then select transform on the mac contextual menu. you can set it on uppercase, lowercase, whatever you want, in a snap.
also curious about why not using a grid acss class instead of writing the code, but i’m not an expert on bricks, just playing around and using now for my first real world website.
i also missed the final PEACE.
always on pint kevin!
I’ll give it a shot!
It must be finally sinking in for me as I was able to play the video at standard speed😁
💪🏻
A really helpful sum up of what you taught us throught all your previous build tutorials. Thank you Kevin !
Watching this fir the third time… great job, thanks
💪🏻
Hey Kevin! Wanted to thank you for this video. Love your focus on workflow - I see so much talk about Tailwind and trends and specific tech choices but IMO *THIS* is where the gold is.
I started using ACSS recently, and can't wait to get familiar with it and implement these techniques.
Cheers!
yep, sustainable workflow is everything!
Great stuff, thanks for sharing!
exemplary and sophisticated... waiting on next one📍
Time stamp 41:00... my husband's name is Bob Ross 🤣 But he's a dorky engineer running around with a pocket protector, lol.
Ok, you’ve convinced me to do things right and ditch non-pro builders.
New Inner Circle member here. I'm curious for your thoughts on adjusting the workflow in this video somewhat. I have an innate aversion to setting styles in a GUI. To me, Brick's sole purpose, function, and value is for the structure, and assigning classes. That's it. Then, all styling would happen in my SCSS partials in WPCodeBox; utilizing, of course, AutomaticCSS variables along the way. This is the path I intend to venture down on an upcoming build. Curious for your input as to this workflow's longterm viability and sustainability. I appreciate you!
Yes, that workflow is fine, but you probably need dual monitors to make it efficient or you'll be switching tabs constantly.
Thanks for another great tut!
I understand that the general idea is to style as much as possible in the Bricks panel and use a scss snippet in WPCodeBox for the rest. Just wondering if there are specific cases when the power of sass/scss is advantageous even when the particular style could be set directly in the Bricks panel?
If it's basic styling of a few things, it's faster in the builder. If it's more advanced, especially if it includes parent/child relationships, pseudo elements, hovers, etc. then it's MUCH more efficient to do it in WPCB.
Fantastic video Kevin and so damned helpful. Just one thing, you mix and match setting up the classes in Bricks and in SCSS (wpcodebox), would you advocate doing your custom classes completely in SCSS or is mixing OK? Cheers dude
Good question. There are pros and cons to either method. I might have to do a video about that. If you tend to do almost everything in bricks though, I’d stick to that.
@@AutomaticCSS - now that would be awesome :D. I shall keep my fingers crossed for that one.
One thing that sometimes bogs me down is if I'm doing all these components with BEM, and then I do want to copy or re-use, then I have to rebuild the structure and then add all the classes in.
Of course, this is solved if the entire module or row or container or whatever can be saved as an individual template or reusable block.
If I come back to a site months later, there is no simple/easy way to get an overview of all the global components, reusable components, component classes etc. I have to create something like a design guide or a readme and try and document all the classes. I don't know if there is any easier way to "remember" all the classes, elements, globals. Like maybe you want to create a thing and don't even realize a set of BEM classes already exists, because that "thing" was only used on one or two obscure pages that I didn't see when looking for a reusable element.
In any case, some kind of style guide or documentation of components and elements is very helpful.
Another thing that bogs me down are elements that have too many variations. Like a button. I had a site where they used both solid and outline buttons, 3 different primary colors, along with alternate colors when over light or dark backgrounds, different sizes and widths, and alternate hover colors which also change based on what background color the button is over.
I started with variations like "--solid1", "--solid2", etc. Then "--outline1", "outline2", to cover different colors. But then all these modifiers grew and grew and became very annoying dealing with something like 15 different button variations changing each aspect of the button. It's almost like, even though the button was "global", each instance of it had some random variation that it needed.
Probably nothing can be done about such things, it is what it is.
Thanks for the reminder to stick with standard practices!
next kevin plugin: keeps track of everything and remembers it for you.
Bricks has a wonderful template library system. Sounds like you should definitely start exploring that.
In the Card example you placed the background image as an actual background in css (instead of inserting an actual image and using absolute and realtive, etc.). I assume this is fine from a coding standards perspective as it is a small decorative image that adds no real value? (so no real worries about alt tag or srcset)
Correct.
I am at Minute 28 and while watching i came across four things for now:
1. For someone who is not familiar with it, suddenly "WPCodeBox" Pops up and you sit there and ask yourself what now, do i need this also, is it necessary?
2. When you type in the variables, it would be helpful if you take the input coursor away from the input field so it is easier to follow what you exactly type :)
3. When i set the hero__accent-heading HTML Tag to "paragraph" i'll get a gap between the accent heading and the hero heading and this does not happen to you.
4. When giving the hero heading the "var(--width-m)" it looks completely different for and still only has two rows.
I'm sorry if i might spam some of your videos, its just to help me and other newbs get over some problems that may occur. And its good for the algorith :p
Thanks!
Turn on "fix paragraph spacing" in the ACSS typography dashboard. That'll fix your paragraph issues. They're caused by page builder default styling.
@@AutomaticCSS Thanks alot!
And btw: Sorry for some of my stupid comments. After i researched for longer i found out all the stuff myself with WPCodeBox etc. It took awhile, but now i know. :D
What is the difference between ACSS and OxyProps?
Are there advantages in ACSS?
Yes, there are many differences. I'll probably do a video/article detailing them at some point.
OFF-Topic. Which local server app are you using?
Local by flywheel