ACSS 101.07.P2: Background & Text Color (Contextual Approach + Auto Color Relationships)
HTML-код
- Опубликовано: 10 фев 2025
- In this lesson you'll learn the newer, more modern approach to managing background and text color on websites.
While this approach might take you some additional thinking to wrap your brain around, it's ultimately a better approach for three main reasons:
1. It's faster and removes the need to reference/remember specific colors and shades being used on any given project.
2. It's more flexible and maintainable because you don't have to commit to specific colors in your build process.
3. It has the advantage of ACSS's automatic color relationships feature.
---
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
I haven't come across any other software with such power combined with such an in-depth explanation of how to use it.
Truly, a creative approach for colours in ACSS. I don’t know how your thought processes developed to refine this unique concept, but its novel approach will lead to even more developments in ACSS. Thank you Kevin and Team! ❤
How often have I missed such a feature in the last 20 years of web design. Tested straight away, worked straight away. Thank you very much, really cool!
An impressive approach that actually provides additional benefits. I imagine designing the website in dark light ultra and, in the final phase, selecting the appropriate colors for the best version of the design. Nice, almost like drawing with a pencil on a white sheet of paper. Good work!
Brilliant software! I had no clue about this setup. I've just set up a new site like this. Can't wait!!!
Have fun!
That moment when it all clicks and you can't help but crack a smile
🎉
This is the first approach that I've seen to website color management that actually makes sense! Thanks to all of the ACSS team that have made this possible. Looking forward to seeing how far this concept can extend. Great job all!
Mind blown!!! The combination of Bricks with ACSS (and Frames!) is like going from a Cessna 172 to a Lancair IV-P (that's Nissan Sentra to Porsche Cayenne GTS).
Thank you Kevin and Team!!
✈️
I absolutely love the new workflow. This tutorial sheds a lot of light on the colour relationships in ACSS. Well done.
The layer of semantic color abstraction that we all needed. Thanks a ton Kevin and team ✅
Great approach, thank you Kevin 😉
I've started using contextual bg and text colors and this take such a load off my brain. Absolutely love it! Great concept from ACSS.
Really a great approach! And the new panel is just so great with this preview!
If I understand you correctly, you will be expanding the relationship colors that can be set so that headlines can be contextual and independent of the already contextual text color and then links, etc. If so, that will be a wonderful addition to applying the color design style of headline/text being light/light-muted.
The headlines are already impacted along with the text. The expansion would be for links and perhaps buttons.
Awesome tutorial thanks ! I recently used this system on a website combined with light/dark modes. It got me thinking a lot about contrast and optimizing the use of these automatic color relationships !
This is a great approach. I'll really need to wrap my head around this some more but I wish I knew about this for my last build in ACSS 2.8 (read some of the other comments). All kinds of great stuff coming our way!
Great job! 🔥
incredibly good!
This is epic! Game changer
Love it. Is there a way to also make this affect link colours?
Soon
Great video, does the next video 'Color Scheme & Dark Mode' not make contextual/auto color relationships redundant if using light/dark color schemes?
No need to answer, should have tested firstly. Amazing feature, bravo!
This is a huge change, a challenge, one has to get their head around it, it will take time…I will give it a go once 3.0 is live, in the mean time will work with Beta 3
This has been here since the 2.x series btw
If I use a custom class, could there be a way to tap into the auto Color Relationships using a data attribute instead of a utility class?
Hi Kevin, awesome videos from part 1 to 2 btw. But I just want to clarify that this approach only applies for colors and texts right? Also with this approach other stylings should still be handled via BEM method?
Yes
@@AutomaticCSS Thanks, looking forward for more ACSS 101 tutorials.
This is great!
Maybe need to add separate H and p colors on light/dark bg? And also accent colors on light/dark bg?
Probably - we are taking it slow since this is a concept nobody else has done yet.
@@AutomaticCSS Yes I know, but this is really awesome feature
Abstracting colors, great approach.
But don't we need more than 2 darkness (or lightness) states? Dark, ultra-dark, less-dark, ... ?
Hey Kevin .. I have a website done on the old system but my ACSS is upgraded to 3.0.7 but I still don't see Bg-Light or Bg-ultra light etc.. All I see is the old BG-base-ultra-light etc.. with the Trans 10-90 utility classes..
Ask in the community and we can help you.
When I right click on background it just says "background colors" and not "contextual background colors". Do I need to turn that on somewhere?
Ask in the community and provide a screen shot. We can help you there
@@AutomaticCSS Thanks. I was able to figure it out, I think I had to set something up in the palette first, then I saw the contextual colors.
Is there a way to integrate Overlays in the workflow... Although they're not technically backgrounds- .. for theming and relationship purposes, It would make things seamless
We are considering contextual overlays. The challenge is they aren’t always dark, are almost never light, and are often gradient.
So we might just go with .overlay as a programmable default overlay style.
@@AutomaticCSS - That's a great option that would maintain the flexibility yet offer speed.
Really great approach 👍🏻
OMG! nothing more to say.