New bric: Fit Text

#1

mockup
Fit Text makes font-sizes flexible. Use this bric on your responsive design for ratio-based resizing of your headlines. Fit Text achieves scalable headlines that fill the width of the parent container.
Resize the browser to watch the headlines adjusting dynamically to the width of the page.

Video - Getting started

Product page:

Demos:
http://www.weaverskingdom.com/preview/brics/fit-text/index.html
http://www.weaverskingdom.com/preview/brics/fit-text/example-2/

Quick buy:
https://weaverskingdom.cartloom.com/cart/quickbuy/154769

#2

Hi Lucas
This is a really great Bric and solves a problem I’ve had before very easily. In the screen capture below with FITTEXT the headings stay in proportion to the images and don’t break into two lines. I know this can be achieved by setting different text sizes for tablets and phones but this make it so easy.

fittext capture
fittext capture.png1046×710 414 KB

Thanks buddy, keep them coming!!

#3

Hey @David nice use of Fit Text :clap:

#4

Lucas, looks like a great time saver! Nice job.

Casey

#6

@Lucas I was wondering if it’s possible to style Fit Text for different elements on the same page? For example I have a four row column I want styled with one font and I have a carousel with a header I want styled with a different font?

Casey

#7

Sure just add different classes to each Fit Text with different fonts, example .font-1 .font-2 etc

#8

Ok thanks, I added a class FitText and it wanted to control all of them on the page. Once I added them in FitText in the class area I was able to style to my hearts content.

It takes a little playing around with the compression, depending on the area. I’ve got a four column area and I’ve got the compression set to 0 it works well in most columns but one it crowds the column. Should I set min and max with this problem or do you suggest something else? (new construction & remodeling)

Lucas, I got it, browser must have cached the older version, a hard reset fixed the problem.

Thanks

11 AM