A responsive grid overlay, based on the Muriel Design System.
Muriel Grid Extension
Installing and opening this extension provides the ability to toggle a grid overlay onto the current page. This grid is designed to the Muriel design system.
The breakpoints in use are:
Screen width at 0dp+
- Columns: 4
- Margins: 16dp
- Gutters: 16dp
Screen width at 660dp+
- Columns: 8
- Margins: 24dp
- Gutters: 24dp
Screen width at 1040dp+
- Columns: 12
- Margins: 24dp+ (variable)
- Gutters: 24dp
For more details, please visit the Figma Grid documentation: https://www.figma.com/file/RfpHfk6896X7Mlciddjc45Ur/Layout-Grid?node-id=148%3A0
Read more
The breakpoints in use are:
Screen width at 0dp+
- Columns: 4
- Margins: 16dp
- Gutters: 16dp
Screen width at 660dp+
- Columns: 8
- Margins: 24dp
- Gutters: 24dp
Screen width at 1040dp+
- Columns: 12
- Margins: 24dp+ (variable)
- Gutters: 24dp
For more details, please visit the Figma Grid documentation: https://www.figma.com/file/RfpHfk6896X7Mlciddjc45Ur/Layout-Grid?node-id=148%3A0
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx",\t"manifest_version": 2,\t"name": "Muriel Grid",\t"description": "A responsive grid overlay, based on the Muriel Design System.",\t"version": "0.3",\t"author": "Jeff Ong",\t"background": {\t\t"scripts": [\t\t\t"src/background.js"\t\t],\t\t"persistent": true\t},\t"browser_action": {\t\t"default_popup": "src/popup.html"\t},\t"web_accessible_resources": [\t\t"src/css/grid.css",\t\t"src/css/popup.css"\t],\t"permissions": [\t\t"activeTab"\t]}
Read more