Add window max/min width options. #8
Conversation
|
Cool. Can you provide a jsbin or something to demonstrate your use case? |
|
Here's the site I'm developing it for: http://clients.somadesign.ca/pegcity/ FitText is being used for the top nav and the tagline. The top nav converts to a dropdown at 480px, so I don't want FitText active at that point. At 700px, the tagline goes from under the logo to beside it, at which point I don't want it scaling any more. |
|
I like Matt's logic, that FitText should be conditionally applicable. I'll add a use case here. These screenshots show a title that uses FitText and looks the way I intend at different viewport widths: At narrow widths my display typeface becomes unsuitably thin, so I switch to something made for smaller sizes. Unfortunately, instead of looking like this: ... it looks like this: I tried adjusting the width value to affect font-size (per Trent's suggestion), but that doesn't work: Even when I manually insert nonbreaking spaces, something's not right. Plus, I don't want to do this anyway because the title should be allowed to wrap: If I were able to conditionally apply FitText, I would disable it when I switch my typeface. I might even apply a second set of FitText instructions that only work at smaller sizes. |
|
Totally seeing the need here. Great use case, Tim. It looks like @mattwiebe's solution would work. It's by far the easiest to understand from a designer perspective. Proof-of-concept-wise, were you able to get your design working using Matt's fork? FWIW, I like this fork but am taking issue #34 into account, which creating ~ 3 editions (small, medium, large widths) per page could further that problem. But there might be some magic in #28 that would solve memory leaking in an ajax situation. |
|
I have not tried Matt's fork. Out of curiosity, would it be possible to use ems as a width value? And if so, would the ems used via a FitText parameter be aware of context in the CSS? On Jul 9, 2012, at 10:50 AM, Dave Rupert wrote:
Tim Brown |
|
Circling around to this 2 years later. Sorry. 😿 It maybe makes more sense to use Anyone passionate about this. I could move it into a FitText 2.0 milestone. |
|
|
|
Sooo.... something like: var resizer = function(){
if(window.matchMedia && window.matchMedia( settings.mediaQuery ).matches) {
// do stuff
} else {
// DESTROoOOOY!
}
});If we keep support as is, and just enhance things, we could do something like |
|
I've added optional support for Paul Irish's matchMedia polyfill in my pull request (#126). You can just specify the media query string as the |
Ran into responsive design scenarios when FitText should only be invoked above certain sizes due to different layouts. This provides maxWidth/minWidth options so that FitText will only fire inside that window width threshold - otherwise, it'll clear the inline font-size so that your stylesheet is doing the work.