Co je CSS Grid Overlay?

CSS Grid Overlay je rozšíření Chrome vyvinuté https://imagentleman.github.io, a jeho hlavní funkcí je „Easily check the grid alignment of your page across breakpoints.“.

Snímky obrazovky rozšíření

Stáhnout soubor CRX rozšíření CSS Grid Overlay

Stáhněte si soubory rozšíření CSS Grid Overlay ve formátu crx, ručně nainstalujte rozšíření Chrome do prohlížeče nebo sdílejte soubory crx s přáteli, abyste jednoduše nainstalovali rozšíření Chrome.

Pokyny pro Použití Rozšíření

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)"
// }
}
]

Základní Informace o Rozšíření

Název	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
Oficiální URL	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Popis	Easily check the grid alignment of your page across breakpoints.
Velikost souboru	181 KB
Počet instalací	15,069
Aktuální Verze	10
Poslední Aktualizace	2022-04-06
Datum Vydání	2020-02-02
Hodnocení	4.43/5 Celkem 7 Hodnocení
Vývojář	https://imagentleman.github.io
E-mail	[email protected]
Typ Platby	free
Webové stránky Rozšíření	https://imagentleman.github.io
URL Stránky Nápovědy	https://github.com/imagentleman/css-grid-overlay
Podporované Jazyky	en
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" }