Transcript

00:06 [Music]
00:09 When sizing headers and text on our
00:11 websites, we normally define the sizes
00:13 in small, medium, and large. However,
00:17 fit text allows us to dynamically resize
00:20 our headers based on the browser. So, as
00:23 the browser width changes, so does the
00:25 header. It dynamically sizes between a
00:28 range that we define to be exactly the
00:31 size that we need on our web
00:33 pages. Now, Fitex comes with two
00:36 different stacks. We have Fitex and
00:40 FitexJS. While they're very similar,
00:42 there are very special differences,
00:45 especially if you want precise design.
00:48 Fitext uses PureJS to resize our headers
00:52 fluidly.
00:54 However, fit text.js will always ensure
00:58 that the header is exactly filling the
01:01 container that we want. So, if that is a
01:04 design element that you're looking for,
01:06 FitXJS is exactly what you
01:09 need. Now, not just with stacks, we all
01:12 love swatches. So, we have both Fitex
01:15 and FitX.js versions in a swatch format.
01:19 So, we can apply it to our headers and
01:22 text stacks.
01:23 Here's a great layout that we have here
01:26 that shows a variety that uses swatches
01:29 to style headers in different ways to
01:31 create this wonderful billboard effect
01:33 that is fully responsive from desktop
01:36 all the way down to
01:39 mobile. So, here's the demo file that
01:42 ships with fit text and let's see how
01:44 easy it is to implement.
01:47 As you see here is the normal fit text
01:49 stack and you can go ahead and type in
01:51 your text in your header what that you
01:53 want in here. You can define what level
01:55 of header or paragraph that you want um
01:58 in the element and then here we define
02:00 the minimum and maximum sizes. So
02:03 essentially what we're saying is uh I
02:05 want it to be 32 pixels when we reach
02:08 the browser width of
02:10 320 and I want the header to be 94
02:14 pixels when we reach a maximum target of
02:16 1,200 pixels. So we have full control
02:19 over exactly when and at what size our
02:22 text is going to be sized at. Now,
02:25 depending on your theme, you might need
02:27 to use this little force button, and
02:29 that will force the style no matter what
02:31 the theme or other stacks are setting it
02:33 to be on the
02:35 page. FitexJS is pretty much almost
02:39 identical. We have the same exact
02:42 minimum and maximum values. However, in
02:44 this, we can actually enable or disable
02:46 text wrapping. So when the browser gets
02:49 down to the smallest size, do we want to
02:52 allow the text to actually wrap and
02:54 break
02:56 lines? So before we go, let's have a
02:58 look at the fit text swatch. And you'll
03:00 notice that the sizing here is exactly
03:02 the same as in the stack. So we have
03:04 minimum and maximum values with a force
03:06 button. And what you notice at the very
03:08 top is our swatch selectors. So the
03:11 easiest way to do this is just simply
03:13 add in a class here. And you simply go
03:16 ahead to your header and add that same
03:18 class on the header. And this header
03:20 will now be affected by the fit text
03:22 swatch. It couldn't be any easier.
03:31 [Music]