CSS Grid Overlay

Easily check the grid alignment of your page across breakpoints.

CSS Grid Overlay क्या है?

CSS Grid Overlay https://imagentleman.github.io द्वारा विकसित एक क्रोम एक्सटेंशन है, और इसकी मुख्य विशेषता है "Easily check the grid alignment of your page across breakpoints."।

एक्सटेंशन स्क्रीनशॉट्स

screenshot

एक्सएक्स एक्सटेंशन CRX फ़ाइल डाउनलोड करें

crx प्रारूप में CSS Grid Overlay एक्सटेंशन फ़ाइलें डाउनलोड करें, ब्राउज़र में क्रोम एक्सटेंशन को मैन्युअल रूप से स्थापित करें या दोस्तों के साथ crx फ़ाइलों को साझा करें ताकि क्रोम एक्सटेंशन को आसानी से स्थापित किया जा सके।

एक्सटेंशन उपयोग निर्देश

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

एक्सटेंशन की मूल जानकारी

नाम CSS Grid Overlay CSS Grid Overlay
ID hajfilceeneohkmcakehndmaeonhlack
आधिकारिक URL https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
विवरण Easily check the grid alignment of your page across breakpoints.
फ़ाइल का आकार 181 KB
स्थापना संख्या 15,069
वर्तमान संस्करण 10
अंतिम अपडेट 2022-04-06
प्रकाशन तिथि 2020-02-02
रेटिंग 4.43/5 कुल 7 रेटिंग्स
डेवलपर https://imagentleman.github.io
ईमेल [email protected]
भुगतान के प्रकार free
एक्सटेंशन वेबसाइट https://imagentleman.github.io
सहायता पृष्ठ URL https://github.com/imagentleman/css-grid-overlay
समर्थित भाषाएँ 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"
}