New bric: Fit Text

Custom Brics
#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

7 Likes
#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!!

5 Likes
#3

Hey @David nice use of Fit Text :clap:

1 Like
#4

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

Casey

1 Like
#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

#9

Hi there.

Looking for a way to resize dynamically text in Blocs.
This Bric seems good but all links are dead.

Any idea of a similar Bric or trick ?

Why would I need this if Blocs can set text at different breakpoints ?
Well because there is a big gap in screen size for the LG range starting at 992px to full 27" monitor window.

I found that in CSS, VW units for fonts can be used but can’t find them in Blocs.

Any idea ? Thanks.

#10

@svimic Fit Text page is here: Archetypon

1 Like
#11

Thanks.
Meanwhile my attention was drawn to Textbloc2 which I directly bought and applied.

#12

FitText is a most useful and well designed Bric, thank you @Lucas :smile:

Let’s say you’ve already built an entire website and you now want to use FitText for difference size headers and paragraph across the entire site. Is the a way we could add FitText to work globally?

#13

Thanks @KBConcepts !
Nope we have to add one instance of FitText to each page.

#14

@Lucas is there a way to use FitText with navigation (link, folder or element) ?

#15

Fit Text works as a container where the text inside the container is processed, so it cannot be used as a navigation item.

#16

[quote=“Lucas, post:15, topic:3865”]
navigation item
[/quote] :neutral_face:
What would make this Bric so much better is getting it to do that :grinning: