New FlowType Sass mixin. For use in place of jQuery version. Brief usage documentation added to README.

Demo can be found at http://codepen.io/bphillips201/pen/af2e044df72883cdce789e3aed455b53

Hi,

I wrote a small package.json to be able to add FlowType.JS as a npm dependency. Now you can :

npm install --save kane-thornwyrd/FlowType.JS

Or just set your dependencies object as followed :

dependencies": {
  "grunt": "^0.4.5",
  "grunt-contrib-jshint": "^0.10.0",
  "grunt-contrib-watch": "^0.6.1",
  "underscore": "^1.6.0",
  "FlowType.JS": "kane-thornwyrd/FlowType.JS"
 },

If you agree to merge this pull request you'll find handy to replace kane-thornwyrd/FlowType.JS by simplefocus/FlowType.JS.

Eventually you may do some tweak and a npm publish.

I was about to do a PR for this but then i tought submitting an issue first might be a better idea.

What do you think about this? I think it's a good idea only to fire the resize function once every 300ms? I know that this is pretty fast, but you know... :shipit:

Having an odd issue popping up and must be missing something simple.

I am using flowtype in two area of my page - once on a headline, and again on a set of spans.

Upon resize I can see the h1 resize and watch the inline font-size value change in my inspector - I also see the inline font-size being applied/added to the spans, but on resize the font-size value doesn't change for the spans.

So it would appear the code is working correctly on h1 and starts the process for the spans but doesn't update their values on resize - Am I missing something?

Much thanks in advance.

Adding a manifest file for package mangement via Bower (simplefocus/FlowType.JS#4)

Might want to change the version tag to your chosen value (be sure to use semver) and add a corresponding tag on the tree. Then run bower register Flowtype.js git://github.com/simplefocus/FlowType.JS.git from the command line to register the package.

Should keep them happy :)

Can't seem to find any information on what browser versions this has been tested on? Can anyone point me in the right direction or could this be added? Cheers.

FlowType works like a charm for the most part, but it overrides the font-size CSS property, so I'm forced to call flowtype() multiple times for different elements because they require different fontRatio settings. If FlowType works relative to the element's font-size, then you'll just need to call flowtype() once and fontRatio won't be required anymore in most cases.

I don't think it's necessary for FlowType to update the line-height as the font-size changes. It's better to use a unitless line-height in css. This will automatically scale up/down with the font size, so the effect is the exact same.

body {
  font-size: 18px;
  line-height: 1.45;
}

I would also suggest changing the "Set Typography Base" section of your readme because, in my opinion, suggesting people set line-height in pixels is a very bad idea. Unitless line-heights also have the advantage of much smarter and more useful cascading to other elements. http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

I have a page with highly stylized fonts of many varying sizes. If I call flowType on the whole thing, it works, but I am confused by how minFont works:

I set my font sizes in css first, then when I called flowType I set the fontRatio to 100 to get it back to resembling the comp I'm working from. I want to resize all text on the page, but I want each individual element to stop being resized when it gets to 12px font size. However, when I set a minFont of 12 it seems to raise the base font size (so it increases all font sizes) and then nothing is resized when I change the browser window size. Am I just not understanding what minFont is supposed to do?

I don't know if this should matter but I have also set the body's font-size to 62.5%. The page is not live anywhere so unfortunately I can't provide a link.

Great plugin overall, I'm just confused :) thanks in advance for help!

I'm sorry to say, but I won't be using FlowType.js at work, much as I'd love to. And all because your licensing requires an attribution link. The license header in the script and its links in FlowType.js aren't enough? I know that as a developer when I want to see how someone did something on the 'net I use View Source and check out their CSS/JS.

We aren't about to link to a script that requires us to publicly post a link on the sites we design. This library is such a tiny part of the overall design it doesn't deserve the same recognition as our link for "Web Design by..." does, when we did all the work.

I suggest that you pick a more permissive license than CC-SA.

I've successfully implemented flowtype.js on some text on a basic html page. But as soon as I try it on the same text in my website (built from a responsive template)... nothing.

Through trial and error I have narrowed it down to an issue with: app.js vendors.js index.js

As soon as I take the links to these out of my site it works a charm.

Any ideas would be greatly appreciated... promlem_js.zip

I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and Flowtext so the text will be the correct size within the boxes as they resize. However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size. When I adjust the size of the window everything recalculates and the font sizes are all uniform. Is there a way to trigger the recalculation without resizing the window.

Here is a codepen: http://codepen.io/dll416/pen/xgeeoz

The viewport has to be 1200px or below to see the issue.

Check this fiddle please and possibly advise how this could be fixed.

• 1st div has a padding value set with em.
• 2nd div has a padding value set with px.
• 3rd div has a padding value set with percentage.

Run the fiddle, resize (e.g. when user changes device orientation from portrait to landscape) the viewport and then run the fiddle again (what translates to reloading the page after resizing it).

You can see the 1st div content readjusting font-size and line-height. This creates a quite unpleasant "jump" in the overall page layout.

Ideally regardless of resizing and then reloading the viewport, the font-size and line-height should be respected or set with regards to any values set in em for that element.

bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes

bower mismatch Version declared in the json (1.0.0) is different than the resolved one (1.1.0)

Is it me, or is it you?

If it's not me, can you update the components please?

Thanks

my h1,h2,h3,h4,h5,h6 didnt get effect with the script?did i do wrong?

<script src="js/flowtype.js"></script> <script> $('body').flowtype({ minimum : 300, maximum : 780, minFont : 8, maxFont : 32, fontRatio : 60 }); </script>

when i minimize my h1 font size still 32px from bootstrap.min.css

It would be great if this library were wrapped in a module. Examples in numerous JS libraries show how to support global, CommonJS and AMD in the same file. This is a good read: http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/

Also would be nice to have a package.json to support npm. Don't have to publish on npm registry anymore as npm supports referencing a git repo. I would be happy to provide a pull request.