Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:7Length:42 minutes
Essential js libraries for ui 400x277
  • Overview
  • Transcript

2.4 Fitty

If you’ve ever wondered how to resize your text to fit within a given width, then this plugin is for you. In this lesson, you will learn how to use the Fitty JavaScript plugin to match your text’s width to its container.

Relevant Links

2.4 Fitty

Hello, and welcome back. In this lesson, we'll be using the Fitty JavaScript plug-in to neatly resize our text to fit within its container. And we can see an example of this in action on the Fitty website if we scroll down a little bit. And you can find the URL for this website in your course notes for this lesson. But we have this editable text field here, actually two of these. And we can see that if we start on this top line here, if we start deleting characters, we see the text is getting larger. And it's basically resizing itself to fit within its parent container. So if we add more text to a line, then we see the text is gonna get smaller. And the Fitty plugin here makes it very, very easy to make this happen. So if you wanna follow along with this quick example, you can download the code on GitHub. And you can see the link for that on their website. And you can go to the download link over here on the right. But everything we need is gonna be in the dist folder, and we need this fitty.min.js. That's the only file that we're gonna be using for this particular example. So I'm gonna be building this from scratch, but our folder that I'm gonna store all of this in is gonna be 04_Fitty in your Project Files folder. And you'll notice there's a JavaScript folder here, and it contains the two files that we saw there in the dist folder of the download. So what I wanna do is I wanna open this up in Visual Studio Code or whatever code editor you're using. And here you can see our JavaScript folder. I'm gonna create a new file outside that folder called index.html. And I'm gonna throw in some HTML here. And we'll change the title of the document to Fitty, and then everything else will go inside the body. So I'm gonna create a header element here with an ID of main-header. And inside the header I'm gonna create an h1 with an ID of page-title. And inside that I'm just gonna put the word Resize. And then after that h1 element, I'm gonna put a paragraph element with some lorem ipsum text inside it. And that way we will have a little bit of text below it. And then I'm gonna throw in some styles. So I'm copying these styles from another file, I'm just gonna paste them right here. We're setting our box sizing to border-box for everything. For our body, we're just setting the font-family. And then for the main header, which is the container that has our h1 and our paragraph in it, we're setting the width to 600 and the margin to 0 auto so that it will be centered. And then the last thing I want to do here is to include, The fitty.min.js file in the JavaScript folder there. And then we'll create a separate script tag here that's going to contain our own Java script code in it. So let's take a look at this by default. I'm going to save that. Again, remember our main header, which contains our H1 and our paragraph, has been set a width of 600 pixels. So I wanna look at this in our browser. So we're gonna open that up, and here we go. So we see our text here is a given width, and remember, it's contained within this container that's 600 pixels wide. And we see that our h1 element up here at the top, it has some text in it, but that text is not taking up the full width. And what I wanna do is I want to resize that text so that it automatically takes up the full width of its container. And once again, Fitty makes this very, very easy to do. So inside our new script tag, all we need to do is we need to point to fitty. And then inside parenthesis and inside quotation marks, we need to point to the element that we want to resize. And the element we wanna use here has an ID of page title, so I'm gonna type #page-title. And that's all we need to do. So if we save that, jump back into our browser and refresh, you'll see that our text has resized itself to fit within the width. And that's the reason I had this extra paragraph down here, so that we could compare the width. Now we see that they're both the same size. Now, for something like this, if you don't want all of that space in between, you might have to go in and tweak the line height and things like that. But this Fitty plug in gives us a really good starting point for something like this. So if we had more text inside this header, and we were to save that and refresh, you'll see that the text resizes automatically to fit within that 600 pixels of width. So again, this is a very simple JavaScript plugin. It's very lightweight. And it accomplishes one UI task for us really well. So thank you for watching, and I'll see you in the next lesson.

Back to the top