Layouts - Macuin Laravel

Macuin uses Laravel’s Blade templating system to create consistent page layouts through template inheritance. The main application layout provides the HTML structure, navigation, and common elements shared across all pages.

Main Application Layout

Location: resources/views/layouts/app.blade.php The main layout defines the base HTML structure for all pages in the application.

Complete Layout Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McQueen</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <x-navbar />
    @yield('content')
    <x-footer />
</body>
</html>

Layout Structure

The layout consists of several key sections:

Head Section

Meta tags, title, fonts, and asset links

Navigation

Global navbar component included via x-navbar

Content Section

Dynamic content area using @yield directive

Footer

Global footer component included via x-footer

Head Section

Meta Tags

The layout includes essential meta tags for responsive design:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>McQueen</title>

External Resources

The layout loads external fonts and icon libraries:

Fonts
Icons

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Uses Inter font with weights: 400, 500, 600, and 700

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Font Awesome 6.4.0 for icons throughout the application

Asset Management

The layout uses Laravel Vite for asset compilation:

@vite(['resources/css/app.css', 'resources/js/app.js'])

This compiles and includes:

CSS: Application styles from resources/css/app.css
JavaScript: Application scripts from resources/js/app.js

Body Structure

The body follows a three-section layout pattern:

<body>
    <x-navbar />      <!-- Global navigation -->
    @yield('content') <!-- Page-specific content -->
    <x-footer />      <!-- Global footer -->
</body>

The navbar is included using Blade’s component syntax (resources/views/layouts/app.blade.php:14):

<x-navbar />

This renders the Navbar component defined in:

Class: app/View/Components/Navbar.php
Template: resources/views/components/navbar.blade.php

Content Section

The content section uses Blade’s @yield directive (resources/views/layouts/app.blade.php:15):

@yield('content')

This creates a placeholder that child views fill with their specific content. The footer is included similarly to the navbar (resources/views/layouts/app.blade.php:16):

<x-footer />

This renders the Footer component defined in:

Class: app/View/Components/Footer.php
Template: resources/views/components/footer.blade.php

Template Inheritance

Extending the Layout

Child views extend the main layout using the @extends directive:

@extends('layouts.app')

Defining Content Sections

Child views define their content using the @section directive:

@extends('layouts.app')

@section('content')
    <!-- Page-specific content goes here -->
@endsection

Real-World Examples

Homepage Implementation

Location: resources/views/home/index.blade.php

@extends('layouts.app')

@section('content')
<div class="home-page">
    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Autopartes de calidad<br>para tu vehículo</h1>
            <p class="hero-subtitle">Encuentra todo lo que necesitas para mantener tu auto en perfectas condiciones.</p>
        </div>
    </section>
    
    <!-- Categories Section -->
    <section class="categories-section">
        <!-- Categories content -->
    </section>
    
    <!-- Featured Products Section -->
    <section class="featured-section">
        <!-- Featured products -->
    </section>
</div>
@endsection

Catalog Page Implementation

Location: resources/views/catalogos/catalogo.blade.php

@extends('layouts.app')

@section('content')
<main class="main-content">
    <div class="container">
        <h1 class="page-title">Catálogo de Autopartes</h1>
        
        <!-- Search Bar -->
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="Buscar autopartes...">
        </div>

        <!-- Products Grid -->
        <div class="products-grid">
            <!-- Product cards -->
        </div>
    </div>
</main>
@endsection

Authentication Pages

Location: resources/views/auth/login.blade.php

@extends('layouts.app')

@section('content')
<div class="auth-page">
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1 class="auth-logo">MACUIN</h1>
                <h2 class="auth-title">Iniciar Sesión</h2>
            </div>
            <form class="auth-form">
                <!-- Form fields -->
            </form>
        </div>
    </div>
</div>
@endsection

Cart Page Implementation

Location: resources/views/carrito/carrito.blade.php

@extends('layouts.app')
@section('content')
<div class="cart-page">
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">Crear Pedido</h1>
                <p class="page-subtitle">Revisa y confirma tu pedido</p>
            </div>

            <div class="cart-layout">
                <!-- Cart items and summary -->
            </div>
        </div>
    </main>
</div>
@endsection

Blade Directives Reference

