grantfayvor / gridify Goto Github PK

Description

To build a grid, one needs to hover on the rulers, and then drag moveable grid lines into the viewport, (whether horizontal or vertical). However, if the DevTools (Browser Inspector) Device Toolbar is activated, the mouse pointer in the responsive screen or mobile device is switched into a touch pointer, which behaves like touch on mobile phones. When in this mode, it is not possible to draw grid lines from Hex Grid's rulers, maybe because the grid lines are drawn from hovering, and then dragging on the rulers; of which, hovering is complex on with the mobile touch-only pointer.

It could really be a nice one to draw grid lines when in this Mobile Device mode. Building the grid in mobile will help during development, because most times, one first thinks about the mobile view before expanding to larger screens.

Describe the solution you'd like

A possible solution could be making the rulers permit the drawing of new grid lines on touch pointer long-press when the Device Toolbar is activated. This is given that only one-time and long-press touches are the only achievable on the screen when in mobile device mode and hovering is only achieved by long pressing.

Description

Toggling Grid Visibility and Pixel Distance Visibility from Hex Grid's submenu from Chrome's right-click does not indicate whether the particular feature being toggled is switched on or switched off. If a particular was previously switched off, and the user is trying to use it, it won't work and they could not be sure of the cause given that the submenu only says "toggle" and does not show on or off states. This could also give a feel that Hex Grid does not work, or that Hex Grid is difficult to use (which is not true).

Describe the solution you'd like

A possible solution could be making the toggle visibility options to give rise to submenus too, with on and off options (with ticks/checkboxes, indicating which one is active). So that is clear to the developer or Hex Grid user which particular visibility state they are setting at any point in time.

Description

Currently, the top and left rulers on the screen when Hex Grid is activated are made of short lines spaced out by 10px and bolder lines that occur at 100px, just as most rulers. The rulers however do not have units and the units could be of great help in using Hex Grid.

Describe the solution you'd like

A possible solution could be having the ruler units option toggleable in the right-click context menu of Hex Grid in Chrome. It could be turned off by default. But when turned on, the rulers could have the 100px units in view.

Description

To build a grid, one needs to hover on the rulers, and then drag moveable grid lines into the viewport, (whether horizontal or vertical). However, the grid lines are fixed. If the window is resized or if the DevTools (Browser Inspector) Device Toolbar is activated, and the viewport size is adjusted with the mobile and responsive options; the previously drawn grid lines do not change their positions. For example, if there is a vertical grid line at say 992px from the left (that's the line is at the extreme right of the screen) when the viewport width has been reduced to anything less than 992px, that particular grid line will no longer be in view.

This could be normal and expected when using Hex Grid. But it's a problem when attempting to draw a responsive/fluid grid. Just as one wants components/elements/boxes on the page to resize with screen size changes, so I was proposing that one could have responsive/fluid grids with Hex Grid.

Describe the solution you'd like

A possible solution could be having the responsive grid option toggleable in the right-click context menu of Hex Grid in Chrome. It could be turned off by default. But when turned on, gridlines drawn afterward will remember their position relative to the viewport (maybe as percentages). So that on viewport resize, they are redrawn to new positions relative to the new viewport size. Also, there could be a dialog box to confirm that all grid lines on the screen will be removed at the point of toggling the responsive option. So that at any point in time, there are either only fixed grid lines or only responsive grid lines on the screen.

Description

To activate Hex Grid, one needs to click on the pinned Hex Grid extension on Chrome's topmost bar. If Hex Grid is not pinned, there is no other way to activate the extension.

While this may not be a problem for some persons, it could be for others. Some developers may have too many pinned extensions on the topmost bar and may still want to use Hex Grid without pinning. Others may not want to see pinned extensions on Chrome's topmost bar.

Describe the solution you'd like

A possible solution could be adding an activate option in Hex Grid's submenu from Chrome's right-click menu. So that Hex Grid could be activated either from the pinned Hex Grid icon on the topmost bar or directly from the right-click menu anytime whether or not Hex Grid was pinned.