CSS Grid Overlay

Easily check the grid alignment of your page across breakpoints.

Co to jest CSS Grid Overlay?

CSS Grid Overlay to rozszerzenie Chrome opracowane przez https://imagentleman.github.io, a jego główną funkcją jest „Easily check the grid alignment of your page across breakpoints.”.

Zrzuty ekranu rozszerzenia

screenshot

Pobierz plik CRX rozszerzenia CSS Grid Overlay

Pobierz pliki rozszerzeń CSS Grid Overlay w formacie crx, zainstaluj ręcznie rozszerzenia Chrome w przeglądarce lub udostępnij pliki crx znajomym, aby łatwo zainstalować rozszerzenia Chrome.

Instrukcja Użytkowania Rozszerzenia

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

Podstawowe informacje o rozszerzeniu

Nazwa CSS Grid Overlay CSS Grid Overlay
ID hajfilceeneohkmcakehndmaeonhlack
Oficjalny URL https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Opis Easily check the grid alignment of your page across breakpoints.
Rozmiar pliku 181 KB
Liczba instalacji 15,069
Aktualna Wersja 10
Ostatnia Aktualizacja 2022-04-06
Data Publikacji 2020-02-02
Ocena 4.43/5 Łącznie 7 Oceny
Deweloper https://imagentleman.github.io
E-mail [email protected]
Typ Płatności free
Strona Rozszerzenia https://imagentleman.github.io
Adres URL Strony Pomocy https://github.com/imagentleman/css-grid-overlay
Obsługiwane Języki 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"
}