TylerK / griiid

Chrome extension -- Helpful grid layout tools for designers and developers

What is this?

griiid is an effort to bring familiar design layout tools, like those found in Adobe products, Sketch, and others to web designers and developers via a Chrome extension.

Done

• Rulers
• Draggable guidelines
• Rulers and guides tied to scrolling
• Toolbar hooked up

Future (in no particular order)

• Layout grid generation palette
• Baseline grid generation palette
• Element selector
• Zoom functionality
• Configurable measurements (rem, px, etc)
• Remembering generated grids on a per-site or per-project basis.
• Configurable keyboard shortcuts
• Smart guide snapping
• Framework aware responsive grid generation (Bootstrap, Foundation, etc)
• Configurable color and grid settings

How to install this extension in Chrome (Dev Mode)

npm install
npm run build

1. Open up chrome and navigate to chrome://extensions
2. Check Developer Mode
3. Click Load unpacked extension
4. Navigate to this project's dist folder and install it

You should now notice griiid's logo in your browser actions area.