CSS Grid Overlay

Easily check the grid alignment of your page across breakpoints.

Wat is CSS Grid Overlay?

CSS Grid Overlay is een Chrome-extensie ontwikkeld door https://imagentleman.github.io, en de belangrijkste functie is "Easily check the grid alignment of your page across breakpoints.".

Extensie Screenshots

screenshot

Download het CRX-bestand van de extensie CSS Grid Overlay

Download CSS Grid Overlay-extensiebestanden in crx-indeling, installeer Chrome-extensies handmatig in de browser of deel de crx-bestanden met vrienden om Chrome-extensies eenvoudig te installeren.

Instructies voor het Gebruik van de Extensie

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

Basisinformatie over de Extensie

Naam CSS Grid Overlay CSS Grid Overlay
ID hajfilceeneohkmcakehndmaeonhlack
Officiële URL https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Beschrijving Easily check the grid alignment of your page across breakpoints.
Bestandsgrootte 181 KB
Aantal Installaties 15,069
Huidige Versie 10
Laatst Bijgewerkt 2022-04-06
Publicatiedatum 2020-02-02
Beoordeling 4.43/5 Totaal 7 Beoordelingen
Ontwikkelaar https://imagentleman.github.io
E-mail [email protected]
Betalingswijze free
Extensiewebsite https://imagentleman.github.io
Help Pagina-URL https://github.com/imagentleman/css-grid-overlay
Ondersteunde Talen 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"
}