https://github.com/rrmn/composition-grid

Composition Grid is a free open-source browser extension that lets you analyze website layouts instantly with composition grids. You can toggle between Golden Ratio (Phi) Grid Rule of Thirds Grid and change the color of the grid. Free, open source, and works on any website. Built for designers, developers, product managers who value precision.
https://github.com/rrmn/composition-grid

design golden-ratio ui

Last synced: 7 months ago
JSON representation

Composition Grid is a free open-source browser extension that lets you analyze website layouts instantly with composition grids. You can toggle between Golden Ratio (Phi) Grid Rule of Thirds Grid and change the color of the grid. Free, open source, and works on any website. Built for designers, developers, product managers who value precision.

• Host: GitHub
• URL: https://github.com/rrmn/composition-grid
• Owner: rrmn
• Created: 2024-11-25T00:06:50.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-06T00:07:40.000Z (about 1 year ago)
• Last Synced: 2025-04-15T14:51:07.018Z (9 months ago)
• Topics: design, golden-ratio, ui
• Language: JavaScript
• Homepage: https://github.com/rrmn/composition-grid/
• Size: 21.5 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


# Composition Grid

Composition Grid is a free open source browser extension that lets you analyze website layouts instantly with composition grids.

You can toggle between 

- **Golden Ratio** (Phi) Grid

- **Rule of Thirds** Grid

and **change the color of the grid** by entering a HEX code or CSS color name (e.g. `#00FF00` or `purple`).

Free, open source, and works on any website. Built for designers,  developers, and product managers who value precision.

# Installation

1. Go to Composition Grid in the

    1. [Google Chrome Webstore](https://chromewebstore.google.com/detail/composition-grid/bkoakbekeejaepenfddjcehomnkpgonk)

    2. [Mozilla Firefox Browser Add-ons](https://addons.mozilla.org/en-US/firefox/addon/composition-grid/)

    3. [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/composition-grid/bjhalbeaddpjdacgpclnppcaipdbledd) 

3. Press "Add to Chrome/Firefox/Edge"

4. Done!

# Something not working? Ideas for features?

If you have ideas, questions: Just [open an issue](https://github.com/rrmn/composition-grid/issues/new/choose) here on Github.

Your requests are being heard! I recently added the ability to set a different grid color based on a Google Review.

# Contributions

If you want to contribute: Just open a PR here on Github.