TextBloc (Deprecated)

TextBloc is an add-on for Blocs for Mac software, a popular Mac-based responsive website design tool.

This bric makes your site's text continuously responsive. 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.

You now have continuous responsive text in Blocs app without the need to edit code.

------------

Updated to include Blocs 3.2 API improvements. Added an additional target field. TextBloc now comes with 4 independent target fields, and each one accepts multiple selectors.

Included a sample Bloc to help demonstrate usage. In addition, the bric has been updated to handle missing values much better. In fact you can leave any value empty except for Target Element and min/max height.

Why a responsive text Bric?

I've never loved the options that have 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 area 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)

Can I use multiple TextBloc brics on a page.

No, because you don't need multiple brics on the page. It's designed to add just 1 bric per page and control multiple elements with unique controls for each element or group of elements.

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 reasonably 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!