This component provide the benefit to adapt font-size CSS property to different screen sizes.
The goal is not to be used for each and every one of the html tags of your page, you have CSS for that, but to adapt different parts such as titles or a subtitles on a page header.
Better than explaining it, we can start adapting the "ElasticText" header at the top of this page for example. So, start adapting it by pressing the following button:
Now, take a look to the header text and shrink your browser window to see the text changing its size.
Stashy.ElasticText(selector)
Parameter | Type | Default | Description |
---|---|---|---|
selector | string | none | CSS selector for selecting the different tags you want to adapt |
Name | Description |
---|---|
on(ratio,minfontsize,maxfontsize) | Start adapting text sizes |
ratio. Being the default 1, if you increment or decrement the value the text resize will be more aggressive or less. Play with it in the playground and see the behaviour minfontsize. Minimum font-size of the resized text (for example "15px") maxfontsize. Maximum font-size of the resized text (for example "30px") All this parameters are optional |
Stashy.ElasticText(".hero-unit h1").on(0.6,"40px"); Stashy.ElasticText("h2,h3").on(0.8,"20px","50px"); Stashy.ElasticText("p").on();
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris lorem, vulputate nec euismod quis, luctus vitae augue. Maecenas velit tellus, mollis id molestie eget, pulvinar eu neque. Etiam elementum, velit nec vulputate laoreet, nisi est pulvinar arcu, eu blandit leo lorem in mi. Mauris pharetra risus laoreet quam bibendum rutrum. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Phasellus ultricies neque erat, at tempus nunc lobortis quis. Fusce eu leo faucibus, fringilla ante vestibulum, eleifend ante. Suspendisse tincidunt tortor lorem. Nullam eleifend, nulla quis ultricies tincidunt, erat enim blandit odio, id porttitor velit magna eget metus.
JS
There is a dependency with Stashy.Events because ElasticText is binding the resize of the window with the debouncedresize custom event defined there.