Logo Gridifier - FirstDevKit

Logo Gridifier Documentation

Problem Statement

Who doesn’t know the struggle?

You want to position multiple logos side by side on your website, but achieving the right proportions is a challenge. The most obvious solution is to make all logos the same height or width. However, this often causes certain logos to stand out excessively, appearing disproportionately large or small compared to others. Logo Gridifier elegantly solves this issue by assigning each logo the same area while preserving its original aspect ratio. This creates a balanced and professional layout that looks perfect on any device.

Usage

To use Logo Gridifier, follow these steps:

Include the CSS and JS files in your project:

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

Add a container to your HTML where the logos should be rendered:
```
<div id="logo-grid-container"></div>
```

Call the logoGridifierRender function in your JavaScript:

 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 });

Customization options:
- The logos array defines each logo with properties like name, src, and url.
- The options object lets you customize the grid, e.g., setting margin (space between logos).

Directory Structure

Your project structure might look like this:

logo_gridifier/
│
├── css/
│   └── style.css          # Contains styles for the grid and logos
│
├── js/
│   └── main.js            # Contains the logic for rendering the logo grid
│
└── README.md              # Documentation

Example: Full Integration

<!DOCTYPE html>
<html lang="en">
<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>