English
See more
Easily check the grid alignment of your page across breakpoints.
Latest Version
Version
10
Update
April 5, 2022
Size
181KiB
Developer
imagentleman.github.io
Category
Users
10,000+ 
Rating
4.42857 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Scripting
ActiveTab
Storage
See more
ActiveTab
Storage
CSS Grid Overlay Extension
Supports multiples breakpoints and the usual grid values (gutters, columns, max width, etc).
Configurations can easily be saved and shared among team members as json objects.
Example conf:
[
{
\"columns\": 4,
\"margins\": 16, // px before and after the first and last column
// these gutters work like margins:
// if distance between columns is 32px, gutters are 16
\"gutters\": 16,
\"from\": 0, // start of breakpoint in px
// Optional values
// \"to\": 599, end of breakpoint in px
// grid will be centered after this maxWidth in px
// otherwise it'll be full width
// \"maxWidth\": 1440,
// if you want to move the grid
// (e.g. in a style guide with a left sidebar
// you'd use offsetLeft to push the grid to the right
// \"offsetTop\": 0,
// \"offsetRight\": 0,
// \"offsetBottom\": 0,
// \"offsetLeft\": 0,
// \"backgroundColors\": {
// \"columns\": \"rgba(234, 23, 140, .3)\",
// \"gutters\": \"rgba(0, 231, 255, .3)\",
// \"margins\": \"rgba(0, 191, 165, .3)\"
// }
}
]
Read more
Configurations can easily be saved and shared among team members as json objects.
Example conf:
[
{
\"columns\": 4,
\"margins\": 16, // px before and after the first and last column
// these gutters work like margins:
// if distance between columns is 32px, gutters are 16
\"gutters\": 16,
\"from\": 0, // start of breakpoint in px
// Optional values
// \"to\": 599, end of breakpoint in px
// grid will be centered after this maxWidth in px
// otherwise it'll be full width
// \"maxWidth\": 1440,
// if you want to move the grid
// (e.g. in a style guide with a left sidebar
// you'd use offsetLeft to push the grid to the right
// \"offsetTop\": 0,
// \"offsetRight\": 0,
// \"offsetBottom\": 0,
// \"offsetLeft\": 0,
// \"backgroundColors\": {
// \"columns\": \"rgba(234, 23, 140, .3)\",
// \"gutters\": \"rgba(0, 231, 255, .3)\",
// \"margins\": \"rgba(0, 191, 165, .3)\"
// }
}
]
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "CSS Grid Overlay", "version": "10", "description": "Easily check the grid alignment of your page across breakpoints.", "icons": { "16": "16.png", "48": "48.png", "128": "128.png" }, "background": { "service_worker": "background.js" }, "action": { "default_icon": { "16": "off-16.png", "24": "off-24.png", "32": "off-32.png" } }, "permissions": [ "scripting", "activeTab", "storage" ], "minimum_chrome_version": "88", "options_page": "options.html"}
Read more
