Transcript

00:08 so fit texted Oh got a complete overhaul
00:11 a really huge simplification in the
00:14 settings and while there's less settings
00:16 it's actually even more powerful and
00:18 easier to use so here's a really simple
00:21 example I just have a fit text on the
00:24 page with a header inside and the
00:26 settings are super simple by default you
00:29 just add whatever you want into it and
00:31 fit text will process that text and then
00:35 in the settings you define the minimum
00:36 and maximum size that you want your text
00:39 to be
00:40 now if we preview this you'll notice
00:42 that fit text will dynamically size this
00:45 text so that it always fits on one line
00:47 within the browser now of course it
00:50 keeps within the minimum and maximum
00:51 values so if we ever need to go smaller
00:54 in this instance this text will never
00:57 get smaller than 50 pixels now since at
01:00 50 pixels this text can't be fit on one
01:02 line it will then wrap onto multiple
01:05 lines now fit text can throw whatever
01:08 you want at it most time you're going to
01:10 be using this with headers however you
01:12 can throw entire blocks of text and fit
01:15 text will ensure that it the text
01:18 remains within those boundaries and then
01:20 it always fits each line within one line
01:25 now let's look at a real world scenario
01:27 here I'm using the hero header template
01:30 um that ships for free from foundation
61:32 um now fit text works in any theme but
01:34 I'm just gonna use an example inside
01:36 foundation 6 right now here I have a
01:39 hero header and inside the middle um I'm
01:41 going to have some text and I want that
01:44 text to always grow in to be full with
01:47 um within my hero header this is a great
01:51 scenario we can also use fit text to
01:54 create a billboard like feel um within
01:58 our header right if you look I have
02:00 multiple lines inside my header and each
02:03 line is a different size but fit text
02:06 ensures that they all line up perfectly
02:08 and all fill on the space needed to do
02:13 this we're simply inside of our header
02:15 stack um wrap each line inside of span
02:18 tags
02:21 then inside fit text we simply go ahead
02:24 and choose span as the target
02:28 now fit text can be used to also target
02:30 specific items within their text for
02:33 example here I have some text and inside
02:36 there I have an h3 okay so inside fit
02:40 text I can target just that h3 tag if we
02:43 preview this page will notice that fit
02:45 text will only apply its logic to the
02:48 header 3 inside preview
02:53 and last but not least fit tech ships
02:56 with a swatch that you can use directly
02:58 inside foundation 6 so that you can
03:01 target multiple items with a single
03:03 swatch using a clasp and then you could
03:06 set the minimum and maximum values
03:15 "}]