diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..2e18c0a --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,13 @@ +## Submitting issues + +### Reduced test case required + +All bug reports and problem issues require a reduced test case. See [CSS Tricks - Reduced Test Cases](http://css-tricks.com/reduced-test-cases/) on why they _"are the absolute, ... number one way to troubleshoot bugs."_ + ++ A reduced test case is an isolated example that demonstrates the bug or issue. ++ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling. ++ A link to your site is **not** a reduced test case. ++ A [CodePen](http://codepen.io) is preferred so we can help you fix an error. ++ Until you provide a reduced test case, your issue will be closed. + +This guideline may seem a little harsh, but it helps dramatically. Reduced test cases help you identify the issue at hand and understand your own code. On our side, they greatly reduce the amount of time spent resolving the issue. \ No newline at end of file diff --git a/README.md b/README.md index 7197801..cb08849 100644 --- a/README.md +++ b/README.md @@ -1,52 +1,64 @@ # FitText.js, a jQuery plugin for inflating web type -FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element. +FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines. ## How it works Here is a simple FitText setup: - - - +```html + + + +``` -[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). Your text should now resize based on the width of the parent element. By default: *Font-size = 1/10th of the parent element's width*. +Your text should now fluidly resize, by default: Font-size = 1/10th of the element's width. -### The Compressor +## The Compressor If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is `1`. - $("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively) - $("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively) - -This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely. +```javascript +jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively) +jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively) +``` -### _new:_ minFontSize & maxFontSize -FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want responsive text but also need to preserve hierarchy. +This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely. - $("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +## minFontSize & maxFontSize +FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. -## CSS Tips +```javascript +jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); +``` -* Make sure your headline is `display: block;` or `display: inline-block;` with a specified width, i.e. `width: 100%`. -* Be ready to tweak till everything balances out. -* FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback. -* Make sure your element is appended to document before setting fitText. e.g. `$('