Baseliner.js View on Github

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?

Open source

Baseliner.js is available on Github for downloading, forking, or contributing.