Free Bric: TextBloc


#1

Free Bric: TextBloc (for responsive typography)

This bric brings continuously responsive text to your Blocs project. It’s essentially a UI for textblock.io made for use with Blocs for Mac. TextBloc is a progressive enhancement that’s safe to use alongside your existing stylesheet.

**If you are having any troubles with TextBloc I recommend updating your Blocs install to 3.2.1

Download:

Example Video:

If you like your text to be well proportioned on all screen sizes and prefer not to fiddle with changing the font size at breakpoints I think you’ll appreciate this approach. This video shows the basics. It only scratches the surface. This technique makes Hero Banners as good as they can be on all device widths.

Why a responsive text Bric?

I have never loved the options that existed for responsive text. Many solutions I’ve tried depend on “magic numbers” or bloated css or both. I recently found Textblock.io —A refreshing twist on the concept. This script does a phenomenal job and is definitely the best solution I personally have come across to date.

Things to consider when using TextBloc

  • There are a few ways to adjust the behavior of responsive text. TextBloc can adjust more than font-size, It’s capable of adjusting line-height and font-weight and even variant grade of the resizing effect. This is why I’m calling it “responsive typography”.
  • It works with em, rem and px units to match the way you work.
  • It works on top of you current css as a progressive enhancement.
  • The min and max font-size is the simplest concept to understand. The minimum size the text will be and the largest size it will be.
  • The min-width and max-width affects when the resizing happens. You can choose whether this gets calculated from the width of the parent element or the element itself.

How do I target elements that I want resized?

You simply add the html tag, class or ID to the Target Element field. You can add classes to elements using Blocs app as needed.

Example:

  • .my-class
  • #myID
  • .container > p

Can I target more than one element?

Currently the bric includes 3 target element fields, each with it’s own settings. However, you can include multiple elements in each field. In this case you will separate your elements with a comma as in the next example.

Example:

  • Target Element Field A: .my-class, #myID, .container > p
  • Target Element Field B: p span
  • Target Element Field C: .another-class, #anotherID, .element div

I’ve changed my “Unit” to “px” but things seem strange or not working properly.

If you are using px don’t forget to change your min and max font sizes to pixel values. A px value will be something like (16, 24). An em value looks like. (1.2, 2.4, 3)

*When entering values, do not add the unit (px,em,rem). Only put the number in the field.

Can I use multiple TextBloc brics on a page?

No, because you only need one per page. One bric covers three separate targets, and each target field can target multiple elements. See "Can I target more than one element?"

Can I use TextBloc in the global areas?

Yes, you can add the bric to a global area. Whatever elements you’ve set will be targeted on every page.

What’s so special about the bric’s label?

As you type your selectors into the Target Element fields they are displayed on the brics label in the blocs canvas. This allows you to know which elements are being targeted by the bric at a glance and without selecting it.

What is Textblock.js?

Textblock.io is the fantastic script from which the TextBloc bric was created. Without this innovative concept TextBloc would not exist.

What’s next?

The script is still a pre-1.0 release (0.9.9 at the time of this writing) So far it’s been working very well in my evaluation and I intend to keep this Bric up to date with latest TextBlock releases.

Support

I don’t expect a lot of issues, but if something stands out please drop me a note or visit the forums on the Blocs website where maybe another user has a tip or some guidance.

Set your own price (a.k.a. tipping)

TextBloc is free, but it did take time to build and test. It’s sure to have a few updates in the near future. If you consider it useful and would like to support the creation of more brics like these set your own price. You won’t regret that you did!

Quick Start

Step 1. Add the bric to a page that has elements you want to control.

Step 2. Using any or all of the Target Element fields type a selector for that element. i.e. (p, #myid, .myclass p) you can add multiple selectors in the field (each targeting a different element), just separate them with a comma.

Step 3. Set the maximum and minimum font-sizes you want the font to show.
Hint: use the mobile view to set the minimum and desktop view to set the maximum to your liking. This makes things sooo easy.

Step 4: The other settings such as Line Heights are optional. Here’s a quick run down.

Each of the settings below are optional.

Min Line Height = The smallest line-height. It scales with the font-size.
Max Line Height = The biggest line-height. It scales with the font-size.
Min Width = width that controls the small font size.
Max Width = width that controls the large font size.
Get width = Calculate the width from the parent or the element itself.


#2

How cool is this! Love the video you made showing it’s features.
Not sure what this means though
You can not use TextBloc on multiple Brics on a page. Just to be clear does that mean you can only use it in only one Bric one the entire page?


#3

Hi @KBConcepts,

First, I’m glad you have taken interest enough to comment! I think people are going to want this more than they realize after using it. It’s the hands down cleanest approach to responsive text I’ve ever experienced.

Now to your question, yes you only use one bric per page, but that bric supports multiple target elements. You really only need one per page in most cases.

The part you want to hang onto is this. it explains why you really don’t need more than one bric in most use cases…

Currently the bric includes 3 target element fields, each with it’s own settings. However, you can include multiple elements in each field. In this case you will separate your elements with a comma as in the next example.

Example:

  • Target Element Field A: .my-class, #myID, .container > p
  • Target Element Field B: p span
  • Target Element Field C: .another-class, #anotherID, .element div

Hope this helps!


#4

It maximizes the readability and makes you think differently about what a good font size might be. I used it for block-quotes and ad copy, hero banners and even paragraph text. It just adapts and gives you great looking text. I find my using more legible font sizes because they simply adapt the way I need them to when it matters.


#5

Right now I have downloaded it but not paid for it. Because of the experience with unexpected usage behaviour of Blocs, I will try this out first and if it works I will pay for it. However, that may take a little while until I find the time or the occasion (whatever comes first) to test it, because I have to “implant” a shop for the website I constructed. Right now I only can say it looks promising but so does Blocs.
Thank you for the choice you offered. :pray:


#6

I appreciate you taking the time to develop such a useful tool. For sure this took a great deal of knowledge and testing to get it right.
To be honest I’m still in learning mode. I’m not a coder, so it’s difficult to fully comprehend. I guess I really need to understand definitions more. :slight_smile:
I think I’m with @StFoldex, but cannot find a way to download and test it. If I leave the $ amount a zero it does not allow me to get the file.


#7

No worries @StFoldex, I really appreciate the note though. Honestly, I’d prefer if folks are curious just download and have fun. Good luck with things!


#8

You have to type 0 (zero) into the field. So to speak you confirm the price. It took me a while until I realised this.


#9

That’s strange @KBConcepts, because @StFoldex seems to be saying that he did download successfully.

Right now I have downloaded it but not paid for it.


#10

Yup, you have to add an email and a Paypal account link.


#11

Paypal account link? I did not experience that @KBConcepts. For me entering 0 and providing email triggered the download.


#12

I just tried that in Chrome, Firefox and Edge 0 was not accepted. Once I entered 1 it lead me to Paypal.


#13

DM me your email address.


#14

Great new Bric that adds a powerful feature to Blocs.


#15

Nice work! This should be very useful.

Any chance you could allow people to download the file from your demo video to see how you set it up?


#16

Sure. I can’t right now, but I’ll post it when I get to my Macbook.


#17

this is golden…thank you very much


#18

Looks like an awesome way to automate text without messing with all the individual breakpoints. Now I just have to figure out how to make it work… :grin:


#19

Thanks @kwakukwaku,

I appreciate your feedback very much.


#20

Hello @Highlander,

I’ll upload a Blocs file that everyone can use as a starting point to get a feel for how to use the bric. Expect that probably tomorrow morning (Saturday).