basehold.it, a baseline grid overlay served as a stylesheet

A grid overlay as a link tag

basehold.it is described as a quick, painless, JavaScript-free baseline overlay, and the whole idea fits in a single line of HTML.

`<link rel="stylesheet" href="http://basehold.it/24">`

That produces a 24 pixel baseline grid drawn over the page. There is no script to include, no build step, no configuration file and no account. You add the link, refresh, and the grid appears.

That simplicity is the design, not a limitation of the implementation. A baseline grid is a design tool, and design tools want to be zero-friction: the friction of installing a browser extension or writing a snippet of CSS to generate repeating gradients is exactly what stops people checking their vertical rhythm. A stylesheet request is the cheapest possible mechanism, and it is cacheable, and it does not interfere with the page's own JavaScript.

The service is at basehold.it and the repository is daneden/basehold.it, with the homepage given as http://basehold.it. The author is Daniel Eden, the primary language is TypeScript, and the package manifest declares the licence as MIT while the repository shows no licence type in its metadata, which is a small gap to close before you vendor anything.

The last push to the repository was on 2026-04-10 and there are no GitHub releases at all, so this is a service that is deployed rather than a package that is versioned. The page size and the rendering logic are not something you can pin a version of, which is fine for a design tool and not fine for anything else.

The URL is the configuration

Everything about the overlay is encoded in the path, and the format is regular.

The first segment is the baseline value in pixels, so `http://basehold.it/24` is a 24 pixel grid. The second optional segment is a colour, given either as a six digit hex code or as separate RGB values.

`<link rel="stylesheet" href="http://basehold.it/24/DEEFFF">`

`<link rel="stylesheet" href="http://basehold.it/24/255/42/85">`

A third optional segment is the alpha, so the same colour can be made translucent.

`<link rel="stylesheet" href="http://basehold.it/24/255/42/85/0.5">`

So the shape is a number, then optionally a colour in one of two notations, then optionally an alpha. The hex form is a convenience, and the separate-segment RGB form exists because a URL path is a better place for a colour than a query string when the whole point is that the URL is copyable and human readable.

The alpha is the parameter worth thinking about, because a baseline overlay is drawn on top of the page and an opaque one hides the content you are trying to measure. Half transparency is the default people gravitate to, and the README's example uses 0.5.

Because the configuration is entirely in the URL, sharing is trivial. Sending a colleague the link gives them the same grid on the same spacing and the same colour, which is the property that makes this useful in a review conversation rather than only in your own browser. There is no project file, no saved preset and no account, so there is nothing to keep in sync and nothing to lose.

The design decision implied by the URL scheme is that the service is stateless. It renders a grid from the parameters and returns a stylesheet. Whatever it does to draw the grid, it does not depend on who is asking or on what they asked before.

Image mode for use in your own stylesheet

There is a second output format, and it is the one to use if you want the overlay to be part of your own CSS rather than a separate link.

The image mode lets you grab the grid on its own, if you would rather apply it as a background in your own stylesheet.

