Baseliner

All your baseline are belong to us

Baseliner is a Chrome, Firefox, and MS Edge extension for perfectionist Front-End Developers and UX Designers.

This tool will add grid layer on top of any website to be used as a guidance when developing interfaces.

Features

You can set the horizontal and vertical guides to match your specification.

For better experience, you can change the colour of the lines as well as the opacity, making it easier to compare the grid with your website design.

The offset field enables you to add some padding to the top of the grid, in case your grid starts lower down the page.

If the page you are testing has some styles getting in the way of Baseliner, you can enable Force Styles to apply !important to the extension styles.

Persistent Data

Baseliner will save current configuration values into the Chrome Storage API. This enables the user to have a persistent experience.

Issues? Bugs? Suggestions?

Please, open an issue and let us know about new features you wish we support or issues you've found while using the app.

Installation

Baseliner is an extension for Chrome, Firefox, and MS Edge

Manual Installation

You can also install Baseliner without using the Chrome Store, this is helpful if you want to use a new feature that was no published yet.

1. Download this repo as a Zip file and extract it into a folder
2. Open Chrome Extensions page: chrome://extensions/
3. Click Load unpacked extension
4. Find the folder from #1 and select it

Developer Notes

Chrome

1. After updating code & bumping manifest version, run yarn build
2. Compress /build folder and submit it

Firefox

1. Replace manifest with firefox_addon/manifest.json, it has an extra field needed for Firefox

2. Compress the files in the folder, not the folder itself (opposite of Chrome)

3. Firefox doesn't like external files, so we need to copy workbox-sw.js into a local file and then reference it under build/service-worker.js like:

   importScripts('/third_party/workbox/workbox-sw.js');

   workbox.setConfig({ modulePathPrefix: '/third_party/workbox/' });

MS Edge

Same steps as Chrome.

TODO

1. Add Typescript
2. Domain and website?
3. Contribution notes

Future ideas

1. Use chrome.tabs.insertCSS instead of creating style tag: the caveat is that removeCSS is not supported in Chrome yet (FF only)