Logo Gridifier - FirstDevKit

Logo Gridifier Dokumentation

Problemstellung

Wer kennt das Problem nicht?

Man möchte auf seiner Webseite mehrere Logos nebeneinander positionieren und hat Schwierigkeiten mit den richtigen Proportionen. Die naheliegendste Idee ist meistens, alle Logos gleich hoch oder gleich breit zu machen. Doch dabei stechen manche Logos im Vergleich zu den anderen extrem hervor, da sie unverhältnismäßig groß oder klein wirken. Logo Gridifier löst dieses Problem elegant, indem es jedem Logo denselben Flächenanteil zuweist und gleichzeitig das Seitenverhältnis jedes Logos bewahrt. So entsteht ein harmonisches und professionelles Layout, das auf allen Geräten perfekt aussieht.

Verwendung (Usage)

So verwendest du Logo Gridifier:

Binde die CSS- und JS-Dateien in dein Projekt ein:

<link rel="stylesheet" href="logo_gridifier/css/style.css">
<script src="logo_gridifier/js/main.js"></script>

Füge einen Container in dein HTML ein, in dem die Logos angezeigt werden sollen:
```
<div id="logo-grid-container"></div>
```

Rufe die logoGridifierRender-Funktion in deinem JavaScript auf:

 const logos = [
     { name: "Logo 200x150", src: "https://via.placeholder.com/200x150.png", url: "https://via.placeholder.com/200x150" },
     { name: "Logo 150x220", src: "https://via.placeholder.com/150x220.png", url: "https://via.placeholder.com/150x220" },
     { name: "Logo 140x160", src: "https://via.placeholder.com/140x160.png", url: "https://via.placeholder.com/140x160" },
     { name: "Logo 210x120", src: "https://via.placeholder.com/210x120.png", url: "https://via.placeholder.com/210x120" },
     { name: "Logo 120x180", src: "https://via.placeholder.com/120x180.png", url: "https://via.placeholder.com/120x180" },
 ];

logoGridifierRender("#logo-grid-container", logos, { margin: 5 });

Anpassungsmöglichkeiten:
- Das logos-Array definiert jedes Logo mit den Eigenschaften name, src und url.
- Das options-Objekt erlaubt die Anpassung des Grids, z. B. durch Festlegen von margin (Abstand zwischen den Logos).

Verzeichnisstruktur

Dein Projekt könnte so aufgebaut sein:

logo_gridifier/
│
├── css/
│   └── style.css          # Enthält die Stile für das Grid und die Logos
│
├── js/
│   └── main.js            # Enthält die Logik zum Rendern des Logo-Grids
│
└── README.md              # Dokumentation

Beispiel: Vollständige Integration

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="logo_gridifier/css/style.css">
    <title>Logo Gridifier Demo</title>
</head>
<body>
    <div id="logo-grid-container"></div>

    <script src="logo_gridifier/js/main.js"></script>
    <script>
        const logos = [
            { name: "Logo 200x150", src: "https://via.placeholder.com/200x150.png", url: "https://via.placeholder.com/200x150" },
            { name: "Logo 150x220", src: "https://via.placeholder.com/150x220.png", url: "https://via.placeholder.com/150x220" },
            { name: "Logo 140x160", src: "https://via.placeholder.com/140x160.png", url: "https://via.placeholder.com/140x160" },
            { name: "Logo 210x120", src: "https://via.placeholder.com/210x120.png", url: "https://via.placeholder.com/210x120" },
            { name: "Logo 120x180", src: "https://via.placeholder.com/120x180.png", url: "https://via.placeholder.com/120x180" },
        ];

        logoGridifierRender("#logo-grid-container", logos, { margin: 5 });
    </script>
</body>
</html>