Linear is a ruler application for Mac, made with web development in mind. It sits in your menu bar and doesn't get in your way. Here are a few highlights:
- Linear is not a browser extension. Browser extensions are really useful, but fall short when inspecting the DOM of a document, since they often inject overlay elements themselves.
emvalues; set the default font-size to your convenience.
- Create multiple rulers.
- Duplicate a ruler, preserving its height and width. Really useful when checking margins.
- Default themes adapt to dark and light backgrounds.
- System-wide shortcuts to hide/show rulers.
- Fine-tune a ruler's positions using arrow keys. Hold shift for faster move (thanks to @gtagle).
- Show center guides (thanks to @radiovisual).
- Fully customizable CSS themes (thanks to @radiovisual).
Here is a video to get you started.
Linear is proudly built with Electron.
$ brew cask install linear
Linear uses a transparent, resizable frameless window, which is rather experimental. This is why Mac is the only supported platform at the moment.
Creating your own linear theme is as simple as adding a custom css file to linear's theme directory. Linear will use the name of your custom css file as the name of your theme. Follow these steps to get you started:
- Copy the
universal.cssfile and rename it to your new theme name (e.g.
- Edit your custom css file to get the look you want.
- Save your custom css to linear's theme directory:
- Open (or restart) the linear application.
- Select your new theme by clicking on the 'theme icon' on the bottom right corner of your ruler.
- You can also set your new theme to the Default Theme in the settings menu.
Tip: Linear will titlecase your css files to generate your theme name. For example, a file named
my-awesome-theme.css will be seen in linear as
My Awesome Theme.
Any contribution is welcome, in fact, you'll receive an instant hug for doing one. ;) Linear was built as a side project and is a little rough around the edges, so even bug reports would be great.
After you've cloned or forked the repo, you'll need to install the dependencies (like Electron, etc):
$ npm install
Then to start the app:
$ npm start
To start in debug mode (attaches chrome developer tools):
$ npm debug
MIT © The UX Shop