atp

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;

• http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
• https://ia.net/know-how/responsive-typography-the-basics
• http://vanseodesign.com/css/rems-and-viewport-measurements/
• http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

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; 

• https://developer.wordpress.org/reference/functions/wp_enqueue_script/

 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.

• https://www.google.com/design/spec/layout/responsive-ui.html
• https://material.angularjs.org/latest/api/service/$mdMedia