diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..41388e2 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +fittextjs.com \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 2e18c0a..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,13 +0,0 @@ -## 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 deleted file mode 100644 index cb08849..0000000 --- a/README.md +++ /dev/null @@ -1,64 +0,0 @@ -# FitText.js, a jQuery plugin for inflating web type -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 - - - -``` - -Your text should now fluidly resize, by default: Font-size = 1/10th of the element's width. - -## 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`. - -```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) -``` - -This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely. - -## minFontSize & maxFontSize -FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. - -```javascript -jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); -``` - -## CSS FAQ - -- :warning: Run FitText before anything that hides the element you're trying to size (e.g. before Carousels, Scrollers, Accordions, Tabs, etc). Hiding an element's container removes its width. It can't resize without a width. -- :warning: **Make sure your container has a width!** - - `display: inline` elements don't have a width. Use `display: block` OR `display: inline-block`+ a specified width (i.e. `width: 100%`). - - `position:absolute` elements need a specified width as well. -- Tweak until you like it. -- Set a No-JS fallback font-size in your CSS. -- :new: If your text is full width, you might want to **NOT** use FitText and just use CSS `vw` units instead. Supported in all major browsers. - -## Don't use jQuery? -That's okay. Check out these handy non-jQuery versions maintained by other people. - -- [non-jQuery FitText](https://github.com/adactio/FitText.js) from @adactio -- [Angular.js FitText.js](https://github.com/patrickmarabeas/AngularJS-FitText.js) from @patrickmarabeas -- [AMP-HTML FitText](https://github.com/ampproject/amphtml/tree/master/extensions/amp-fit-text) -- [FitText UMD](https://github.com/peacechen/FitText-UMD) by @peacechen - -## Changelog -* `v 1.2` - Added `onorientationchange` event -* `v 1.1` - FitText now ignores font-size and has minFontSize & maxFontSize options -* `v 1.0.1` - Fix for broken font-size. -* `v 1.0` - Initial Release - -## In Use: -- [Trent Walton](http://trentwalton.com) - -If you want more exact fitting text, there are plugins for that! We recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman or [SlabText](https://github.com/freqDec/slabText) by Brian McAllister. - -### Download, Fork, Commit. -If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas. diff --git a/bower.json b/bower.json deleted file mode 100644 index c4887a3..0000000 --- a/bower.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "jquery-fittext", - "version": "1.2.0", - "main": "jquery.fittext.js", - "dependencies": { - "jquery": ">= 1.6" - }, - "ignore": [ - "example.html", - "CONTRIBUTING.md" - ] -} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..66ddc10 --- /dev/null +++ b/css/style.css @@ -0,0 +1,179 @@ +body { + background: #c44032; + color: #f4f1de; + font-size: 100%; + font-family: "proxima-nova-1","proxima-nova-2", 'Arial', sans-serif; +} + +.download{ + font: 36px "anchor-web-1","anchor-web-2", 'Arial Narrow' sans-serif; + text-align: left; + margin-bottom: 0px;} + +a{ + color: #f4f1de; + text-decoration: underline; + -webkit-transition: color 0.15s ease-out; + -moz-transition: color 0.15s ease-out; + } + +a:hover{ + color: #4b1811;} + + +.download a{ + padding: .095em .8em; + background: url(../img/arrow.png) no-repeat; + background-size:100%; + margin-left: .4em; + -webkit-transition: margin 0.15s ease-out; + -moz-transition: margin 0.15s ease-out; + text-decoration: none;} + +.download a:hover{ + color: #f4f1de; + margin-left: .6em; + margin-right: -.2em;} + + +p{ + font-size: 1em; + margin: 0 0 1.5em 0;} + +.container { + width: 94%; + max-width: 1440px; + margin: 0 auto; + } + +img{ + width: 100%; + margin: 1% auto 5%; + display: block; + } + +header { + margin: 3.5% 0 4%; +} + +#carbonads{ + background: rgba(0,0,0, 0.075); + padding: 2%; + margin: 2% auto; + display: block; + overflow: hidden; + border-radius: 0.25em; +} + +#carbonads a{ + font-size: 0.8em; + text-decoration: none; +} + +#carbonads img{ + float: left; + margin: 0 2% 0 0; +} + +#carbonads .carbon-text{ + display: block; + margin-bottom: 0.25em; +} + +footer{ + border-top: 1px solid rgba(0,0,0, 0.25); + padding-top: 1.5em; + margin-top: 1.5em; + margin-bottom: 6%; + display: block; +} + +footer p{ + font-size: 0.8em; +} + +h1 { + text-align: center; + text-indent: -.12em; + color: #f4f1de; + font: 220px "anchor-web-1","anchor-web-2", 'Impact', sans-serif; + font-weight: 900; + display: inline-block; + margin: 0 auto; + line-height: 1; + width: 100%; + text-shadow: #863027 .01em .01em 0, + #863027 .02em .02em 0, + #863027 .03em .03em 0, + #863027 .04em .04em 0, + #863027 .05em .05em 0, + #863027 .06em .06em 0, + #863027 .07em .07em 0, + #863027 .08em .08em 0, + #863027 .09em .09em 0, + #863027 .1em .1em 0; +} + +h1 span.char4 { + letter-spacing: .05em; + margin-right: -.107em; +} + +.char2 { + margin-right: .01em; +} + +.char3 { + margin-right: -.01em; +} + +.char6 { + margin-right: .035em; +} + +::-moz-selection{ background: rgba(0,0,0, 0.075); color:#fefcf2; } +::selection { background: rgba(0,0,0, 0.075); color: #fefcf2; } + + + +@media screen and (min-width: 650px) and (max-width:1099px) { + p{ + font-size: 1.5em; + } + #carbonads a, footer p{ + font-size: 1em; + } +} + +@media screen and (min-width: 650px) { + .container { + width: 80%; + } +} + +@media screen and (min-width: 1100px) { + p{ + font-size: 2em; + } + #carbonads a, footer p{ + font-size: 1.12em; + } +} + +@media screen and (min-width: 1280px) { + p{ + font-size: 2.3em; + } + #carbonads a, footer p{ + font-size: 1.25em; + } +} + +@media screen and (min-width: 1400px) { + p{ + font-size: 2.75em; + } +} + + + diff --git a/example.html b/example.html deleted file mode 100644 index c6a2aee..0000000 --- a/example.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - FitText - - - - - - - - -
-
-

