Yes, but now I don't have any time to watch my Netflix stuff what with all the new faces I am seeing on Bricks related RUclips channels. It's ok though, none of them look like Ripley!
The last section about mapping the variables without using utility classes is super helpful. There’s always something in these lessons to take away, even if you think you know what it’s about!
omg is it Christmas season already? 😂 Seriously though, this rocks. I hope this makes the inner workings clearer for everyone. And the behaviour where you can just set the override for one “end” and have the plugin work out the rest… *chef kiss* right there.
Help this lost person find her way... At 2:13, you rec setting root font size to 100% (for newbies) However, in your YT vid for Setting up a Bricks Blueprint Site, ruclips.net/video/hbwO0J9OPZs/видео.htmlfeature=shared At around 44:46 you reference "leaving the root font size at 62.5% If I'm following PB101, and then ACSS101, which is the best practice to follow for both?
The last section was another light bulb moment - who knew ACSS could do that, then again, why should I be surprised. ACSS does so much for the developer.
At 21:31 in the video, you say, "Everything in this list has a variable attached to it.", but it's not obvious what the variable names are. Why not have an icon next to each input field so we can easily copy the variable names?
The variable names exactly match the label text. We will likely add the variables to the right click menus at some point. I’m also adding a recipe to make it even easier to apply the variables in a split second. We have to make sure the dashboard doesn’t get cluttered with icons.
What is the process for using ACSS in Breakdance when entering var(--h1) * 1.5 ? After hitting enter, the var is not auto changed to a cal, and there are no changes made. Also, when I right click I do not get the ACSS popup window like you show in this video. What am I missing? Thanks
Hey Kevin, thanks for the video. I'm confused with the root font size. In PB101 there's no discussions of beginners/intermediates should use 100% and pros should use 62.5%. The only thing discussed there is 62.5% makes the math easier since 1rem = 10px in that case. Can you elaborate on this? Wouldn't setting it to 100% for beginners/intermediate just make it more complex since they have to calculate in 16px?
I have Advanced Themer for my default stack for bricks-websites. in there I can create custom typographie-classes/variables with a min and max value (maybe I just need an extra realy big size for heros, or something, but also fluid). could I do the same the ACSS? creating extra custom font-sizes with your fluid-logic, but not bound to the existing heading-/text-sizes you showed here?
Curious about orphans here. When you cycle through the scales and the H1 breaks into the next line, why does it leave an orphan? I can see on the ACSS panel it says text wrap is pretty. Obviously this is just an example, but I'm building along with the course and my H1 also creates an orphan, but the text does not.
Thank you, Kevin! I have a question: What if I'm working on a multilingual website, and one of the languages is in a different direction, such as Arabic, which is right-to-left (RTL)? Now I have a website with two languages and two different text directions. Your explanations are always enjoyable and effective, and I always learn something new.
Another great run-through. Kevin I have a question I have been meaning to ask for a while… it may be a felony. Say you have a content width of 1280 pix but you want to control the fluid nature just up to 1100px; once the content hits that width the text and headings have reached thier maximum. I don't think the sandboxes are available yet. Is this correct?
@@AutomaticCSS Thanks Kevin. Is it desirable? The reason I was thinking is say you are happy with the text being at it's largest, once the content hits a certain content width and after that it's big enough for wider widths? Is that problematic? I'm not sure? Perhaps something to mention not to do if it's a daft idea?
@@vaughanprint It should be at its largest when the content is at its full content width. It stops growing after that anyway, so just make the desired value at full content width?
@AutomaticCSS Why px as reference unit? Why can't we have rem as reference unit? I find it confusing to have to enter px when I want rem. Like this, we only see what we get when looking at the final converted code. Why can't we see it right there? In Core Framework, e.g., conversion is optional. I have set font sizes in rem for a long time, having to set them in px again feels like a step backwards.
There is this video of our great teacher of CSS: ruclips.net/video/cwfxZRLqyus/видео.html ... preaching "DON'T USE PX!", and I 100% agree with everything he says there. Then I look at ACSS and see px everywhere. I hope you understand my confusion.
WOW! I'm in the process of removing ACSS classes (still on 2.8) because I use variables and I want the size to be as low as possible... Then, I see what you do when you compare using the text size of h1 vs using the h1 class and I'm thinking: "hmm, maybe I should keep it... Is it worth it for the added size (of CSS and maybe JS)?"... And then, you show that (at least in v.3) all can be done by referencing the h1 stuff (like h1-text-size and so on)! So, back to saying that I should then disable it... But, the question is: Is it worth it? If enabling the typography classes adds, let's say 1kb or less, it's probably not worth it at all... And this is the dilema: I have found that ACSS does add to the weight of the page (though for all it's benefit it is absolutely worth it, I'm trying to keep it as small as possible)... Toggling on the Pro mode does leave a lot of stuff on that I'm not sure it's worth it and can also leave some that I use (like link colors) deactivated... I also heard you on a live stream comparing what takes more weight like flex-grids... Is there (or will there be) a video or chart about the weight of each module OR a video about what are the best settings to use of we mainly use variables (but some classes would be good to keep)? Great work!
@@AutomaticCSS yes, of course! I guess my question wasn't clear... Should we remove everything (i.e. disable) and just go with variables (except maybe a couple of things like grids)? Where is the line between weight and improving development...? Just a matter of preference or there is a "best options"? Again, don't know if Pro mode is what YOU usually use, or you are more aggressive in disabling the options (again, you did mention flex-grids are heavy, but what about the rest)?
you said you planned on doing one of these per week, and we get 3 the first week? legend. keep it up brother, mega helpful vids!
A new episode of ACSS101 every day. Who needs Netflix anymore? Thank you for this great tool and the entertaining videos!
Yes, but now I don't have any time to watch my Netflix stuff what with all the new faces I am seeing on Bricks related RUclips channels. It's ok though, none of them look like Ripley!
I knew how this system worked, but being able to see it and dial it in is such a huge improvement. I see beta 2 on your screen... coming soon I hope.
I have finally understood the type scaling function. Thank you, Kevin!
The last section about mapping the variables without using utility classes is super helpful. There’s always something in these lessons to take away, even if you think you know what it’s about!
Love the flexibility of the text properties through tokens. Simply fantastic. Like I said, ACSS is the gift that keeps giving.
Thank you for the in-depth explanations - the insights into what ACSS is actually doing helps clarify so much.
Love the explanation of tokens. Another example of a golden nugget, Kevin.
omg is it Christmas season already? 😂
Seriously though, this rocks. I hope this makes the inner workings clearer for everyone.
And the behaviour where you can just set the override for one “end” and have the plugin work out the rest… *chef kiss* right there.
Kevin! You're doing great!
Thanks for making videos so quickly.
The man! The legend! :)
Awesome series so far. I’m excited about the new 3.0 workflow!
Great to hear!
Help this lost person find her way...
At 2:13, you rec setting root font size to 100% (for newbies)
However, in your YT vid for Setting up a Bricks Blueprint Site,
ruclips.net/video/hbwO0J9OPZs/видео.htmlfeature=shared
At around 44:46 you reference "leaving the root font size at 62.5%
If I'm following PB101, and then ACSS101, which is the best practice to follow for both?
100%
The last section was another light bulb moment - who knew ACSS could do that, then again, why should I be surprised. ACSS does so much for the developer.
Third one already! Holy cow. Love it and learning somethinig new everytime.
Very powerful, thank you Kevin !
At 21:31 in the video, you say, "Everything in this list has a variable attached to it.", but it's not obvious what the variable names are. Why not have an icon next to each input field so we can easily copy the variable names?
The variable names exactly match the label text. We will likely add the variables to the right click menus at some point. I’m also adding a recipe to make it even easier to apply the variables in a split second. We have to make sure the dashboard doesn’t get cluttered with icons.
Brilliant, thank you, a big stumbling block averted
Well shucks!!! You answered every objection I had thought of with this!!
Guess its time to pony up some $$$
😁
And the lessons keep on coming! Tyvm!
What is the process for using ACSS in Breakdance when entering var(--h1) * 1.5 ? After hitting enter, the var is not auto changed to a cal, and there are no changes made. Also, when I right click I do not get the ACSS popup window like you show in this video. What am I missing? Thanks
Variable expansion doesn’t work in breakdance yet. You probably need to write the Calc manually.
Amazing job in explaining, very very helpful
Glad it was helpful!
Love the lessons!
Hey Kevin, thanks for the video. I'm confused with the root font size. In PB101 there's no discussions of beginners/intermediates should use 100% and pros should use 62.5%. The only thing discussed there is 62.5% makes the math easier since 1rem = 10px in that case. Can you elaborate on this? Wouldn't setting it to 100% for beginners/intermediate just make it more complex since they have to calculate in 16px?
It makes the math harder but ACSS has multiple auto rem converter features so you don’t have to do any math.
I have Advanced Themer for my default stack for bricks-websites. in there I can create custom typographie-classes/variables with a min and max value (maybe I just need an extra realy big size for heros, or something, but also fluid).
could I do the same the ACSS? creating extra custom font-sizes with your fluid-logic, but not bound to the existing heading-/text-sizes you showed here?
There’s no need. You’re likely just making extra mess.
@@AutomaticCSS sad to hear tbh
Simply awesome. One question. @20:35 is this a bug of the builder?
I'm not really sure what happened there. I removed a class from an element and the builder didn't seem to respond accordingly.
Curious about orphans here. When you cycle through the scales and the H1 breaks into the next line, why does it leave an orphan? I can see on the ACSS panel it says text wrap is pretty. Obviously this is just an example, but I'm building along with the course and my H1 also creates an orphan, but the text does not.
Is this after save and reload page as well?
Awesome....👏👏
Thank you, Kevin! I have a question: What if I'm working on a multilingual website, and one of the languages is in a different direction, such as Arabic, which is right-to-left (RTL)? Now I have a website with two languages and two different text directions. Your explanations are always enjoyable and effective, and I always learn something new.
ACSS is RTL compatible but bricks isn’t, last time I checked.
For some reason I don't get the Acss panel in my bricks builder...
Post in the community and we can help you
Another Gem 🎉 salute 🎉
Hi Kevin, we still need to follow standard Heading sizes right when adjusting the value here?
You can use calcs if needed
@@AutomaticCSS Thanks!
Another great run-through.
Kevin I have a question I have been meaning to ask for a while… it may be a felony. Say you have a content width of 1280 pix but you want to control the fluid nature just up to 1100px; once the content hits that width the text and headings have reached thier maximum.
I don't think the sandboxes are available yet. Is this correct?
Is there a reason that would be desirable? I’ll test sandbox today.
@@AutomaticCSS Thanks Kevin. Is it desirable? The reason I was thinking is say you are happy with the text being at it's largest, once the content hits a certain content width and after that it's big enough for wider widths? Is that problematic? I'm not sure? Perhaps something to mention not to do if it's a daft idea?
@@vaughanprint It should be at its largest when the content is at its full content width. It stops growing after that anyway, so just make the desired value at full content width?
@@AutomaticCSS Will do.
Why are font sizes set in px rather than rem? Is there a way to switch to rem? I'd rather not have to think in and set things in px anymore.
Nothing is set in pixels. Pixels is just a reference unit. Everything is converted to rem for you.
@AutomaticCSS Why px as reference unit? Why can't we have rem as reference unit? I find it confusing to have to enter px when I want rem. Like this, we only see what we get when looking at the final converted code. Why can't we see it right there?
In Core Framework, e.g., conversion is optional.
I have set font sizes in rem for a long time, having to set them in px again feels like a step backwards.
There is this video of our great teacher of CSS: ruclips.net/video/cwfxZRLqyus/видео.html
... preaching "DON'T USE PX!", and I 100% agree with everything he says there. Then I look at ACSS and see px everywhere. I hope you understand my confusion.
Should I use v3.0-beta-1.1 or 2.x for new website ?
Doesn’t really matter. Just keep updating as they get released.
awesome!!!!
Why is h4 chosen as the base heading size?
It's my understanding that by default in HTML H6 tracks with 1rem.
If you create 6 text sizes and put them next to the six heading sizes, “M” and H4 are in the same position
LMAO ---> moving to the prerequiste course.
Is there no recipe to style a heading exactly like an h1? Adding all these tokens manually seems tedious and unnecessary
It’s coming
WOW! I'm in the process of removing ACSS classes (still on 2.8) because I use variables and I want the size to be as low as possible...
Then, I see what you do when you compare using the text size of h1 vs using the h1 class and I'm thinking: "hmm, maybe I should keep it... Is it worth it for the added size (of CSS and maybe JS)?"...
And then, you show that (at least in v.3) all can be done by referencing the h1 stuff (like h1-text-size and so on)! So, back to saying that I should then disable it...
But, the question is: Is it worth it? If enabling the typography classes adds, let's say 1kb or less, it's probably not worth it at all...
And this is the dilema: I have found that ACSS does add to the weight of the page (though for all it's benefit it is absolutely worth it, I'm trying to keep it as small as possible)... Toggling on the Pro mode does leave a lot of stuff on that I'm not sure it's worth it and can also leave some that I use (like link colors) deactivated... I also heard you on a live stream comparing what takes more weight like flex-grids... Is there (or will there be) a video or chart about the weight of each module OR a video about what are the best settings to use of we mainly use variables (but some classes would be good to keep)?
Great work!
Nothing has to be removed manually. If you turn off the classes in the dashboard, they're not loaded in the stylesheet.
@@AutomaticCSS yes, of course! I guess my question wasn't clear... Should we remove everything (i.e. disable) and just go with variables (except maybe a couple of things like grids)? Where is the line between weight and improving development...? Just a matter of preference or there is a "best options"? Again, don't know if Pro mode is what YOU usually use, or you are more aggressive in disabling the options (again, you did mention flex-grids are heavy, but what about the rest)?
@@NelmediaCa A lot of it is preference. I turn off more than pro mode does.
I see you're using beta 2, while we are still on 1.1, that's messed up lol
Someone has to test it!
Please take some break to let us digest one per week!
Just watch one per week