simplefocus / flowtype.js Goto Github PK

Hi,

I applied this plugin on my every fotorama slide heading.
It's working on starting slides perfectly.

But it's not working on all slides.
Please help.

Demo : http://codepen.io/anon/pen/myoQdB

I'm attempting to make this work on red.steadfastlight.com and the base font is not changing value at all. Help.

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

Is it possible to make flowtype.js work with REM units instead of just EM?

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'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.

Hi. I have a Textelement inside a Bootstrap modal window.

When I open the modal window, the element isn't beeing resized.
Flowtype doesn't fire up unless I resize the browser window. Then flowtape resizes the element correctly but not without resizing the window.

I guess flowtype should be triggered when the modal dialog is triggered? Not before. How do I do that? I just trigger flowtype on document.ready.

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.

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.

With bootstrap i have some problem.
At line 35 i have inserted this and the problem it's solved:

$el.attr('style','font-size: ' + fontSize + 'px !important;');

Based: http://stackoverflow.com/questions/2655925/apply-important-css-style-using-jquery

Hey, maintainer(s) of simplefocus/FlowType.JS!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library simplefocus/FlowType.JS is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "simplefocus/FlowType.JS",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

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.

I really don't understand how this flowtype js works. I've followed your 4 steps (demo site) to the letter and nothing. I've looked at the source code on the demo site and there's no reference to the flowtype.js file on the demo site. As I say I've followed your instructions from your demo site & it doesn't work for me only utter frustration. This script would be amazing if I would get to work for responsive website & amazing time saving also.

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!

Hello!

I am developing a panel that has some re-sizable (jquery property) boxes (divs) that i want they to have the flowtype property in the text inside, but i can only change the text size when i change the whole browser size...

it's possible to make it only change the text inside the div, calculating the div's size instead the window size?

Thanks!

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

I've seen a few posts around from basic users confused about how to set up FlowType. As a handy companion to the documentation, being able to inspect a working page would probably help a lot of people (for example, it would be a quick way to understand what it means by 'running several instances of FlowType'). But your demo site actually obscures the process - you can't see the script link in the HEAD, or the function at the end of the BODY.

So just a thought - could you tweak it to demonstrate implementing FlowType as described in the instructions?

When calling flowtype, it'd be great to be able to do

$("#id").flowtype({
onOneLine:true
});

To resize the text selected to fit exactly on one line in its parent element.

Hello,

Although not an 'issue' per-se, it would be nice to be able to see how many characters per line there are, so one could use this feature during development only. Of course, this feature should be 'turned off' when going into production (just a thought since the script may need to execute some sort of function per line every time).

I haven't really thought of how to go about this since maybe counting characters per each single line may be too expensive resource-wise.

But maybe displaying an average of characters per line per paragraph in some sort of overlay on hover or something.

Anyway, just a way to be able to see at a glance how many characters per line there are.

This plugin rocks.

Thanks.

First and foremost, thank you for this excellent plugin. It's really useful.
I have a question about its functionality though. With the configuration bellow the plugin will go from 11px to 18px within a very small range of browser window size. Testing this configuration starting from the minimum browser size, the font-size will reach the "18px" value at about 560px wide and the font will stay the same size from there onwards.

I was expecting that it would resize the font between the two given values of "500px" and "1200px" browser window sizes. Am I missing something?

$('body').flowtype({
       minimum   : 500,
       maximum   : 1200,
       minFont   : 11,
       maxFont   : 18,
       fontRatio : 32
    });

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.

As there are no examples available to download to compare with, I'm not quite sure what I'm missing.
It would be a good idea to have a folder with examples. There's not even a fiddle or a codepen of its usage on the docs...

Here's a reproduction of what I'm trying to do.
I can see the font-size inline attribute being applied to the parent, but it doesn't seem to have any effect on the child elements.

It seems it only works when applying em instead of px to the element i want to make resizable.
Nothing is mentioned in the docs about having to use em instead of pixels. So not sure if this is a must or not...

Here's the same version but working as expected when using em units instead.

I've seen some other demos which doesn't seem to be working either.

What am I missing?

Hi.

I am trying to setup FlowType.js on my site and this is what I did so far without getting the script to work:

Step 1
CSS is setup and working

Step 2
FlowType.js is implemented in HEAD

Question: How do I include "flowtype.jQuery.js" into my HTML doc?

Step 3
Call $('body').flowtype(); is added before the end of my body tag like this:

Any help or feedback is appreciated!

Thank you.
Alex

Just curious if there's a way to implement this with Foundation 5?

I'm currently building a responsive template and would really like to incorporate FlowType into it.

Please let me know.

Thanks!

Hello,

