ACSS 101.03: Fluid Responsive, Scale-Based Typography
Вставка
- Опубліковано 1 тра 2024
- Automatic.css offers a fluid-responsive, scale-based typography system that works out of the box and is easy to customize for any and all design requirements.
In this video, you'll learn:
- Overview of heading vs text system
- How to set root font size
- How to set base heading and text size
- How to set type scale
- How the base size and type scale work together
- How to use heading and text variables
- How to calc sizes for granular control
- How to use heading and text classes
- How to manually override heading and text sizes
- How to manipulate typography on-the-fly
- How classes pass on all styling and not just type size
- How to use ACSS' scoped typography variables
Free training on relative units and root font size: • PB101: L05 - Static vs...
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 - Розваги
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 UA-cam 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!
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.
Well shucks!!! You answered every objection I had thought of with this!!
Guess its time to pony up some $$$
😁
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.
Brilliant, thank you, a big stumbling block averted
The man! The legend! :)
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.
I have finally understood the type scaling function. Thank you, Kevin!
Very powerful, thank you Kevin !
Kevin! You're doing great!
Thanks for making videos so quickly.
Mind Blown. Right Clicking menu is a very cool thing.
And the lessons keep on coming! Tyvm!
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.
Love the lessons!
Awesome....👏👏
Third one already! Holy cow. Love it and learning somethinig new everytime.
Another Gem 🎉 salute 🎉
Awesome series so far. I’m excited about the new 3.0 workflow!
Great to hear!
awesome!!!!
Amazing job in explaining, very very helpful
Glad it was helpful!
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?
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.
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.
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.
For some reason I don't get the Acss panel in my bricks builder...
Post in the community and we can help you
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
Hi Kevin, we still need to follow standard Heading sizes right when adjusting the value here?
You can use calcs if needed
@@AutomaticCSS Thanks!
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
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.
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