0
Welcome Guest! Login
0 items Join Now

SOLVED Can flowtype.js responsive font work in Gantry 5

  • SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • Flowtype.js is supposed to make font responsive without using breakpoints.
      Flowtype.js is a Simplefocus.com project completed on Github.com at github.com/simplefocus/FlowType.JS
      I have been unable to make it work with Gantry 5 in a Custom HTML particle that contains my logo text. For example, I'm uncertain which part should go into a Custom CSS/JS particle. So far, I have been only using the Custom HTML particle that contains my logo and trying to apply Flowtype.js as per their documentation. Thank you for advice or suggestions.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • You've already been answered in the ticket you created on github? https://github.com/gantry/gantry5/issues/1397 .

      Add the asset on the page settings of the base outline.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • Github post 6/29/16 - Status Update - Flowtype was working fine last night in the body div. This morning I had Flowtype working in the body and logo-text divs. Then, I started to fine tune it, and Flowtype stopped working. So far, I have been unable to get Flowtype working again, even when I started over using my own instructions posted above.

      Mr. Mahagr (Github.com) has offered helpful comments, but we have not figured out how to make it work again. MrT, if Flowtype was working during one of your visits to the site, perhaps you had a chance to see the setup while it was working. If we figure out how to make flowtype work consistantly in Gantry 5, I'll complete the readme I started and post it.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • I believe you are still getting answers in your github issue. There's no need for two of us to be answering you at the same time - it will just create confusion. Stick with the github issue.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • Thx. I'll continue with Github.
  • Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • FlowType.js Responsive Web Font Typography

      Readme adapted here for use in the Gantry 5 Template Framework

      FlowType.JS

      Responsive web typography at its finest. Font-size based on element width.
      Check out the demo site .

      What does FlowType.JS do?

      Ideally, the most legible body typography contains between 45 and 75 characters per line . This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size based on a specific element's width. This allows for a perfect character count per line at any screen width. FlowType can also be used on other elements of varying width, such as logo text.

      Installation in a Gantry 5 Template

      1. Download the flowtype.js file. Download the latest release.
      a. Replace $( with jquery(
      When I did it, there were only two replacements.

      2. Put the revised flowtype.js file on your server.

      3. In Gantry 5, put a Custom HTML particle in your template header.
      This particle will be invisible in the front end. We are just using it to hold some script.
      In the next two steps, you will tell Flowtype where to take effect and how to behave.


      4. In the Custom HTML particle paste the flowtype call script, for example:

      <script src="your-path-to-this-file/flowtype.js"></script>

      <script type="text/javascript">
      jquery = jQuery.noConflict();
      jquery(document).ready(function() {
      // jquery('body').flowtype({
      // minimum: 500,
      pixel units. You set min and max width of browser window for FlowType action.
      // maximum: 1200,
      // minFont: 12,
      pixel units. You set min and max font size for FlowType action.
      // maxFont: 20,
      // fontRatio: 35
      Integer only. Smaller number makes font shrink faster as browser window narrows. fontRatio is the ratio of character string width / line height.
      // });

      jquery("body").flowtype({ /* Example: body is an element tag that you might choose to be affected by Flowtype. */
      minFont: 12,
      maxFont: 30, /* Notice there is a comma after maxFont: 30, */
      fontRatio: 35 /* Notice there is NO comma after fontRation: 35 */
      });
      jquery("#logo-text").flowtype({ /* Example: #logo-text is a div ID that I used to have Flowtype affect my logo font. */
      minFont: 8,
      maxFont : 40,
      fontRatio: 30
      });
      });
      </script>

      To actually display my logo, I put my logo in a different Custom HTML particle, which will show on the front end, and put the word logo-text in the block CSS ID.

      5. In your CSS style sheet or in your Custom.scss , font-size should be in em units for FlowType to affect font size.

      Body
      {
      font-size: 1em /*example */
      }

      h1,h2,h3,h4,h5,h6,p
      {
      line-height: 1.45; /* recommended */
      }

      H1 {font-size: 2em;} /* examples */
      H2 {font-size: 1.5em;}
      H3 {font-size: 1.25em;}
      H4 {font-size: 1em;}
      H5 {font-size: .83em; }
      H6 {font-size: .75em; }

      #logo-text /* example */
      {
      font-size: 1.75em; /* example */
      }

      6. In Gantry 5 / your template name / Base Outline / Page Settings / Atoms / JavaScript Frameworks / JQuery, tick Framework over to green. Apply and save. That activates jQuery as a resource.

      7. Narrow or widen your browser window and watch the font size change. Adjust Items #4 and #5, above, as needed.


      Brought to you by...

      This wonderful piece of magic has been brought to you by the team at Simple Focus . Follow Simple Focus on Twitter: @simplefocus .

      FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

      This procedure and Readme was adapted for Gantry 5 by Pintobuck .
      Expert advice was received from:
      mahagr , Gantry 5 development project at Github.com; and forum development at Kunena.org
      MrT , Gantry 4 & Gantry 5 template development and expert support at Rockettheme.com
    • Last Edit: 8 years 10 months ago by Pinto Buck.
  • Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • Flowtype.js as downloaded on 7/3/2016.
      /*
      * FlowType.JS v1.1
      * Copyright 2013-2014, Simple Focus http://simplefocus.com/
      *
      * FlowType.JS by Simple Focus (http://simplefocus.com/)
      * is licensed under the MIT License. Read a copy of the
      * license in the LICENSE.txt file or at
      * http://choosealicense.com/licenses/mit
      *
      * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
      */
      
      (function($) {
         $.fn.flowtype = function(options) {
      
      // Establish default settings/variables
      // ====================================
            var settings = $.extend({
               maximum   : 9999,
               minimum   : 1,
               maxFont   : 9999,
               minFont   : 1,
               fontRatio : 35
            }, options),
      
      // Do the magic math
      // =================
            changes = function(el) {
               var $el = $(el),
                  elw = $el.width(),
                  width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
                  fontBase = width / settings.fontRatio,
                  fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
               $el.css('font-size', fontSize + 'px');
            };
      
      // Make the magic visible
      // ======================
            return this.each(function() {
            // Context for resize callback
               var that = this;
            // Make changes upon resize
               $(window).resize(function(){changes(that);});
            // Set changes on load
               changes(this);
            });
         };
      }(jQuery));
  • Re: SOLVED Can flowtype.js responsive font work in Gantry 5

    Posted 8 years 10 months ago
    • Github desiganted the Flowtype technique in this Readme, above, as a future milestone enhancement for Gantry 5.3.0.

Time to create page: 0.065 seconds