We use flowtype.js in our project and its work perfect except tag text.
Can you please help to solve it.
Thanks
Jayesh Bhalodia

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

Hi -

I have a basic use of flowtype going:

$('html').flowtype
    minimum: 900
    fontRatio: 70

and it works great, but if I load the page under 900px it still scales initially. Is there a workaround?

The plugin works perfectly on text paragraphs.

However I am not able to get it to work on headlines (h1, h2, etc.).

I set the font size for my h2 at 3.5em in the stylesheet (for example). The headline is in the same

Hi

Extremely awesome yet simple stuff, can't wait to try it!

One minor suggestion: add a link to http://simplefocus.com/flowtype/ somewhere on the Github landing page -- that demo page is very well done and explains it all in a glance

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.

I'm not sure if this is an error in my code or a feature request, but I have a bootstrap page with several columns. At various points when navigating around the page, the width of the respective columns changes, and smoothly animates between widths.

Flowtype is working properly when the page first loads, or when I manually rescale the page, but if the column width changes, the text doesn't rescale, it reflows instead. Is this expected behaviour or am I doing it wrong?

I'm a beginner. I've been trying to get Flowtype to work with Gantry 5 (which is also on Github.com), but i have been unable to do it. I'm trying to apply Flowtype to HTML that renders the logo text on my template. (That HTML is just HTML and it doesn't rely on Gantry.) I think I need updated demo instructions that closely follow the latest version of FlowType.js. Also, it would be nice to have updated examples of how to apply it to specific divs and identifiers, similar to outdated examples shown in http://stackoverflow.com/questions/24603119/flowtype-js-not-working.

If you guys coordinate something with the Gantry project, that would be extra nice. Thx.
(Edit: mahagr made a Gantry Flowtype comment here: gantry/gantry5#1397

Do we need to add a noconflict statement for jquery?

Using FlowType on an entire site and it is working just fine. Now I have added a few form fields and see the following.

The text before the input field, the label, is resizing just nicely thanks to FlowType. However the text inside the input field stays at the same size when scaling the browser window.

My aim is to also have the text inside the form input field scale to the same size as the text before or outside the input field.

Is this possible purely with FlowType? When I assign an ID or class to the form and pass that to FlowType the input fields are not affected, at least not how I tried but I keep at it.

One approach that I thought of would be giving a class to each input field and then passing that class to FlowType but so far I did not get this to work either.

Another way I thought of would be to directly have jQuery measure the current font size of the text before/outside the input field in a variable and pass that to the font size for the text inside the input field. Not tried this and hope that would work. But would that also change the width and height of the form input field itself as if this works and the font size increases the input field's height would have to increase as well.

If someone has a more suitable idea to have the input field font size scale to the same size (and naturally have the input field's width and height expand correspondingly) as the rest of the form elements font size I am all ears.

Ultimately trying to create a real smooth responsive form whose responsiveness does not stop at the form input field.

Yes, this could be done with pure media queries and break points however I want the experience to be even more smooth than that and scale to the exact same font size inside and outside of the form input field.

Any "input" to this challenge is much appreciated ;)

edit: Just wanted to add this link to a free premium tutorial (just sign in) on web forms for people like me that are just starting out with forms, find this extremely helpful. https://webdesign.tutsplus.com/courses/web-form-design-and-development

It this possible at all?

When viewing the website (http://simplefocus.com/flowtype/) on my iphone it's about 35 characters per row. That looks great. Very readable

Using the demo on my desktop and shrinking the demo to mobile with about 70 chars per line it's almost unreadable.

Am I missing something?

I'd like to see the ability to exclude certain CSS selectors.

For example, I want to target .loop but occasionally I want .loop .small to be excluded from FlowType's magic.

I tried .loop:not(.small) but it didn't work.

Please add support for <a> tags. Thanks.

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...

Does anyone else use the DataTables jQuery plugin? If so, has anyone experienced an issue where FlowType appears to be broken? I can get my font to resize even after disabling DataTable's default font sizes.

Any advice would be greatly appreciated.

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.

Hi, I have installed the Wordpress version and it is not working in any version of IE. Works fine for Chrome and Firefox.

Thanks

Hey folks, have you noticed that when the page loads font first increased and then decreased. It can also be seen on your demo page (http://simplefocus.com/flowtype/demo.html) try to refresh the page a few times and you will see the effect. How to fix that?

Could you make this work for child selectors too, please.

Edit:

Scratch that. Realised I could use a wildcard e.g. p * and span *.

Hi
I just started using your library and took me some time to figure out that I have to use rules to each element. I was just doing the "body" rule and expecting everything to work. Can you please add couple of lines in sample code so new uses can understand they have to use the rule for each unique element.

Thank you for nice library

Peace