Laravel CMS | N-03 | Dealing With Assets and Page Layouts

Subscribe to my newsletter and never miss my upcoming articles

Video Tutorial


Using CSS and JS is far more important in a modern designed application, so therefore laravel support Precompiled CSS Using (SASS, LCSS) or any other precompiled CSS Client, we are going to use SASS it is a bit more powerful and easier for either normal or advanced usage.

So for SASS go into resources/sass then you can place you App Styles files there, but laravel uses a files naming convention for recommended integration, all you need is prepend “_” (Underscore at the beginning of the filename) and of Course the extension is .scss, so it should look like _mainStyle.scss, if you are curious to learn SASS, here is the official GUIDE.

Now you can move the hard-coded style from the dashboard page to your file, and for more structured and organized code you can split pages into multiple style files for easier maintenance.


While Building a Large App Projects and specifically with HTML/PHP Code you are going to have a repeated block of codes (for e.x: Section always remains static) so you can create a parent file has the static code alongside your page structure (We are using Bootstrap Responsive Classes For Making the Job easier).

So We Start by making a SubFolder Under Views calling it layouts and w create our main app name it app.blade.php, then you can move your static code there and extend your child page from the main app layout file, as simple as that

So our App layout File Should look something like

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel CMS</title>

    <!-- Laravel Assets -->

    <link rel="stylesheet" href="{{ asset('css/app.css') }}" />

     <!-- Main JS File -->
    <script src="{{ asset('js/app.js') }}"></script> 

   <div class="container-fluid">

     <div class="row">




Laravel CMS


then on our dashboard file we need to extend from the app file, also you may have noticed the


so we are putting the code under a section called main-row, therefore we tell it we are in the main-row section on the dashboard

<!-- Extensing from The App Layout -->


     <!-- Puttin the Side Area in a Saperate File and Including it -->

   <!-- Main Area Structure Goes Here -->


Compiling Assets

When using SASS for your styling, you need to compile it in order to get regular .css file for using it in your web pages, so, therefore, NPM is there for us, it provides you with a quick compile command, but before that, you need to make sure that NPM is installed

on your main app directory.

First Download and Install NodeJS, it is cross-platform.

Then Make Sure that Everything is Installed and Updated by Typing under your app Folder.

#Make SURE That you are in your project directory
npm install

this should setup all you need.

Now you need to import every new style you want it to compile to the app.scss available on SASS folder, and when you finish editing your stylesheet to compile type in the command line

@import "styles/mainSty";
/* Do not include the underscore(_) and the extension(.scss) laravel will compiler will find out! */

and run to compile

# Run this if you want to One Time Compiling 
npm run dev 
# Run This if You want it to compile every single time you edit one of your style sheets
npm run watch

wait for the process to complete and make sure to include the main app.css on your web page for loading the css.

for further information watch the video tutorial above.

No Comments Yet