Planning blade template hierarchy - tips?

I'm new to Laravel, but have already made up my mind to shift my existing project to Laravel and need some suggestions/tips on planning the template hierarchy.

My main app will be a 'play store' for various web apps: like 'Events Listing', 'Job Board', 'Restaurant Finder' etc. While the overall look and feel will be consistent using bootstrap each app will require its own JS and custom CSS. My plan is this :-

Have master.blade.css : Will have the code for site wide bootstrap + navigation + footer.
Create subfolders for each set of templates viz. /events/ , /jobs/ , /restaurants/ etc. Each folder will have templates specific to the app, like /events/create.blade.php. These templates will extend the master layout.

This looks a very straightforward approach to me. Could you please let me know if there's any better way? Would welcome any comments, suggestions, tips et al. I'm still learning and hope to benefit from your comments.

Thank you for your time in advance.

rodolz

8 years ago

Level 1

I have never heard about files like .blade.css only .blade.php.

Usually all your assets (js,css,etc) should be in /public/assets.

thebigk

8 years ago

Level 13

My bad, it was a typo. I meant master.blade.php

rodolz

8 years ago

Level 1

Uhh ok.

Yea imo your approach sounds pretty straightforward.

I would just set a master layout like this for core js and css like bootstrap:

<!DOCTYPE html>
<html>
    @include('layouts.partials.head')
    <body class=" ">
        <div class="page-container row-fluid">
            @include('layouts.partials.navbar')
            @include('layouts.partials.main-content')
            @include('layouts.partials.footer')
        </div>
        @include('layouts.partials.plugins')
    </body>
</html>

Then in partials like head and plugins add @yields for differents .css and .js files

head.blade.php:

<link href="{{ asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>

@yield('extra-styles')

and in your /events/create.blade.php

@extends('layouts.master')

    @section('extra-styles')
<link href="{{ asset('assets/plugins/bootstrap/css/events.css') }}" rel="stylesheet" type="text/css"/>
    @endsection

then repeat this in plugins.blade.php for your js

thebigk

8 years ago

Level 13

Interesting. I think I'll need to figure out the way to load JS. I'll update this thread once I'm done with my basic structure and still have issue.

Really appreciate your response. Thank you!

topvillas

8 years ago

Level 46

If you want to load javascript and css dynamically use stacks ...

https://laravel.com/docs/5.4/blade#stacks

It's also worth taking a look at components ...

https://laravel.com/docs/5.4/blade#components-and-slots

I think they're both much more elegant than @yield.

Please or to participate in this conversation.