A (vanilla) Javascript plugin for creating big, bold, and beautiful headlines.
As a node module:
$ npm install vanilla-slabAs a standalone plugin, include the minified or non-minified compiled library:
<script src="path/to/plugin/vanilla-slab.build.min.js"></script>
<script src="myotherscripts"></script>
</body>
...Add a class of 'js-vanilla-slab' to a header on your page. Then initialize for your preferred installation method:
As a standalone plugin:
var mySlab = new VanillaSlab;
mySlab.init();As a node module:
var VanillaSlab = require('vanilla-slab');
var mySlab = new VanillaSlab;
mySlab.init();As a standalone plugin:
var mySlab = new VanillaSlab;
mySlab.init({
selector: '.my-selector',
minWordsPerLine: 4,
...
});As a node module:
var VanillaSlab = require('vanilla-slab');
var mySlab = new VanillaSlab;
mySlab.init({
selector: '.my-selector',
minWordsPerline: 4,
...,
});Key: selector
Type: String
Default: .js-vanilla-slab
This should be a valid css selector for the class that is applied to the headline you want to affect.
Key: maxFontSize
Type: Integer
Default: 300
The maximum font size you want your headlines to be.
Key: minWordsPerLine
Type: Integer
Default: 2
The minimum amount of words you want to allow per line. Depening on the target headline, this may be overridden in the last line.
Key: maxWordsPerLine
Type: Integer
Default: 5
The maximum amount of words you want to allow per line. Depening on the target headline, this may be overridden in the last line.
Key: minCharsPerLine
Type: Integer
Default: 20
The minimum amount of characters you want per line.
Key: buffer
Type: Float
Default: 0.95
This is a bit of a magic number. It's used to calculate the ideal number of characters per line as well as a few other fudge factors. Generally you want it to be a two-digit number less than 1. This is the setting that you will need to experiment with for the best results with your chosen font.
Key: raf
Type: Boolean
Default: true
When debouncing the plugin on screen resizes, set to true to use "Request Animation Frame" instead of a timout. Using RAF is a little smoother and more progressive, but supported in fewer browsers.
Key: delayCheck
Type: Boolean
Default: false
Occasionally when dealing with a web font the code will execute
before the web font has downloaded, resulting in incorrect calculations
and a poor display. Dealing with webfont loaders is tricky, so as a
simple hack, set the delayCheck to true to have the script check to make sure the
headline does not exceed the parent width. If it does, the script will
recalculate.
This plugin is a port of this excellent jQuery plugin: https://github.com/freqDec/slabText/. It's been interpreted and heavliy modified for my own devices, but retains a lot of the same concepts as freqDec's plugin.
It takes a headline string and determines the ideal amount of characters per line based on the available width. It then attempts to build up individual strings within that headline based on specified parameters.
Disclaimer: This plugin fluctuates depending on your chosen font face. It can take some experimentation to find the right combo of paramters to get the correct effect.
This plugin uses gulp for build tasks. To concatenate and compile the
scripts, run gulp. To run the tests, run
gulp test. To build the minified standalone,
run gulp build.