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.
