ACSS 101.07.P2: Background & Text Color (Contextual Approach + Auto Color Relationships)
HTML-код
- Опубликовано: 5 июн 2024
- 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 
Развлечения
Really a great approach! And the new panel is just so great with this preview!
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!
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!
That moment when it all clicks and you can't help but crack a smile
🎉
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!
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 !
I absolutely love the new workflow. This tutorial sheds a lot of light on the colour relationships in ACSS. Well done.
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!!
✈️
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.
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! ❤
Great approach, thank you Kevin 😉
Great job! 🔥
The layer of semantic color abstraction that we all needed. Thanks a ton Kevin and team ✅
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.
incredibly good!
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!
This is epic! Game changer
Abstracting colors, great approach.
But don't we need more than 2 darkness (or lightness) states? Dark, ultra-dark, less-dark, ... ?
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
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
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!
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.
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.