Giter Club home page Giter Club logo

linear's Introduction

Linear

Linear Img

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.
  • Uses px or em values; 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.

Installing

Download the latest build or install via homebrew (thanks to @goronfreeman):

$ brew cask install linear

Caveats

Linear uses a transparent, resizable frameless window, which is rather experimental. This is why Mac is the only supported platform at the moment.

Customizable Themes

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:

  1. Copy the universal.css file and rename it to your new theme name (e.g. my-awesome-theme.css).
  2. Edit your custom css file to get the look you want.
  3. Save your custom css to linear's theme directory: /Users/<username>/.linear/themes
  4. Open (or restart) the linear application.
  5. Select your new theme by clicking on the 'theme icon' on the bottom right corner of your ruler.
  6. 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.

Contributing

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.

Development

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

License

MIT © The UX Shop

linear's People

Contributors

mikaa123 avatar parro-it avatar radiovisual avatar sbruchmann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

linear's Issues

Place linear.json file somewhere besides the home directory

I like to keep my home directory nice and clean, but Linear dumps a json file that is kind of annoying to have there for me. Would it be possible to put it into a hidden folder, or anywhere else besides the home directory? Even just making it a dotfile would work for me.
screen shot 2016-01-04 at 9 45 43 pm

add ruler marks and/or guides

In your demonstration video, you use two different rulers to check the margins of a webpage element.

If Linear's rulers had ruler marks (the little lines that are usually on rulers):

ruler-marks
and/or Linear's rulers had draggable guides (much like the guides you can drag out from rulers in Photoshop), then you could easily check the margins of an element with only one ruler.

For example, in the image below, I have shown draggable guides (in red) that show the guide's position (in px, relative to the edge of the ruler that the guide was dragged from), which can easily tell me that the web page element I am measuring is 10 pixels away from each of the ruler's edges:

drag-guides

Each guide would have a key piece of data attached to it: The distance (in px or em) from the ruler edge it was dragged from.

Adding draggable guides could turn this into a powerful tool for analyzing/troubleshooting the layout of webpages, and element the need to duplicate the rulers for checking balance.

Imagine a scenario where you want to check all the margins of an element (top, bottom, left and right). You can either try to manage 4 rulers on the page (being careful not to accidentally change the width or height of any of them), or manage one ruler instance with 4 guides. One ruler with 4 guides would be a lot easier!

Serif font in settings

Hi,

first of all thanks for this awesome electron app. It works like a charm is is damn useful.

I spotted a little visual glitch with the fonts in the settings dialog:

Screenshot

Reason ▶️ settings.css:

body {
    font-family: "Open Sans";
    padding-left: 1em;
}

So I would say it needs a proper font stack or you have to include the webfonts. Cant you reference the ones within /src/assets/fonts/?

I could try to create a PR tonight …

better contrast for ruler lines and text

When viewing this ruler across multiple screens on multiple machines, I find that occasionally the rulers are hard to see/read.

Here is a screenshot I took from one of my computer screens (ruler width and height down in the bottom left corner are very difficult to see):

linear-contrast

When I switch to "dark mode", I still have readability issues when there are situations that cause "dark on dark", for example, notice how the width value is now completely unreadable in the bottom left corner of the ruler):

readability-on-dark

I propose that the ruler data (and the ruler lines) get drawn with contrasting lines (double lines with a dark and light lines) so that the styles readably-universal to dark or light situations, or the ruler lines and text data get a subtle but effective background color (or drop shadow?) to help offset the ruler text from the browser or screen text. Something like the image below would make a big difference in universal readability (using the same screenshot example as above, notice how much easier it is to read the width value in the bottom left corner):

better-contrast

Don't allow negative width/height values

Seems the update to Electron v1+ has changed some behaviors in the Chromeless window, and now the rulers are able to resize themselves to negative widths and heights:

image

Before the update, the rulers would lock themselves out at a width/height of 0,0, and not the rulers get smaller than that.

[Feature suggestion] - A vertically-centered ruler

Hi,

