Author: | attilioweb |
---|---|
Views Total: | 346 views |
Official Page: | Go to website |
Last Update: | August 15, 2014 |
License: | MIT |
Preview:

Description:
FluidFont.js is a standalone JS library which makes the font size of your text as large as possible to fit within the container’s width. Great for responsive web layout.
How to use it:
Add some text into a container with an unique CSS ID.
<p id="demo"> Morbi venenatis ultricies urna adipiscing auctor. Morbi ultricies elit sit amet lectus fringilla ornare. Curabitur pulvinar tellus tristique vehicula tempor. Fusce mollis a magna facilisis luctus. Donec at hendrerit risus. Praesent a sem turpis. Mauris accumsan tellus vitae vulputate molestie. Ut ut leo et lacus rhoncus luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
Set the width of the container in your CSS.
#demo { width: 80%; margin: 0 auto; }
Include the fluidfont.js script at the bottom of the document.
<script src="FluidFont.js"></script>
The Javascript to make the font 10% of the container width, a minimum size of 14px, and a maximum of 64px.
// fluidFont(perc, min, max) document.getElementById('demo').fluidFont(0.1, 14, 64);
More usages.
//makes the font 17% of the width document.querySelector('#myId').fluidFont(0.17); //makes the font 3% of the width for all elements with class="myClass" document.querySelectorAll('.myClass').fluidFont(0.03); //sets the minimum font size to 20px document.getElementById('myId').setMin(20); // INTERNET EXPLORER 8: Multiple Elements var elements = document.querySelectorAll(".myClass"); for(var i=0 ; i < elements.length ; i++) { elements[i].fluidFont(percent); }