AUTOMATIC.CSS Fluid Typography (Scales, Classes, and Variables)

0:00:00
What’s up everybody welcome back in this video we’re going to look at fluid responsive typography and automatic.css. Typography is one of those things where it can be very difficult to manage right now in oxygen builder when you’re first setting up a website you’re kind of asked like what do you want the heading one size to be what do you want the heading two size to be and so on and of course those values aren’t responsive in any way shape or form so you end up having to do stuff at different break points or create your own custom classes because oxygen’s you know default settings don’t even allow for editing at break points automatic css is going to fix all of your typography issues for you it’s completely responsive automatically it’s automatically scalable which I’m going to demonstrate for you here and you’re also able to do a lot of custom work without losing the power of automatic that css. So let’s go ahead and dive into the oxygen builder and we’ll take a look at some use cases here. So the first thing that I want to show you is right out of the box without doing any setup work in oxygen other than setting the line height which eventually we’re probably going to take care of that automatically as well but right out of the gate right out of the box without any setup without any work you have perfectly scaled headings and perfectly responsive headings.

0:01:20
So you’re not asked to set a heading size for any level now I don’t want you to worry you do have complete control over this it’s just that right from the bat you’re not asked to do anything it’s automatically ready to rock and roll for you. So if I change this to heading number one whoops heading number one is this and then I’m just going to duplicate that duplicate duplicate duplicate duplicate so this is going to be heading number two this is going to be heading number three this is going to be heading number four this is number five and this is our final heading number six and then what I’m going to do is just put a little owl spacing on here to space those out and then I just change the tags so from H1 to H2 this one goes to H3 this one goes to H4 there’s no classes involved you don’t have to put classes on your headings you get perfectly scaled typography that is automatically responsive so I will go down and you can see on mobile devices it looks fantastic okay so those are the headings now the text sizes work exactly the same way these do require classes obviously because there’s no changing the the tags so when I add a text module for example you know there’s there’s nothing else really to choose from like it’s it’s text so what I’m going to do here is just say this is XXL text and then why don’t we go ahead and do the same owl M on here and then I’m going to duplicate that one two three four five so we’re going to have XL text we’re going to have L text we’re going to have M text and we’re going to have S text and we’re going to have X let’s do extra extra small we’ll write up the name just we can get a little extra text in our life medium large and this is going to be extra large and then this is going to be extra extra large text okay so now I just go ahead and put my classes on now what’s cool is the text sizes automatically pretty much match the heading sizes so we’re going to go with text XXL that’s going to give us extra large text text XL is going to give us that extra large text we have text L for the large text next would be text M which you’re going to notice doesn’t do anything because text M is actually the default and then we’re going to go text S that’s going to give a small text and then text XS is going to give us that extra small text and it’s all going to be perfectly responsive as well awesome so now we’ve looked at headings and text I’m going to show you changing the scale and manipulating all of this in just a moment so easy to do but first let’s take a look at custom heading classes because there are times where you might have two different headings one of them is like an SEO heading and one of them is a marketing heading so the marketing heading we have would be like an h2 because that’s not really the SEO heading the SEO heading needs to say at an h1 but we want the marketing heading to be bigger than the SEO heading so what I can do is actually assign custom classes to these so this custom heading class this is what we’re going to call this SEO heading goes here and then this is a much longer marketing heading to really sell the service something like that okay and what we need is this SEO juicy h1 just to be kind of smaller and off to the side whereas the marketing heading is really what’s out there you know grabbing people’s attention okay so what we’re going to do here is we’re going to just add a class this is going to be called marketing heading actually that one’s the SEO heading so we’ll do SEO heading and then we have marketing heading all right so let’s add that marketing heading class perfect now all we have to do on SEO heading and again this is let me reiterate this is where other utility class systems lose you an automatic does the assess does not lose you you can still hook into the power of automatic CSS so all I have to do with this SEO heading selected remember I want this one to be smaller we’re going to go font size none we’re just going to use one of the variables and all of these match the classes right so if I want that to be small text I can do that or maybe I want it to be medium text I can put the text in there and then this one I can actually bump up to be the XXL text okay so we’re going to do var text XXL and then I have that nice large heading put a little margin on the bottom of this and we have a little spacing between them so now I have an h1 that you know looks smaller but it still has that SEO value I have the h2 that actually is the size of the normal h1 and I’ve achieved exactly what I wanted without losing the power of automatic because that is all still you know nice and responsive as you can see and notice that I’m not having to make any decisions like what rims should this heading be or what how many pixels should this heading be we’re not using pixels anyway because it’s not accessible but you’re not really making any decisions your decisions are are focused now on do I want to be medium large extra larger extra extra large that’s it right that’s all in decision you have to make and if you choose one doesn’t look great just choose the other one and then you don’t have to do anything at break points everything is automatically responsive so all you’re making a very simple decision and then moving on with your life and you even when you go custom right you still have the power of hooking into the automatic dot css system we can do the same thing when we create fully custom elements so for example if I was going to do a card right so I’ll create a little card real quick and we’ll have our own custom sizes for things on the card so first thing I’m going to take this container and we’re going to make it an auto grid all right so I’m going to do grid auto three so it’s going to be a three column auto grid I’m going to put a div in there I’m going to duplicate it a couple times and I’m going to put a gap between these items real quick awesome all of that is automatically responsive by the way I’m going to put a background color on here real quick so we’re going to go with base we’ll do base ultra we’ll do base ultra light and then I’m going to do a heading in this card I’m going to do text in this card I’m going to do a button in this card awesome all right now what I’m going to do is inside that card I’m just going to add some padding now remember this is going to be a custom card right so I’m going to do custom card and then I’m going to come to size and spacing and here’s what I’m going to do you do my padding so I’m going to hook in using the variables to space in and I’m going to apply that to all sides so now I have nice spacing in my card maybe actually want that to be a little bit larger so I can do space L and then we’ll apply that to all now it’s padded a little bit better there and then on this heading we’re going to do custom card double underscore heading and we’ll do custom card double underscore text and then we’ll do custom card double underscore button so now all of these things have custom classes on them but none of them are going to lose the power of automatic CSS because I’m hooking into the system using variables so here’s my heading which actually needs to be an h3 we’ll come back to this heading in a second this text I definitely want it to be smaller so under the custom class I’m going to go to typography font size none I’m going to hook into the variable text s and that’s going to make that text small on this button I’m also going to do this where I hook into the background color so we’re going to do var primary is our action color and then what we’re going to do is make that text ultra dark of the same color so I’m going to go to typography font size not font size sorry color and we’re going to hook into primary ultra dark which is the ultra dark version of that primary color so that looks nice it’s better it’s more refined than just like putting black on there all right so this is going to say click here to click here to buy or something like that okay next I’m going to come to this heading under the class and we’re going to add a little margin again by hooking in with the variable so we’re going to do uh space in for that or let’s do s yeah let’s do s see you’re making decisions but very simple decisions you’re not dealing in numbers you’re just dealing in medium large extra large extra extra large all right so we’re going to do size and spacing on this custom class for the text this one’s going to be a little bit bigger so this is going to be space m and we’re all good to go there so this is a card and then I’m going to say this is the description of a service perhaps it is two lines long okay and I’ll say this is a service card great all right so now you see that I’ve got my heading which I’m looking at it and you know maybe I make the decision I think that heading should be a little bit bigger well it’s right now it’s inheriting the default age three size but I can always just hook into a different size so if I come to typography and I change the font size to none I can say this is going to be text m perhaps that’s smaller so let’s do L that’s what it was let’s do excel maybe I want it that big maybe you want a giant heading for your card stop that doesn’t look great right so let’s do L excel okay good so this is a service card with a large heading awesome okay maybe you like that sort of thing I don’t know all right so what I’m going to do is hit save on this I’m also going to delete these two empty divs that we had and I’ll just duplicate this div so we’ll pretend like there’s six of these bad boys okay so we’re going to save and I do want to show you that that is automatically responsive okay I didn’t put any break points on the grid you’ve already seen this in the last video though that grid is automatically responsive and it doesn’t always break to one like at this size it’s chosen to at this size that is broken to one at this size it’s still at two and then it does top it goes to three actually doesn’t look doesn’t look super bad okay so let me show you now the true power of this the true power of this so we have all of this stuff set up right we’ve got our text sizes we’ve got our headings we’ve got you know some custom stuff going on here when I go into because now you decide well I’d actually like these headings overall to be bigger or smaller or I would like the scale to be different and the scale means from L to excel how much does the does the size increase like by by what multiple and then from excel to excel there’s a multiple right you have control over all of that in automatic CSS so I’m going to go to style sheets and I’m going to go to the automatic variables sheet and I have increased my font size here in the text editor which should help you guys see all of this stuff but all I’ve to do is come down to this text section and I actually have a few different ways to control the text let me go back up to so you can see the the scale ability here as we make these changes so first of all there’s a base text size for desktop and there’s a base text size for mobile and these are in rims where one rim equals 10 pixels so you can see that the base text size here is 18 pixels basically the base text size for mobile is 16 pixels all right everything is calculated based on these base text sizes so if I wanted everything everything text heading everything to just scale up a little bit bigger I can go from 1.82 not to 12 to 2 so now everything got a little bit bigger right or I can make everything a little bit smaller by changing that to 1.6 notice that everything automatically recalculates instantly when you do that if I went to 1.4 here for base text mobile on a mobile view everything would get a little bit smaller all right so you have power over the overall look with just changing these two variables and everything recalculates instantly even look look look look even the custom classes that you made right so I go from 1.8 to 1.6 obviously all that text just got a little bit smaller so even when you have custom elements doesn’t matter how many custom elements you have you could be thousands of them throughout the site you make this one change to typography everything instantly adapts everything stays responsive it all just works so I think that’s fantastic next is what if I want to change the actual scale so if you know anything about typography there’s all of these common scales so there’s minor second major second minor third major third perfect fourth augmented fourth perfect fifth golden ratio I’ve actually put the ratios the scale ratios into the comments for you now when we develop our plugin you’re just going to be able to choose these from a drop down and this is all going to work you’re not going to have to do anything in a style sheet once the plugin is ready but look at all these scales that you have to choose from and you can set the text scale right here so I want you to watch the text over here as I decide on a different scale to use so let’s say we want to go to perfect fourth so I’m going to change this to 1.333 and now the scale has effectively changed between all of the headings you’ll see this more as I go up in the scale so next one let’s skip augmented fourth let’s go to perfect fifth which is 1.5 okay now you can see the heading is much larger and like there’s a bigger difference between the headings and the text and let’s go to the golden ratio 1.618 okay you can see huge differences now but I also want to and it’s easier to see on here now I will say that most websites like this is too extreme it’s like the golden ratio too extreme for most websites and I have a little notes in the setup about kind of the range you want to stay in and by the way you don’t have to choose those presets you can make the scale whatever you want it to be but I want to show you that it’s still automatically responsive so even though you will still get very large headings on mobile I mean this is the scale you chose right so if you don’t like this then you want to choose a more limited scale and I’ll show you in the variables we go back here let me come out of here let me go back to desktop let me go back to the variable sheet awesome let me show you what a tighter scale looks like so instead of going the extreme on this end let’s choose like a 1.125 so now 1.125 so now you’re going to see a much tighter scale between the headings okay again you have full control over this which is really really powerful if you don’t want to use an auto scale let me go back down here you can always come in and I’ve put values for you where this is this allows for completely custom typography so you can literally set your own sizes for the XS the S the M the L the XL the XXL and you set those in rims without you just put the values would be like eight right or well that would be huge to whatever you want it to be and then you take away the comments it’ll make this active and you do have the ability to just go completely custom with your typography if you want to and you will not lose the responsiveness it will still automatically be responsive so that’s really really powerful I just think let me go back and set it back to 1.250 that’s kind of one of the ones I prefer so I’ll go down to my scale 1.250 all right perfect you can see that everything automatically adapts okay so this is one solving a tremendous amount of problems that you’re going to run into across a site it’s future proofing it’s scalable you have full control over the scale you can make custom classes it works out of the box right doesn’t require any setup right when you install the system you can just get started using it and then you can make adjustments later without any any worry of things breaking very very very powerful let me know what you think in the comments below remember this is a small small part of the power of automatic CSS I’ve got about a dozen or more of these videos coming doing all sorts of really fun crazy powerful stuff but I also want to reiterate the philosophy of automatic dot CSS is clean simple scalable so we’re not doing a bunch of fancy Nancy nonsense everything in automatic dot CSS is tremendously helpful to your workflow tremendously helpful to the user experience tremendously helpful to just every part of development inside of oxygen let me know what you think hit like hit subscribe read the notes on automatic CSS you can see what the system is about what all is available to you there’s a cheat sheet showing you everything that you can control currently within the system click that link check that out but that’s it I’ll be back very soon peace