Squeeze with FitText

-

Squeeze with FitText

-

Squeeze with FitText

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- - - - - - - diff --git a/img/arrow.png b/img/arrow.png new file mode 100644 index 0000000..29b8f35 Binary files /dev/null and b/img/arrow.png differ diff --git a/img/fittext_screens.png b/img/fittext_screens.png new file mode 100644 index 0000000..77b384f Binary files /dev/null and b/img/fittext_screens.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..19673dd --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + FitText - A plugin for inflating web type + + + + + + + + + + + + + + + + + + +
+
+

FitText

+

A jQuery plugin for inflating web type Download on Github

+
+ +
+

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

+ screenshots +

Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

+
+ + + + + + + + + + diff --git a/jquery.fittext.js b/jquery.fittext.js deleted file mode 100644 index 0b3ddef..0000000 --- a/jquery.fittext.js +++ /dev/null @@ -1,43 +0,0 @@ -/*global jQuery */ -/*! -* FitText.js 1.2 -* -* Copyright 2011, Dave Rupert http://daverupert.com -* Released under the WTFPL license -* http://sam.zoy.org/wtfpl/ -* -* Date: Thu May 05 14:23:00 2011 -0600 -*/ - -(function( $ ){ - - $.fn.fitText = function( kompressor, options ) { - - // Setup options - var compressor = kompressor || 1, - settings = $.extend({ - 'minFontSize' : Number.NEGATIVE_INFINITY, - 'maxFontSize' : Number.POSITIVE_INFINITY - }, options); - - return this.each(function(){ - - // Store the object - var $this = $(this); - - // Resizer() resizes items based on the object width divided by the compressor * 10 - var resizer = function () { - $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); - }; - - // Call once to set. - resizer(); - - // Call on resize. Opera debounces their resize by default. - $(window).on('resize.fittext orientationchange.fittext', resizer); - - }); - - }; - -})( jQuery ); diff --git a/js/jquery.fittext.js b/js/jquery.fittext.js new file mode 100644 index 0000000..c5d7ca1 --- /dev/null +++ b/js/jquery.fittext.js @@ -0,0 +1,40 @@ +/*global jQuery */ +/*! +* FitText.js 1.0 +* +* Copyright 2011, Dave Rupert http://daverupert.com +* Released under the WTFPL license +* http://sam.zoy.org/wtfpl/ +* +* Date: Thu May 05 14:23:00 2011 -0600 +*/ + +(function( $ ){ + + $.fn.fitText = function( kompressor ) { + + return this.each(function(){ + var $this = $(this); // store the object + var fontResize = origFontSize = $this.css('font-size'); // init the font sizes + var compressor = kompressor || 1; // set the compressor + + // Resizer() resizes items based on the object width divided by the compressor * 10 + var resizer = function ( obj ) { + fontResize = obj.width() / (compressor*10); + fontResize = (fontResize >= origFontSize)? origFontSize : fontResize; + obj.css('font-size',fontResize); + } + + // Call once to set. + resizer($this); + + // Call on resize. Opera debounces their resize by default. + $(window).resize(function() { + resizer($this); + }); + + }); + + }; + +})( jQuery ); \ No newline at end of file diff --git a/js/jquery.lettering-0.6.1.min.js b/js/jquery.lettering-0.6.1.min.js new file mode 100644 index 0000000..43d7a18 --- /dev/null +++ b/js/jquery.lettering-0.6.1.min.js @@ -0,0 +1,2 @@ +/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */ +(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+=''+item+''+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery); \ No newline at end of file