A jQuery plugin for creating responsive container filling text.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
jquery.textsive.js

README.md

Textsive

A jQuery plugin for creating responsive container filling text.


Very often in graphic design the urge to stack words arises and you want that stack to be nice and square. Such was the case with Midnight and Viking. How do I get the bottom 6 letters to scale up and fill the same space as the top 8 without a whole bunch of styles AND keep it responsive? Well this plugin is that answer.

####Usage is very simple.

$("class/element/id").textsive();

Thats it!

Settings


Currently there are only 3 settings: maxFontSize, minFontSize, & lineHeight. Guess what they do... Usage is as with anything:

$(".fillDiv").textsive({maxFontSize: 1000, minFontSize: 10, lineHeight:0.95});

Line-height is set to EMs in order to maintain relations between the lines. 0.95 is the default and seems to the sweet spot. Adjust it as you will to get a desireable effect that will scale with the container.

I plan to possibly implement some more features at a future time. Perhaps the options to give your own block element to use in the expansion or assign class. I also like the idea of creating easing/animation functions to smooth the transition in size.

##End Well, goodbye for now. I'm open to suggestions for improvement as it will only benefit my own usage of the plugin in production.

For an example check it out here:

http://codepen.io/midnightviking/pen/wksbL