html {
  background-image: url(http://basehold.it/i/24); /* 24px baseline */
  background-image: url(http://basehold.it/i/24/ff0000); /* with Hex colour */
  background-image: url(http://basehold.it/i/24/255/0/0); /* with RGB colour */
  background-image: url(http://basehold.it/i/24/255/0/0/0.85); /* with RGBA colour */
}

The path prefix changes from nothing to `/i`, and the same parameter scheme applies after it. The README shows the full set of variations, the plain grid, the hex colour, the RGB colour and the RGBA form with an alpha.

This is the more useful of the two modes for a serious workflow, and the reason is that a background image is something you can control. You can set `background-size`, repeat it, combine it with other background layers, put it on a specific element rather than on the whole document, and layer it with a gradient or a second image. A separate stylesheet linked into the page gives you the grid and nothing else, and you cannot easily change how it is drawn.

There is one implementation detail to notice in the CSS. The `background-image` property is declared four times in the example, once per variant. Only the last declaration wins in CSS, so those lines are documentation of the available URLs rather than a working set of rules, and if you copy them all you will get the RGBA variant and the three earlier ones will be discarded. It is a small thing, and it is the kind of thing that trips people who copy a README block wholesale.

Practically, you would use one of them, usually the image with an alpha, applied to the element whose text you are checking, with the background repeat set so the grid tiles down the page.

The bookmarklet reads your line-height

The third entry point is a bookmarklet, and it exists to solve the one problem the link tag cannot: choosing the right baseline value.

The idea is that the baseline should match the line-height of the text, and rather than making you read the computed value out of the developer tools, the bookmarklet does it for you.

javascript:(function(){var%20link=document.createElement("link");link.setAttribute("rel","stylesheet");link.setAttribute("href","http://basehold.it/"+parseInt(window.getComputedStyle(document.body).getPropertyValue("line-height"),10));document.head.appendChild(link);})()

What it does is create a link element, set its rel to stylesheet, set its href to the basehold.it URL with the parsed line-height of the body appended, and append it to the document head. The README says this will add the default grid according to your body line-height, using `getComputedStyle`.

The detail that makes it useful is `parseInt(..., 10)`. A computed line-height is a string, and it may well be a value in pixels like `24px`, so the integer parse with a radix of 10 is what turns it into the number the URL wants. That is the whole trick, and it is why the URL scheme takes a plain integer.

There is a limit to the accuracy of the result, and it comes from where the line-height is read. The bookmarklet reads the computed line-height of `document.body`, which is the line-height applied to the body element, and that is not necessarily the line-height of the text you care about. If a container overrides the line-height for its own type scale, or if the body uses a unitless value that the browser has already resolved, the number you get is the body's rather than the paragraph's. For a page with a single type scale, which is most pages, that is fine. For a design system with a modular scale, it is a starting point rather than an answer.

The bookmarklet is also the entry point with the sharpest failure mode, because it injects a link to an http:// URL. On a page served over HTTPS, a browser will block that as mixed content, and the grid will simply not appear. The link tag route has the same problem, and it is worth knowing before you spend an afternoon wondering why the overlay is invisible on a secure site.

What is actually running the service

The repository is small, and the dependency list tells you the stack.

It is a Next.js application. The scripts are `next dev`, `next build` and `next start`, the framework is pinned at 16.1.2, and React and React DOM are at 19.2.3. The `pages/` directory rather than an `app/` directory says it uses the older Pages Router, and `vercel.json` says where it is deployed, which is Vercel, the natural host for a Next.js application. There is a `public/` directory for static assets, a `next-env.d.ts` for the TypeScript environment types, a `tsconfig.json`, a `yarn.lock` and a `.prettierrc.js`.

The runtime dependencies are minimal: `isomorphic-fetch` with its types, and `@zeit/next-css`. The fetch library is there because the service has to fetch or generate something, and the CSS package is for styling the documentation page that explains the service.

The manifest is marked `"private": true`, which confirms that the package is not published to a registry. There is no version history to speak of either, since the manifest says version 1.0.0 and there are no GitHub releases, so the deployed service is whatever is on the master branch.

So the implementation is a small serverless Next.js function that turns a path into a stylesheet or an image. There is no database, no user state and no configuration file, which matches the stateless design the URL scheme implies. The 404 and 500 behaviour is not documented, and neither are the caching headers, which for a service whose whole output is a static grid is the one thing you would want to know, since an uncached request per page view is a real cost for a free service.

Given the size of the code, the interesting engineering question is not how the grid is drawn but how the output is produced cheaply. A baseline grid is a repeating linear gradient, or an SVG, or a small PNG tile, and the parameter set is small, so the answers are all plausible. The README does not say, and the source is short enough to read.

The alternatives, and where the service earns its keep

There are several ways to get a baseline overlay, and the differences are about where the tool lives.

The first alternative is to do it in the browser you already have. Chrome's rendering tools include a grid overlay, and the CSS grid and flexbox inspectors in any modern devtools let you set a grid overlay on an element directly. That is the zero-dependency answer and it never touches the network, which makes it strictly better for your own machine.

The second is a local stylesheet. A repeating linear gradient written in your own CSS, or a small SVG you keep in the project, gives you a grid with no external dependency, and it can be committed alongside the design tokens so the whole team measures against the same baseline. That is the better answer for a project where the baseline is a decision you have already made and want to enforce.

The third is a browser extension. The extensions for baseline and rhythm overlays exist and are the traditional tool, and they have the advantage of being toggled on the page you are looking at rather than added to the source. The disadvantage is that they are another install, and they are per-developer, so two people checking the same page can be looking at different grids.

basehold.it's difference in approach is that it is a URL. That is genuinely useful in two situations that the alternatives cover badly. The first is sharing: you paste a link into a review or a chat and the other person sees exactly your grid, with no installation and no configuration to match. The second is checking a site you do not control, such as a competitor's page or a live environment, where a local stylesheet would mean editing the page anyway and an extension might be blocked by policy.

The cost is the one already identified. The overlay depends on a third-party host being reachable, over plain HTTP, and if it is not, the page looks unchanged and the failure is silent. That is acceptable for a design tool you use deliberately and unacceptable as part of a build or a test, which is why the local stylesheet is the right answer for anything permanent.

Editorial conclusion

basehold.it suits a front-end developer who wants to check a page's vertical rhythm against a baseline and does not want to install anything or write a script, and it suits anyone who wants to share a baseline overlay with a colleague by sending a link. It does not suit a production site, because a debugging overlay served from a third-party host over plain HTTP is a mixed-content and availability problem on an HTTPS page. Verify first that the baseline value you pass matches the line-height of the text you are checking, that the alpha you choose is visible against your background, and that the service is reachable from the environment you are testing in, since the overlay fails silently when the stylesheet does not load.

Frequently asked questions

Official sources

1. daneden/basehold.it on GitHub
2. Issues
3. Project website
4. README