itsthatguy / gridwax Goto Github PK

CoffeeScript 100.00%

gridwax's Introduction

Gridwax

Vertical Rhythm is the spacing and arrangement between words as a user reads down the page. On the web, this is a difficult thing to get right, even with tools like Compass assisting. The problem really comes in when you have multiple columns of text. If you want text lines to consistently land in the same places, you really need a visual aid that you can quickly drop in at any point as a reference.

This is where the Gridwax bookmarklet comes in; Once you’ve got it secured on your bookmark bar, you can drop the overlay on your site, and use hotkeys to quickly adjust it to match your baseline.

Where to get it: gridwax.gs

Hotkeys

Adjust Vertical Spacing

shift+up shift+down

Adjust Vertical Offset

shift+left shift+right

gridwax's People

Stargazers

Watchers

Forkers

bpainter aral evanhahn legomushroom rexmac borkweb ccouturi alogonzac nexusventuri pivica sha198989 radum manolenso

gridwax's Issues

TypeError: $ is not a function this.pageWidth = $(document).width();

On the site I'm working on jQuery is not available on $, it is available on jQuery. I did see that you have code to pull in jQuery but that isn't working for me. Drupal on all sites, for instance, keeps jQuery away from $ and on jQuery

TypeError: $ is not a function

this.pageWidth = $(document).width();
gridwax.js (line 32)

Uncaught TypeError: boolean is not a function gridwax.js:16

The positioning of everything was screwy and the lineheight would only get smaller so I popped open Chrome 29.0.1547.65's inspector and noticed the JS error in the subject.

Website styles leaking into grid wax

Hi, nice tool!

I'm having an issue with Safari 7, where some of the site styles are affecting the Gridwax bar, making the input fields where line-height and offset values are shown sometimes unreadable. You might want to have stronger specificity in your selectors to avoid this.

Option for alternate colours (for dark sites)

I find this tool very useful, thank you, but the default colour of the horizintal lines makes it hard to work on dark themed websites. An option to change the colour would help in this regard.

Help Button

Add a help button to the bottom bar that shows the hotkeys for manipulating the grid.

Click to activate or by hitting shift+/

It might be time to rebuild gridwax from scratch

Clicking "close grid" in Firefox deletes entire page.

Background of gridwax bar does not show up in firefox

Refused to execute script from

I'm getting an error in console:

Refused to execute script from 'https://raw.github.com/itsthatguy/gridwax/master/gridwax.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

The color swatches do not align properly in the gridwax bar in firefox.

Wrong line-height size

When line-height is set to some "value", horizontal lines actually rendered at "value - 1". For example if I set height to 16, space between lines is 14 pixels and line is rendered at 15th. If I set 18, space between lines is 16 pixels and line rendered at 17th pixel and so on. This leads to wrong calculations of css properties.

I'm using Chrome 34.0.1847 with OSX.

Update readme to show new features.

Add new screenshot.

See Issue: #1
Added load management, should explain how that works.

Migrate to Javascript from coffee?

Would you consider migrating the code to pure Javascript rather than coffee?

I could help with a PR.

Keys to adjust offset + Vertical Spacing not working in Safari 6.0.5 OS X 10.8.5

Persist line height per site

Right now, I'm working on a site with line height of 24px. I always have to start with gridwax's default 18px then manually increment until I reach the target height. As I overlay grid every few steps in the design process, this really becomes tedious.

It would be great if the bookmarklet would store last used line height for a given site/domain. I guess one could add a cookie or use localStorage for this purpose?