I did not see that floating indicator in the bottom right without you pointing it out (this feature is sick btw). It would be super helpful if after installing a.css, users opening up the builder for the first time would be offered the choice to go through a short sequence of tutorial tips to accelerate the learning curve. Also, I just bought both of your products and I'm psyched to keep learning how to use a.css & frames through this series of videos. Cheers man, you rock!
Theory is one thing, but when you combine it with real world examples, this make one's understanding more than theoretical. Love the practical examples and the clarity of your delivery.
Great tutorial and introduction. Love the custom body class concept. Would love to see how to break out specific elements like images and block quotes in a blog post.
Always learning something new, even from the more basic lessons!! 😊 Thank you Kevin for doing all the great content you always do! Excited for the next one!! 🎉
In the tradition of all prior lessons (PB101 & ACS101), you start with the simple topics and make sure we have the foundation set before moving on to more complicated topics. Even though this was an early lesson, I've still picking up great ideas that I hadn't previously thought of.
I am really learning a lot about web best practices, and I recently upgraded to ACSS. I plan to use it on all future projects. I am also watching and building along with your build videos. All your videos really help to explain web best practices and the value of ACSS. Thank you very much for your time and sharing all the information that you do. Mad respect. 🖖
00:01 Automatic CSS allows flexible customization of content width. 02:15 Establishing a consistent content width is crucial for a good user experience on websites. 06:59 Establish content width for website's main pages. 09:15 Using 100% width and setting content width for website elements 13:09 Using the concept of content width safe to prevent content from touching the edge of the screen 15:05 Implementing content width using utility classes and custom classes. 18:56 Customize content width for multiple templates easily 20:36 Easily manipulate content width at template, page, and section levels 24:17 Utilize custom body class to define content width 25:59 Adjusting content width easily for different pages and templates Crafted by Merlin AI.
For long form content it’s best to set the width roughly by the number of characters in a line, since the focus is on the text. It ensures good readability even if text size changes.
This is great! I get so juiced from these videos...just like I started an IV drip with a caffeine syrup drip! I sure hope that there's a way to share ACSS configurations (export/import) as sharing SCSS snippets would be highly valuable. Thanks, Kevin!!
Right now you can share the export json for the entire dashboard if you want. But we're going to make it so you can export individual areas, like colors.
@@AutomaticCSS - Excellent! That makes sense but from this particular video, I was thinking specifically how convenient it would be to sync/share the SCSS snippets a la WP Codebox. Thank you, Kevin!
@@AutomaticCSS - Specifically, things like .content-width--narrow that I'd likely use globally, but PHP & JS scripts as well. I know it's not in your purview but I'd love it if ACSS could replace WPCodebox functionality. I'm thinking back to your Creating a Blueprint video where you added publicly available snippets with a couple of clicks.
Hi Kevin, is there a class that can set the section to 100% (specifically to have 100vw background) and have the inner container set as content-width dimension? I would like to be able to have full width backgrounds but not affect the content width size. I still want to have grid classes applied to the section, but have the inside containers limited to the content width.
The variable override on a class is something I didn't think of - easy to make custom width "templates" for reusability with classes. Also - the third tab on Arc's sidebar, "Icons", curious to know what icon sets do you use?
when i am trying to add the content-width--narrow class to the body it doesn't add the class literally it is not taking any class, anything to do with briciks settings? but works when i use custom code
Hi Kevin or anyone else who can help. I am following along to build my first project in Bricks and using ACSS. The variables are not coming up for me automatically and I am pretty sure I missed something. I looked in the manager and I only see the ACSS classes, no variables. Thoughts?
@@AutomaticCSS I typed the var (--content-width) in the width field for the container on theme settings and it did not auto populate as I was typing. I clicked to look in the class/variables manager and the classes were there but no variables. The width of the containers changes to what iI set it to in AutomaticCSS. This is my first time using so I am not sure if something was wrong.
@@AutomaticCSS I feel really dumb. But On the videos I saw Kevin typing the names of the variables and they were auto populating. When I typed them they did not auto populate and since I saw the category for automatic css in the class manager I assumed they would be stored in the variables manager and I didn't see them. Anyway, right clicking is how you work it and I should probably read directions. Thank you for responding and now I am on the right track. Even though I am pretty embarrassed. 😖
@@backgrounds4everyone275 Hmm. Please post details and perhaps a screenshot or screen recording in the support community and we can help you there pretty quick. Hard to do on RUclips.
Hi Kevin, can I create the narrow class and decrease the content-width value as a percentage so that if I change the content-width the narrow class adapts automatically?
hey how would this work on a site that I've already build with too many classes that I want to clean up and replace with ACSS classes? Also when is V3 being released?
Great tutorial again! But I would have a question please: Is the very helpful RMB context menu not available anymore? Do we have to go back to typing? It was amazing to work with.
Adding your .content-width--narrow utility class to Global SCSS, hitting save, saving the website and then trying to add that class to a section doesn't work. No class is made, bricks does not register the class being created at all. ACSS 3.2.9 with Bricks 1.11.1.1 w/ child theme. Fresh install, only other plugin is bricks navigator, fluentsmtp and litespeed cache. I should note that originally, absolutely everything didn't work at all with litespeed cache originally. Fresh out of the box the entire plugin was DOA. After a cache purge, it started working 15 minutes later. Now that I'm sitting here thinking about it, I'm going to purge it again and see if that class shows up. edit: Browser cache reset, wordpress cache reset and server cache reset. nothing changed, custom classes don't work.
You’re likely doing something wrong. We can help you if you post in the community. Also, doable all caching during development as a standard practice - no need for it.
@ Thanks for the heads up. I think this is cache related. The crew over on Circle said the same thing. It fixed my problem the first with a purge and I think it just needs completely disabled like you said. I’ll be doing that shortly. Cheers!
I'm trying to follow: I added ( --content-width: 60ch; ) i add it to utility. I see it in the utility. But it isn't working. In the CSS class OR in the saved Globaal CSS. UGH....
So I did an install of Bricks and ACSS + Frames on another website, and have realized, there is indeed a problem with my install on my first website. For some reason, it is not allowing me to create a Theme Style. Which I was able to do on my second website. I'm trying to figure out what the problem is now.
Ok. It is fixed now. What I had to do (incase anyone else has this problem) is to deactivate both ACSS and FRAMES) and then reactivated them. This fixed the bug. Not sure what I did wrong the first time.
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Pleasantly surprised to see lesson 2 uploaded so quickly after the first one. Thanks Kevin!
I did not see that floating indicator in the bottom right without you pointing it out (this feature is sick btw). It would be super helpful if after installing a.css, users opening up the builder for the first time would be offered the choice to go through a short sequence of tutorial tips to accelerate the learning curve. Also, I just bought both of your products and I'm psyched to keep learning how to use a.css & frames through this series of videos. Cheers man, you rock!
Theory is one thing, but when you combine it with real world examples, this make one's understanding more than theoretical. Love the practical examples and the clarity of your delivery.
Great tutorial and introduction. Love the custom body class concept. Would love to see how to break out specific elements like images and block quotes in a blog post.
Always learning something new, even from the more basic lessons!! 😊 Thank you Kevin for doing all the great content you always do! Excited for the next one!! 🎉
In the tradition of all prior lessons (PB101 & ACS101), you start with the simple topics and make sure we have the foundation set before moving on to more complicated topics. Even though this was an early lesson, I've still picking up great ideas that I hadn't previously thought of.
Thank you so much for uploading the 2nd tutorial so quickly.
I am really learning a lot about web best practices, and I recently upgraded to ACSS. I plan to use it on all future projects. I am also watching and building along with your build videos. All your videos really help to explain web best practices and the value of ACSS. Thank you very much for your time and sharing all the information that you do. Mad respect. 🖖
00:01 Automatic CSS allows flexible customization of content width.
02:15 Establishing a consistent content width is crucial for a good user experience on websites.
06:59 Establish content width for website's main pages.
09:15 Using 100% width and setting content width for website elements
13:09 Using the concept of content width safe to prevent content from touching the edge of the screen
15:05 Implementing content width using utility classes and custom classes.
18:56 Customize content width for multiple templates easily
20:36 Easily manipulate content width at template, page, and section levels
24:17 Utilize custom body class to define content width
25:59 Adjusting content width easily for different pages and templates
Crafted by Merlin AI.
💪🏻
That was really great. I'm away for 2 weeks on a cruise so will be binging the next ones when I get back.
Very useful, as I started to redesign my web site ! Thank you Kevin 🙂
Thank you, Kevin! I'm learning so much each time :D
Thank you! Perfect showing all the principals.
@kevin at 20:24 why did you use the "ch" as the content-width? Thank You!
For long form content it’s best to set the width roughly by the number of characters in a line, since the focus is on the text. It ensures good readability even if text size changes.
brilliant stuff kevin- thank you
Great Tutorial ....
This is great! I get so juiced from these videos...just like I started an IV drip with a caffeine syrup drip!
I sure hope that there's a way to share ACSS configurations (export/import) as sharing SCSS snippets would be highly valuable. Thanks, Kevin!!
Yes, it's coming.
Right now you can share the export json for the entire dashboard if you want. But we're going to make it so you can export individual areas, like colors.
@@AutomaticCSS - Excellent! That makes sense but from this particular video, I was thinking specifically how convenient it would be to sync/share the SCSS snippets a la WP Codebox. Thank you, Kevin!
@@Jim.Hummel Which snippets do you mean?
@@AutomaticCSS - Specifically, things like .content-width--narrow that I'd likely use globally, but PHP & JS scripts as well.
I know it's not in your purview but I'd love it if ACSS could replace WPCodebox functionality. I'm thinking back to your Creating a Blueprint video where you added publicly available snippets with a couple of clicks.
Hi Kevin, is there a class that can set the section to 100% (specifically to have 100vw background) and have the inner container set as content-width dimension? I would like to be able to have full width backgrounds but not affect the content width size. I still want to have grid classes applied to the section, but have the inside containers limited to the content width.
This is the default behavior for section elements.
The variable override on a class is something I didn't think of - easy to make custom width "templates" for reusability with classes.
Also - the third tab on Arc's sidebar, "Icons", curious to know what icon sets do you use?
HugeIcons
Lesson 2 already. Woohoo!
Question - If you apply a body class, can you still have content break out?
For sure
Hi Kevin, thank you for videos. One question, you talk about little icon in bricks builder, where I can turn on? Thank you.
Turn on what?
When you apply the content-width variable to the body in the template settings - does it also apply to the header and footer of the site?
If you use containers in those areas yes
When you change content width on the body class, wouldn't that also affect the header and footer if they are also restricted to the same width?
Yes that’s usually the goal. It can easily be overwritten though in edge cases.
when i am trying to add the content-width--narrow class to the body it doesn't add the class literally it is not taking any class, anything to do with briciks settings? but works when i use custom code
It’s not part of framework. I created it manually.
Hi Kevin or anyone else who can help. I am following along to build my first project in Bricks and using ACSS. The variables are not coming up for me automatically and I am pretty sure I missed something. I looked in the manager and I only see the ACSS classes, no variables. Thoughts?
You mean when you right click a settings input?
@@AutomaticCSS I typed the var (--content-width) in the width field for the container on theme settings and it did not auto populate as I was typing. I clicked to look in the class/variables manager and the classes were there but no variables. The width of the containers changes to what iI set it to in AutomaticCSS. This is my first time using so I am not sure if something was wrong.
@@AutomaticCSS I feel really dumb. But On the videos I saw Kevin typing the names of the variables and they were auto populating. When I typed them they did not auto populate and since I saw the category for automatic css in the class manager I assumed they would be stored in the variables manager and I didn't see them. Anyway, right clicking is how you work it and I should probably read directions. Thank you for responding and now I am on the right track. Even though I am pretty embarrassed. 😖
@@backgrounds4everyone275 Hmm. Please post details and perhaps a screenshot or screen recording in the support community and we can help you there pretty quick. Hard to do on RUclips.
Hi Kevin, can I create the narrow class and decrease the content-width value as a percentage so that if I change the content-width the narrow class adapts automatically?
should work!
@@AutomaticCSS I tried this --content-width: calc(var(--content-width) * 0.8) but it doesn't seem to work. What is the right way to do it?
hey how would this work on a site that I've already build with too many classes that I want to clean up and replace with ACSS classes? Also when is V3 being released?
How would which part work? If you want to clean up classes you've made, you can use the bricks global class manager for that.
Great tutorial again! But I would have a question please: Is the very helpful RMB context menu not available anymore? Do we have to go back to typing? It was amazing to work with.
The right click menu is still available
@@AutomaticCSS Great❤
Hello, please help me! I can't see the shortcut for ACSS Panel. Can you help me understand how to enable it, please?
You mean the floating icon? It only shows up in the builder. On the front end you open ACSS with the admin toolbar link.
Yet another great tutorial, Kevin, thank you.
Any thoughts about when 3.0 might be out of beta?
2-3 weeks hopefully.
It's safe to use on new projects, just not completely safe to upgrade existing sites yet.
Do I need ACSS 3.0 in order to define such new utility classes? Tried it in WPCodebox2 as SCCS snippet, but this doesn't work...
No but it’s easier and faster in ACSS.
@@AutomaticCSS Thanks - need to see, why this is not working when defining it in WPCodebox2...
Adding your .content-width--narrow utility class to Global SCSS, hitting save, saving the website and then trying to add that class to a section doesn't work. No class is made, bricks does not register the class being created at all. ACSS 3.2.9 with Bricks 1.11.1.1 w/ child theme. Fresh install, only other plugin is bricks navigator, fluentsmtp and litespeed cache. I should note that originally, absolutely everything didn't work at all with litespeed cache originally. Fresh out of the box the entire plugin was DOA. After a cache purge, it started working 15 minutes later. Now that I'm sitting here thinking about it, I'm going to purge it again and see if that class shows up.
edit: Browser cache reset, wordpress cache reset and server cache reset. nothing changed, custom classes don't work.
You’re likely doing something wrong. We can help you if you post in the community. Also, doable all caching during development as a standard practice - no need for it.
@ Thanks for the heads up. I think this is cache related. The crew over on Circle said the same thing. It fixed my problem the first with a purge and I think it just needs completely disabled like you said. I’ll be doing that shortly. Cheers!
I'm trying to follow: I added ( --content-width: 60ch; ) i add it to utility. I see it in the utility. But it isn't working. In the CSS class OR in the saved Globaal CSS. UGH....
I'm just moving on to the next section. I have repeated this one twice now. Same issues. :/
Please start a thread in support community and we can guide you
Nice!
Uh I need that math so bad. Is there an article for how content width, safe or narrow are calculated?
You set content width in the dashboard
Nice tempo:)
Super stuff thx
Again. I hit a snag. When I go to Settings>Theme Styles> (there is nothing there)
So I did an install of Bricks and ACSS + Frames on another website, and have realized, there is indeed a problem with my install on my first website. For some reason, it is not allowing me to create a Theme Style. Which I was able to do on my second website. I'm trying to figure out what the problem is now.
Ok. It is fixed now. What I had to do (incase anyone else has this problem) is to deactivate both ACSS and FRAMES) and then reactivated them. This fixed the bug. Not sure what I did wrong the first time.
Glad you got it sorted. Make sure you have read the set up docs. It’s also advisable to use our set up configuration files for bricks.