@extends

Specifies which layout to inherit from:

@extends('layouts.app')

Usage: Must be the first line in a child view

@section / @endsection

Defines a content section to inject into the layout:

@section('content')
    <!-- Your content here -->
@endsection

Usage: Wraps all page-specific content

@yield

Defines a placeholder for content in the layout:

@yield('content')

Usage: Used in layouts to mark where child content will appear

Component Tags

Include Blade components using x- syntax:

<x-navbar />
<x-footer />
<x-alert type="success" />

Layout Flow Diagram

layouts/app.blade.php (Master Layout)
├── <head>
│   ├── Meta tags
│   ├── External fonts (Inter)
│   ├── Font Awesome icons
│   └── @vite assets (CSS/JS)
├── <body>
│   ├── <x-navbar /> (Navbar Component)
│   ├── @yield('content') ← Child views inject here
│   └── <x-footer /> (Footer Component)

Content Injection Flow

Step 1: Extend
Step 2: Define
Step 3: Inject
Step 4: Render

Child view extends the layout:

@extends('layouts.app')

Child view defines its content section:

@section('content')
    <h1>Page Content</h1>
@endsection

Layout yields to receive the content:

@yield('content')

Final rendered output:

<body>
    <nav>...</nav>
    <h1>Page Content</h1>
    <footer>...</footer>
</body>

Multiple Section Support

While the current layout uses a single content section, you can define multiple sections:

<!-- layouts/app.blade.php -->
@yield('header')
@yield('content')
@yield('scripts')

Best Practices

Single Layout

Use one main layout for consistency across all pages

Component Reuse

Extract common elements (navbar, footer) into components

Asset Management

Use Vite for efficient asset compilation and versioning

Semantic Structure

Maintain clear, semantic HTML structure in layouts

Layout Customization

To customize the layout for specific pages:

Override Meta Tags

@section('title', 'Custom Page Title')
@section('meta')
    <meta name="description" content="Custom description">
@endsection

Add Page-Specific Styles

@section('styles')
    <link rel="stylesheet" href="page-specific.css">
@endsection

Include Page-Specific Scripts

@section('scripts')
    <script src="page-specific.js"></script>
@endsection

Creating Additional Layouts

For specialized page types, create additional layouts:

Admin Layout: For backend administration
Guest Layout: For public pages without navigation
Print Layout: For printable documents

<!-- layouts/admin.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Admin Panel</title>
</head>
<body>
    <x-admin-sidebar />
    <main>
        @yield('content')
    </main>
</body>
</html>

Then use it in views:

@extends('layouts.admin')
@section('content')
    <!-- Admin content -->
@endsection

Get Started

Docker Setup

Features

Components

​Main Application Layout

​Complete Layout Code

​Layout Structure

Head Section

Navigation

Content Section

Footer

​Head Section

​Meta Tags

​External Resources

​Asset Management

​Body Structure

​Navbar Component

​Content Section

​Footer Component

​Template Inheritance

​Extending the Layout

​Defining Content Sections

​Real-World Examples

​Homepage Implementation

​Catalog Page Implementation

​Authentication Pages

​Cart Page Implementation

​Blade Directives Reference

​@extends

​@section / @endsection

​@yield

​Component Tags

​Layout Flow Diagram

​Content Injection Flow

​Multiple Section Support

​Best Practices

Single Layout

Component Reuse

Asset Management

Semantic Structure

​Layout Customization

​Override Meta Tags

​Add Page-Specific Styles

​Include Page-Specific Scripts

​Creating Additional Layouts

Build docs developers (and LLMs) love

Main Application Layout

Complete Layout Code

Layout Structure

Head Section

Meta Tags

External Resources

Asset Management

Body Structure

Navbar Component

Content Section

Footer Component

Template Inheritance

Extending the Layout

Defining Content Sections

Real-World Examples

Homepage Implementation

Catalog Page Implementation

Authentication Pages

Cart Page Implementation

Blade Directives Reference

@extends

@section / @endsection

@yield

Component Tags

Layout Flow Diagram

Content Injection Flow

Multiple Section Support

Best Practices

Layout Customization

Override Meta Tags

Add Page-Specific Styles

Include Page-Specific Scripts

Creating Additional Layouts