Day 6

Fix layouts with practical CSS solutions.

Layout Fixes
CSS

Comments (0)

No comments yet. Be the first to share your thoughts.

Convert layouts directly for your web app

Active File:

resources/views/layouts/app.blade.php

The primary HTML5 shell for your Laravel application. Loads Tailwind CSS, Google Fonts, and outlines the layout with dynamic content slots.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Digital Builder | We Build the Future of the Web')</title>

    <script>
        (function () {
            const theme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            if (theme === 'dark' || (! theme && prefersDark)) {
                document.documentElement.classList.add('dark');
            }
        })();
    </script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.webawesome.com/3.6.0/styles/webawesome.css">
    <script type="module" src="https://cdn.webawesome.com/3.6.0/webawesome.loader.js"></script>
    <script type="module">
        import 'https://cdn.webawesome.com/3.6.0/components/icon/icon.js';
    </script>

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

    @stack('styles')
</head>
<body class="min-h-screen bg-background text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-600 selection:text-white">

    @include('components.nav')

    <main class="relative min-h-screen">
        @yield('content')
    </main>

    @include('components.footer')

    @include('components.exporter-modal')
    <x-image-lightbox />

    @stack('scripts')
</body>
</html>

All assets are designed to render cleanly using standard Blade template compilation. Digital Builder Exporter • Laravel presets

Day 6

Comments (0)

Create layout & Blade files

Organize Blade Components

Setup Tailwind CSS config

Configure routing