Тёмный

ACSS 101.02: Establishing & Manipulating Your Site's Content Width 

AutomaticCSS & Frames
Подписаться 4,7 тыс.
Просмотров 8 тыс.
50% 1

Content Width is the maximum width that you want content to be able to go when placed inside a default section container. It's important to establish a content width so that the vast majority of your content isn't too wide, too narrow, or random [ick].
Now, just because you've set a default content widht doesn't mean all content has to be that maximum width. We'll cover breakout content in a future lesson. We'll also cover adjusting element width on-the-fly in a future lesson.
Today's lesson is isolated to:
- What is Content Width
- Default Content Width
- The Content Width Class
- The Content width Variable
- "Content Width Safe"
- Manipulating Content Width for Pages/Templates/Sections
To be clear, this is not the technique for simply changing the width of specific elements on the fly. This lesson only relates to setting and manipulating the default content/containment width of a website.
---
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco

Развлечения

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 62   
@Headlikeanorange84
@Headlikeanorange84 5 месяцев назад
Pleasantly surprised to see lesson 2 uploaded so quickly after the first one. Thanks Kevin!
@philippepperell9951
@philippepperell9951 5 месяцев назад
Yet another great tutorial, Kevin, thank you. Any thoughts about when 3.0 might be out of beta?
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
2-3 weeks hopefully.
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
It's safe to use on new projects, just not completely safe to upgrade existing sites yet.
@curtm275
@curtm275 5 месяцев назад
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?
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
If you use containers in those areas yes
@dahunsi
@dahunsi 5 месяцев назад
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.
@isaurasotoca
@isaurasotoca 5 месяцев назад
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!! 🎉
@matthollub4977
@matthollub4977 5 месяцев назад
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!
@abdulwaheedorg
@abdulwaheedorg 5 месяцев назад
Thank you so much for uploading the 2nd tutorial so quickly.
@nostressirish2767
@nostressirish2767 2 месяца назад
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.
@AutomaticCSS
@AutomaticCSS 2 месяца назад
💪🏻
@michaelakubas
@michaelakubas 3 месяца назад
Hi Kevin, thank you for videos. One question, you talk about little icon in bricks builder, where I can turn on? Thank you.
@AutomaticCSS
@AutomaticCSS 3 месяца назад
Turn on what?
@Horatiu-w3g
@Horatiu-w3g 3 месяца назад
Hello, please help me! I can't see the shortcut for ACSS Panel. Can you help me understand how to enable it, please?
@AutomaticCSS
@AutomaticCSS 3 месяца назад
You mean the floating icon? It only shows up in the builder. On the front end you open ACSS with the admin toolbar link.
@christianmagill3829
@christianmagill3829 2 месяца назад
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?
@AutomaticCSS
@AutomaticCSS 2 месяца назад
Yes that’s usually the goal. It can easily be overwritten though in edge cases.
@LupusDesign
@LupusDesign 5 месяцев назад
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.
@davidwalls2304
@davidwalls2304 4 месяца назад
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.
@them00nitself
@them00nitself 4 месяца назад
Uh I need that math so bad. Is there an article for how content width, safe or narrow are calculated?
@AutomaticCSS
@AutomaticCSS 4 месяца назад
You set content width in the dashboard
@PeterHeck
@PeterHeck 5 месяцев назад
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...
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
No but it’s easier and faster in ACSS.
@PeterHeck
@PeterHeck 5 месяцев назад
@@AutomaticCSS Thanks - need to see, why this is not working when defining it in WPCodebox2...
@Giulo91
@Giulo91 3 месяца назад
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?
@AutomaticCSS
@AutomaticCSS 3 месяца назад
should work!
@Giulo91
@Giulo91 3 месяца назад
@@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?
@koperkuba
@koperkuba 5 месяцев назад
Nice tempo:)
@itspraveensharma
@itspraveensharma 5 месяцев назад
Great Tutorial ....
@backgrounds4everyone275
@backgrounds4everyone275 3 месяца назад
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
@AutomaticCSS 3 месяца назад
You mean when you right click a settings input?
@backgrounds4everyone275
@backgrounds4everyone275 3 месяца назад
@@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.
@backgrounds4everyone275
@backgrounds4everyone275 3 месяца назад
@@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. 😖
@AutomaticCSS
@AutomaticCSS 3 месяца назад
@@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 RU-vid.
@PapaG-0101
@PapaG-0101 5 месяцев назад
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. 🖖
@ceescoenen
@ceescoenen 5 месяцев назад
Thank you! Perfect showing all the principals.
@eucalyptech
@eucalyptech 4 месяца назад
Very useful, as I started to redesign my web site ! Thank you Kevin 🙂
@kristoffernygard7255
@kristoffernygard7255 5 месяцев назад
Thank you, Kevin! I'm learning so much each time :D
@nostressirish2767
@nostressirish2767 2 месяца назад
brilliant stuff kevin- thank you
@RobCooper
@RobCooper 5 месяцев назад
That was really great. I'm away for 2 weeks on a cruise so will be binging the next ones when I get back.
@PeterEller
@PeterEller 5 месяцев назад
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?
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
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.
@SiteswithNatalie
@SiteswithNatalie 5 месяцев назад
@kevin at 20:24 why did you use the "ch" as the content-width? Thank You!
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
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.
@alfian_ridwan
@alfian_ridwan 5 месяцев назад
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?
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
HugeIcons
@KshitijShah89
@KshitijShah89 5 месяцев назад
Lesson 2 already. Woohoo! Question - If you apply a body class, can you still have content break out?
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
For sure
@MusicJunkieVideos
@MusicJunkieVideos 5 месяцев назад
Super stuff thx
@TobiasGronbach
@TobiasGronbach 5 месяцев назад
Nice!
@alex_vie
@alex_vie 5 месяцев назад
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.
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
The right click menu is still available
@alex_vie
@alex_vie 5 месяцев назад
@@AutomaticCSS Great❤
@Jim.Hummel
@Jim.Hummel 5 месяцев назад
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!!
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
Yes, it's coming.
@AutomaticCSS
@AutomaticCSS 5 месяцев назад
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.
@Jim.Hummel
@Jim.Hummel 5 месяцев назад
@@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
@AutomaticCSS 5 месяцев назад
@@Jim.Hummel Which snippets do you mean?
@Jim.Hummel
@Jim.Hummel 5 месяцев назад
@@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.
Далее
13 Things To Remove From Your Website Immediately
12:33
Witch changes monster hair color 👻🤣 #shorts
00:51
Редакция. News: 136-я неделя
45:09
Просмотров 1,2 млн
ACSS 101.08: Color Scheme & "Dark Mode"
31:45
Просмотров 3,1 тыс.
Which Bricks Add-Ons? Part 1: Frameworks & Templates
36:49
2 better alternatives to overflow: hidden
11:04
Просмотров 157 тыс.
ACSS 101.09: Headers, Sticky Headers, & Offsets
27:15
ACSS 101.06: Color Palette Setup
28:19
Просмотров 5 тыс.
ACSS 101.05: Smart Spacing
26:49
Просмотров 4 тыс.
ACSS 101.01: Awesomeness Out of The Box
37:32
Просмотров 14 тыс.
Please stop using px for font-size.
15:18
Просмотров 170 тыс.
Mortar Fire Fail Compilation
0:51
Просмотров 62 млн
Как вам такой лайфхак?😂
0:11
Просмотров 2,3 млн