What is correct placement of js and css in blade view?

Level 44

before section content , create a section scripts and place those scripts js and css there

@section('scripts')

@endsection

@section('content')

@endsection

kobear

8 years ago

Best Answer

Level 4

@dreamxyz Placement of CSS and JS resources usually depends on what the library prescribes, but I usually put CSS first, then JS.

Also, what I do most times is include some @stacks in my master blade template at the top and bottom. Then, when I make my individual blade templates with sections, I @push Javascript or CSS that is specific to that template into a @stack on the master template.

Below is a typical master blade template (index) that I use for a project.

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>@yield('title','Home')</title>
      @include('head')
    </head>
    <body>
      @yield('content')

      <!-- Begin CDN Content for frameworks -->
      @stack('cdn-content')
      <!-- End CDN Content for frameworks -->

      <!-- Begin Stacked Libraries  -->
      @stack('script-libraries')
      <!-- End Stacked Libraries  -->

      <!-- Begin Stacked JavaScripts from template heirarchy -->
      <script>
          @stack('end-scripts')
      </script>
      <!-- End Stacked JavaScripts from template heirarchy -->
    </body>

</html>

And on a typical subtemplate

@extends('index')

@section('content')
   <!--  blah blah blah, fancy HTML to impress folks -->
@endsection

@push('cdn-content')
      <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.27.5/js/patternfly.js"></script>
      <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
      <script src="/assets/js/c3.min.js"></script>
      <script src="/assets/js/d3.v3.js"></script>
      <script src="/assets/js/jquery.matchHeight-min.js"></script>
@endpush

@push('end-scripts')
    $(document).ready(function() {
        // blah blah blah, fancy jQuery stuff to impress other folks
     });
@endpush

kobear

8 years ago

Level 4

Page specific CSS could be put in another section in the head element (after the include)

Js I usually put in the “end-scripts” push area