In preparing for v2, I’ll implement a sidebar along the right side of the viewport that provides an interactive form to the user in which she/he can set preferences for the grid, such as column width and whether the grid should be fixed or fluid.

The height of the grid doesn’t take up the entire height of the page in some sites.

On some pages, the arrow is detached from the side info pop up box, for ex:
http://gst.touro.edu/

The Grid should give the user the ability to load an image. The user should be able to choose where in the stacking context the image appears, and the default should be the smallest z-index in the stacking context.

The user should know always be informed of the first (most negative z-index) and last (highest z-index) stacking context values. Notify the user of the under “glass” problem when the comparison image is at least one value behind the highest stacking context value.

Lastly, the user should be given the ability to choose whether the page’s content or the comparison image dictates the height of the page.

Because the width of the ID #modular-grid--container is 100%, an overflow occurs in some pages, causing the appearance of a scroll bar at the bottom of the page. Reduce the width.

The reset.css document that the extension uses is Eric Meyer’s. The user should be able to replace it with their own, use the existing document, or not use one at all.

The highest z-index value of the page is needed in order to properly insert the grid into the user’s DOM. At the moment, arbitrary, hard-coded values are being used.

There is no option to allow the user to overlay the grid columns as fixed or fluid.

hello test @code-warrior

Add node-module/ to .gitignore file

The colors of the icons for the Chrome extension should be one color (likely pink) and should contain greenish-blueish leading lines.

Before implementing any new features, clean and optimize the existing Sass/CSS code base.

A few small issues:

A <div> cannot be a child of a <label> and a <section> needs a heading. Change <section> to <div> and move <div class="slider round"></div> outside of the <label>. In fact, consider replacing <div class="slider round"></div> with <progress class="round"> and styling it with a slider by default.

PS The content to the <title> element should also be updated.

The icons for the Chrome extension appear to have incorrect sizes attached to them.

Hitting the esc key when the grid node has not been injected into the DOM tries to add a class to a non-extant node.

As the user cycles through the grids, show which grid is on in the info popup box.

The popup that displays the basic info should have an options link so the user needn’t have to context-click the browser action icon.

Each option should contain the ability to revert back to the initial/default value. Also, it should be possible to reset all the options back to their initial/default values with just one UI surface element.

The type in the info popup box changes in some pages. This is because font-related styles must be explicitly declared.

A very useful feature would be for the user to be able to update the width of the columns (and gutter, also) within the popup info box in real time.

If the grid is enabled and the page is refreshed, the state of the grid is lost.

I am going to put together a Data Architecture Model for the extension. Defining the entities, fields, characteristics and ... . Hopefully we can review it after and built a reasonable model upon it. Will write it in markdown format so that we can host it on the repository as a doc.

Using the esc key as a means by which to cycle through the various grids once this project becomes an extension won’t be ideal, as the esc key has the potential to interfere with any client-authored JavaScript that also employs the esc key

At the moment, the height of the page is defined by the Sass variable $users-comparison-bg-image--height. Replace this method of setting the height of the page with a calculation based on the height of the content in body.

In its current iteration, this project accepts the esc key to toggle the grid on/off. It would be useful to employ the esc key to perform the following in a Round-robin fashion:

1. Show the grid and the background image, along with the web page you’re developing.
2. Hide the grid, showing only the background-image and the web page you’re developing.
3. Hide the background image, revealing only your web page.
4. Go back to step 1.