Skip to content

Instantly share code, notes, and snippets.

@oshkoshbagoshh

oshkoshbagoshh/detailed-wireframe-layout.markdown

Created March 8, 2025 20:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oshkoshbagoshh/36d8ee6f2ff6fa0a65e5fffbce8e72fa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oshkoshbagoshh/36d8ee6f2ff6fa0a65e5fffbce8e72fa to your computer and use it in GitHub Desktop.
Download ZIP
Detailed Wireframe Layout
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe Layout</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.wireframe-box {
border: 2px dashed #94a3b8;
background-color: #f8fafc;
}
.measurement-label {
font-size: 12px;
color: #64748b;
font-family: monospace;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<!-- Main Container -->
<div class="wireframe-box w-[1200px] mx-auto p-4 relative">
<span class="measurement-label absolute -top-6 left-0">Container: 1200px</span>
<!-- Header Section -->
<div class="wireframe-box h-[80px] mb-8 flex items-center px-6 relative">
<span class="measurement-label absolute -top-6 left-0">Header: 1168px × 80px</span>
<!-- Logo Area -->
<div class="wireframe-box w-[200px] h-[40px] relative">
<span class="measurement-label absolute -top-6 left-0">Logo: 200px × 40px</span>
</div>
<!-- Navigation -->
<div class="wireframe-box ml-8 h-[40px] flex-grow flex items-center relative">
<span class="measurement-label absolute -top-6 left-0">Nav: 920px × 40px</span>
<div class="flex gap-8">
<div class="wireframe-box w-[100px] h-[32px]"></div>
<div class="wireframe-box w-[100px] h-[32px]"></div>
<div class="wireframe-box w-[100px] h-[32px]"></div>
</div>
</div>
</div>
<!-- Content Grid -->
<div class="grid grid-cols-12 gap-6 relative">
<span class="measurement-label absolute -top-6 left-0">12-Column Grid, 6px gap</span>
<!-- Sidebar -->
<div class="wireframe-box col-span-3 h-[600px] p-4 relative">
<span class="measurement-label absolute -top-6 left-0">Sidebar: 276px × 600px</span>
<!-- Sidebar Items -->
<div class="space-y-4">
<div class="wireframe-box h-[50px] relative">
<span class="measurement-label absolute -top-6 left-0">Menu Item: 244px × 50px</span>
</div>
<div class="wireframe-box h-[50px]"></div>
<div class="wireframe-box h-[50px]"></div>
</div>
</div>
<!-- Main Content -->
<div class="col-span-9 space-y-6 relative">
<span class="measurement-label absolute -top-6 left-0">Main Content: 876px</span>
<!-- Hero Section -->
<div class="wireframe-box h-[300px] p-6 relative">
<span class="measurement-label absolute -top-6 left-0">Hero: 876px × 300px</span>
<!-- Hero Content -->
<div class="grid grid-cols-2 gap-6 h-full">
<div class="space-y-4">
<div class="wireframe-box h-[60px] w-[80%] relative">
<span class="measurement-label absolute -top-6 left-0">Heading: 80% × 60px</span>
</div>
<div class="wireframe-box h-[100px] w-[90%] relative">
<span class="measurement-label absolute -top-6 left-0">Text: 90% × 100px</span>
</div>
<div class="wireframe-box h-[50px] w-[200px] relative">
<span class="measurement-label absolute -top-6 left-0">Button: 200px × 50px</span>
</div>
</div>
<div class="wireframe-box relative">
<span class="measurement-label absolute -top-6 left-0">Image: 417px × 276px</span>
</div>
</div>
</div>
<!-- Card Grid -->
<div class="grid grid-cols-3 gap-6 relative">
<span class="measurement-label absolute -top-6 left-0">Cards Grid: 3 columns, 24px gap</span>
<!-- Cards -->
<div class="wireframe-box h-[250px] p-4 relative">
<span class="measurement-label absolute -top-6 left-0">Card: 278px × 250px</span>
<div class="space-y-4">
<div class="wireframe-box h-[120px] relative">
<span class="measurement-label absolute -top-6 left-0">Image: 246px × 120px</span>
</div>
<div class="wireframe-box h-[24px] w-[80%] relative">
<span class="measurement-label absolute -top-6 left-0">Title: 80% × 24px</span>
</div>
<div class="wireframe-box h-[60px] relative">
<span class="measurement-label absolute -top-6 left-0">Text: 246px × 60px</span>
</div>
</div>
</div>
<div class="wireframe-box h-[250px] p-4"></div>
<div class="wireframe-box h-[250px] p-4"></div>
</div>
</div>
</div>
<!-- Footer -->
<div class="wireframe-box h-[200px] mt-8 p-6 relative">
<span class="measurement-label absolute -top-6 left-0">Footer: 1168px × 200px</span>
<!-- Footer Grid -->
<div class="grid grid-cols-4 gap-6 h-full">
<div class="wireframe-box relative">
<span class="measurement-label absolute -top-6 left-0">Footer Col: 270px</span>
</div>
<div class="wireframe-box"></div>
<div class="wireframe-box"></div>
<div class="wireframe-box"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment