Integrating flowtype.js with wordpress

I recently wanted to use flowtype.js with wordpress to create a liquid layout for the text as well as the images. Integrating it required a bit of research into how to load javascript into wordpress the ‘correct’ way. Here’s how it fits together.

flowtype.js (http://simplefocus.com/flowtype/) is a lovely way to scale font size in a responsive way to ensure readable blocks of text. It allows capping of the maximum and minimum font size and allows you to control the steepness of the scaling curve. 

It works very well for blocks of text, but less so for isolated sentences or hero banner overlays. For that your have to drop back to using viewport units. I’ll confess I’m still learning the ropes of em, rem and vw and their pitfalls and weaning myself off px. Links I found useful;

Quite obviously all of the above does not apply to this blog, which is stuck in a pre-google fonts hell. Not enough time to update it to look pretty at the moment unfortunately. 

Still back to flowtype and wordpress. 

First we need to add the flowtype js file to the list of scripts that wordpress will load for a given page. We do that by registering the script and then enqueuing it in the child theme’s functions.php file. If you’re integrating it into a main theme then the same principles still apply – however if you’re the author of a theme, then this will be pretty basic stuff for you. 

reference; 

 That looks like this;

function theme_enqueue_flowtype() {
    wp_register_script('flowtype', get_stylesheet_directory_uri() . 
      "/js/flowtype.js", array('jquery'), '1.1', false);
    wp_enqueue_script('flowtype');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_flowtype' );

 This basically assumes you’re following the standard layout for child themes, and that we have flowtype.js in a subdirectory js/flowtype.js under the directory that holds your child theme style.css. If you want it somewhere else, then the wordpress codex is your friend to find the appropriate call – under the parent theme you’d be using get_template_directory_uri() for example. 

Now we can use it to style blocks of text in a responsive way.

flowtype.js uses jquery selectors so we have to find a place to put this small bit of javascript. There are a couple of approaches – you could create a second .js file that holds your jQuery directives and then enqueue and load this in the same way as we did the flowtype.js file above. Or you can put it directly into an appropriate place – in my case I chose the footer.php file in the child theme directory. 

That is, the last few lines of footer.php in the child theme directory look like this;

<?php wp_footer(); ?>
<script type="text/javascript">
  jQuery('body').flowtype({
     minimum : 300,
     maximum : 1200,
     minFont : 11, 
     maxFont : 16,
     fontRatio : 40,
     lineRatio : 1.4
  });
  jQuery('.about-us').flowtype({
     minimum : 300,
     maximum : 1200,
     minFont : 14,
     maxFont : 24,
     fontRatio : 40,
     lineRatio : 1.4
  });
</script>
</body>
</html>

 We’ve defined two different sets of config in the above. There’s a default flowtype that applies to everything under the body tag, and there’s a separate set of settings which apply just to those divs labelled with the ‘about-us’ css class. 

minimum and maximum define the viewport widths over which the settings apply and cap the font size changes into a range defined by the minfont and maxfont settings. So in the body example above, when the browser is 300 px wide, we get a font size of 11px, and when its full desktop width of >1200 px we get a font size of 16px. See the flowtype website linked above for more detail about these settings.

The advantage of this is that you can set bounds on the size of the text in a way that’s difficult to do if using a purely rem or vw units based approach. 

The advantage over the adaptive approach is that you get a more liquid and fine grained gradation of font sizing  than you do using stepped media queries – exemplified by the material design guidelines.

Which works fine if you’re building a fullscreen SPA and are as a result unlikely to change the browser width, but for a webpage, its nice to be able to scale the text in a similar way to the images. 
 

Andy Phillips LMAX Exchange Staff Blogs    

Any opinions, news, research, analyses, prices or other information ("information") contained on this Blog, constitutes marketing communication and it has not been prepared in accordance with legal requirements designed to promote the independence of investment research. Further, the information contained within this Blog does not contain (and should not be construed as containing) investment advice or an investment recommendation, or an offer of, or solicitation for, a transaction in any financial instrument. LMAX Group has not verified the accuracy or basis-in-fact of any claim or statement made by any third parties as comments for every Blog entry.

LMAX Group will not accept liability for any loss or damage, including without limitation to, any loss of profit, which may arise directly or indirectly from use of or reliance on such information. No representation or warranty is given as to the accuracy or completeness of the above information. While the produced information was obtained from sources deemed to be reliable, LMAX Group does not provide any guarantees about the reliability of such sources. Consequently any person acting on it does so entirely at his or her own risk. It is not a place to slander, use unacceptable language or to promote LMAX Group or any other FX and CFD provider and any such postings, excessive or unjust comments and attacks will not be allowed and will be removed from the site immediately.