Baseline grids allow us to maintain vertical rhythm on our designs. But what developers should do, if they want to check how a baseline is performing in the code? Baseliner.js is the answer.
Baseliner({height: 28});
That’ll display a 28px baseline grid overlay. But if you want to set up multiple baselines for specified media queries, you can do this as well. On this website, I used something like that:
Baseliner([
{query: "(min-width: 0px)", height: 28},
{query: "(min-width: 500px) and (orientation: landscape)", height: 32},
{query: "(min-width: 900px)", height: 38}
]);
One last thing: you can specify a custom colour for the baseline using HTML colour names, or HEX/RGB/RGBA values, like so:
Baseliner([
{query: "(min-width: 0px)", height: 28, color: "grey"},
{query: "(min-width: 500px)", height: 32, color: "#D8D8D8"},
{query: "(min-width: 900px)", height: 38, color: "rgb(126, 200, 116)"},
{query: "(min-width: 1200px)", height: 42, color: "rgba(0, 140, 150, .5)"}
]);
Is it much clearer which media query is currently applied, huh?
Baseliner.js is available on Github for downloading, forking, or contributing.