Sketch Grid is a Chrome extension for front-end developers. It adds a customisable baseline grid and layout settings similar to Sketch to your web page.
This project is fairly new, but does the following already:
- Switch turns the grid overlay on and off
- Configurable grid options
- Synchronizes extension popup, options and content pages
- Default settings based on 8pt grid for the core structure of your page grid
Note: This project was originally bootstrapped with Create React App. It has since been ejected to support multiple Webpack entry points, and to remove the chunk hashes from build output filenames so that they can be referenced in the Chrome extension manifest file.
Install via Git
- Clone the git repository to your local machine.
- Run
yarn installandyarn run build - Open Chrome and navigate to Extensions.
- Be sure the "Developer mode" switch is on and then click "Load unpacked" button.
- Navigate to the folder on your machine and press Select.
- Click the extension logo in the toolbar to activate the extension.
- Use the switch to toggle the grid overlay.
- Either click the settings cog, or navigate to the extension Options page to change grid settings.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
Builds the app for bundling to the build folder.
- Add Sketch layout settings
- Styling of extension views
- Add keyboard shortcuts
- Add Sketch Guides
- Help content tab
- E2E tests of extension views
- Grid overlay will not appear if the local storage of a tab is exhausted.
- This extension is based on React Sketch Grid grid by Alonso Holmes. Thanks Alonso!
- React Color for the Sketch color picker
- 8pt Material Design GUI Templates by Joel Beukelman
- The 8pt Grid: Consistent Spacing in UI Design with Sketch by Chris Godby
- Creating Responsive Grid Templates with Sidebar Nav Panels in Sketch
Would love to hear your feedback.
Unlicense