Global Layout System
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Global Layout System in the CoolTools project serves as the foundational structural wrapper for the entire Next.js application. Its primary purpose is to define the universal UI elements, such as the navigation bar, font configurations, and global styling constraints, that persist across all routes. By utilizing the Next.js App Router's root layout pattern, it ensures a consistent user experience and centralized management of shared resources.
The system integrates global CSS, specialized typography via Google Fonts, and shared metadata to optimize both SEO and visual performance. It acts as the entry point for all page components, wrapping them in a standard HTML structure with responsive design utilities.
Sources: cooltools/app/layout.tsx:1-25, cooltools/app/globals.css:1-10
Core Architecture
The layout is implemented as a React functional component named RootLayout. It wraps the application's page content (provided as children) within a standard HTML <html> and <body> structure.
Navigation and Shell
The system provides a sticky top navigation bar that contains the site branding and primary navigation links. This navigation persists as the user moves between the Home, Phones, Compare, and Search pages.
The navigation bar utilizes a flexbox layout with a z-index of 50 to remain visible above other content during scrolling.
Sources: cooltools/app/layout.tsx:27-70
Styling and Typography
The application uses a hybrid styling approach combining Tailwind CSS with CSS Variables for theme management.
- Fonts: The system loads
GeistandGeist_Monofrom Google Fonts, assigning them to CSS variables (--font-geist-sans,--font-geist-mono) applied to the body element. - Global CSS:
globals.cssdefines base variables for background and foreground colors, supporting both light and dark modes through theprefers-color-schememedia query. - Animations: A global
slideInkeyframe animation is defined for page transitions and element entries.
| Element | Specification | File Source |
|---|---|---|
| Sans Font | Geist (Variable) | layout.tsx:7-11 |
| Mono Font | Geist Mono (Variable) | layout.tsx:13-17 |
| Base Theme | Tailwind CSS | package.json:44 |
| Theme Mode | Light/Dark Support | globals.css:13-18 |
Sources: cooltools/app/layout.tsx:7-17, cooltools/app/globals.css:1-35
Global Metadata and SEO
The system defines a static Metadata object within the root layout to establish global search engine optimization (SEO) parameters.
export const metadata: Metadata = {
title: "CoolTools - Ultimate Phone Comparison Platform",
description: "Compare phones with 150+ features from GSMArena, Rtings, DXOMARK, and 25+ other top platforms",
};
Sources: cooltools/app/layout.tsx:19-22
Component Hierarchy
The layout serves as the parent container for all top-level routes and utility pages. When a route is not found, the system renders a specialized NotFound page that retains the global styling context.
Technical Specifications
The system relies on modern web standards and specific library versions to manage the layout and styles.
- React Version: 19.1.0
- Next.js Version: 15.5.4
- Icon Library:
lucide-react(v0.545.0) - Accessibility: Implemented via
antialiasedfont smoothing andfocus-visibleoutline styles.
Sources: cooltools/package.json:23-28, cooltools/app/globals.css:26-29
Conclusion
The Global Layout System provides a standardized environment for the CoolTools application. By centralizing the navigation, metadata, and design tokens, it ensures that the phone comparison features remain accessible and visually consistent across the entire platform.