I would like to suggest a feature - vertically-centered ruler. When we click for that ruler from the menu bar OR from keyboard shortcut, we get a straight line at the middle of our browser window.

This is just a straight line. Not like the current ruler where it's square in shape.

Love this app! ❤️

Upgrading Electron to `1.2.2`

Upgrading Electron to 1.2.2 caused problems (#32 #33). We might find more as we go along. Yet it also brings a fair share of new APIs. My hope is that it makes frameless transparent windows work on other systems than MacOS. We'll have to check that :)

In the meantime, let's make this ticket the meta-ticket for any regressions caused by the migration.

settings font-size not working.

In the readme.md, it says:

Uses px or em values; set the default font-size to your convenience.

It's the "set the default font-size to your convenience" part that I am wondering about...

The settings menu has an option for setting the Font Size, but:

  1. The font-size option in the settings doesn't appear to do anything; and
  2. The font-sized entered into the settings window isn't saved into the settings.json file, and
  3. The font-size entered into the settings window is not reloaded or remembered after the settings window is closed and reopened.

So should this feature be removed, and we can let the the users override the font size in their own custom theme(s)?

Version 1.4.0 immediately crashes

Reported on Homebrew/homebrew-cask#21909. I can reproduce as well. As soon as I open Linear, it immediately closes. Console output:

13/06/16 12:36:21,639   launchservicesd[78] SecTaskLoadEntitlements failed error=22
13/06/16 12:36:21,642   launchservicesd[78] SecTaskLoadEntitlements failed error=22
13/06/16 12:36:21,646   launchservicesd[78] SecTaskLoadEntitlements failed error=22
13/06/16 12:36:21,698   appleeventsd[51]    SecTaskLoadEntitlements failed error=22
13/06/16 12:36:21,731   linear Helper[63516]    GVA info: preferred scaler idx 0
13/06/16 12:36:21,767   com.apple.xpc.launchd[1]    (com.electron.linear.270752[63515]) Service exited with abnormal code: 1

OS X 10.11.5 (15F34)

Unexpected rectangles appearing in background

Ever since the upgrade to Electron version 1.2.2, there are randomly-sized rectangles appearing in the background of the ruler windows (notice the darker region in the lower left of the ruler window):

image

"Apply theme to all open rulers" requires mouseover(s) for repaint

The new "Apply theme to all open rulers" button in the settings menu DOES work, but for some reason the visual changes to the ruler are only updated (repainted) after you mouseover or focus the ruler window. Occasionally the change happens without mouseover or repaint, but this is rare.

Is anyone else having this problem, or is it just me?

Working?

That's all that I have in installe app

How it should work?

OS X 10.11.1

add linter to development dependencies

In my latest PR #17, I cleaned up a lot of code inconsistencies (mostly just spaces and tabs), to make things a bit more uniform, but I propose that a linter be added to the devDependencies, so that developers working on new features or pull requests can all adhere to the same coding style.

The best tool I have seen for this is XO, which is super simple to use. Just install it with:

npm install --save-dev xo

and then add this to your package.json:

"scripts": {
  "test": "xo"
}

That's all you need to get linting support, but you can take it a step further and get Travis to run your linting on all Pull Requests that get submitted (highly recommended) by adding a .travis.yml file with:

language: node_js
node_js:
  - 'stable'

and then whenever a new pull request (from any user) has been submitted, Travis will run the linting, and will report that the PR is not ready to be merged until the linting issues have been fixed.

Its a beautiful thing! 😄

1.4.1 is crashing

Hi,

The latest v1.4.1 is crashing everytime I launched it.
This is just FYI.

I'm on OSX 10.12.6.

Thank you.

Custom theme CSS

We've all got different needs and screens, and since this tool is for web developers, we should let web developers hack the themes to their convenience.

`brew cask install linear` fails

Unable to install linear using homebrew.

$ brew cask install linear

Error: Cask 'linear' definition is invalid: Bad header line: parse failed

Settings, prefered color selectable

At first, thank you for the useful tool!

Could you please make selectable on the settings window, which color is prefered? Most of time I need black lines and have to switch the color, whenever I use Linear.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.