ebay / design-grid-overlay Goto Github PK

Separate out overlay, grid, and potentially alignment tool into logical sections - Icon w/ labels for tabs?

For example, with "Large to Small Breakpoint" set to 600, it will show Large columns at window width 600, but will continue to calculate Small number of columns in the report. The report will be correct at window width 601.

We want iPad portrait to be on the 16 column grid by default.

Because Tab ID's are session-specific, they don't carry any meaning after a tab is closed. Currently, each time a new ID is created, our code stores a new piece of settings for this extension, and does not clear it, resulting in a slowly growing group of settings, which will eventually hit the memory limit for Chrome sync storage.

It's probably a good idea to add -webkit-user-select: none; to #gridsettings and #advancedForm, so that the user doesn't accidentally start selecting the form labels.

When the column sizes gets to large the report is not being generated correctly

Setting should be saved based on the current tab you are on

In the current version, all selectors are applied with the same red color, it is hard to differentiate them.

Move the color change from the advanced tab to the settings tab

For example - by default, the configuration would be - [.grid__cell] within [body]

http://editorconfig.org/

This is happening when the window width is between the mobile/desktop breakpoint and the max grid width. The width errors compound with every additional column.

Add new permission to manifest to work with file:// so users don't have to be running a local server to use the plugin.

Using a class selector, for instance, .grid__cell, overlay onto those elements a semi-transparent layer that reports the currently width of those elements.

Something like: http://codepen.io/tonytopper/full/xVMGgW/

You should be able to shift the grid left or right. This is useful if you have a right or left rail that you want to have exist outside of the grid aligned content.

Maybe this should be a toggle switch?

Currently the grid is inserted at the end of the body. What if you provided a selector and it inserted the grid into the first element it found that matched that selector.

Advanced features!

For the size overlay labels, have an option to round to full pixels, instead of 1/100

The text for the reset buttons should be different depending on what tab you are on.

Unfortunately, I don't have a way to reproduce this.

Right now we just have small and large. Would be nice to have the ability to add multiple, so we could support different settings for small, medium, large, extra-large

You have to click the reset button twice in order for the settings to return to the default values

Ideas

• use depth in DOM for color varation
• hide/re-arrange ones that are too close
• be able to turn on and off labels to see ones that are hidden