An Introduction

Up until this point in Laravel Nuts and Bolts, we have been focusing on the back-end of our application. In this tutorial, I will be covering how to make our application look better. You may have noticed that it looks quite bland and boring up until this point.

I wanted to split the back-end portion of this series from the front-end. Reason being, is so those who just want to learn how to program using Laravel can do so unencumbered by anything related to the front-end.

In this tutorial, I will be explaining how to style our application with plain CSS, as well as the four most popular CSS frameworks (according to this dev.to article by ThemeSelection, written in December, 2020).

Please feel free to click the framework listed below that interests you to jump to it.

Table of Contents

  1. Plain CSS
  2. Tailwind CSS
  3. Bootstrap
  4. Materialize CSS

Plain CSS

Laravel doesn’t automatically compile and copy resources such as CSS files by default. You will either have to create asset directories and assets in the public directory manually, or create a pipeline.

Laravel does however provide an easy way to build an asset pipeline, using Laravel Mix. Mix makes it simple to define Webpack build steps.

Mix is already defined in your project’s package.json file when you create a fresh Laravel project. All you will need to do is install the NPM modules. Type the following command to install your project’s defined NPM modules, including Mix:

sail npm install

During development you can use this command to run all Mix tasks:

sail npm run dev

For building for a production environment, you can use this command to run all Mix tasks and minify the output of your resources:

sail npm run prod

If you were to use a CSS framework hosted at a content delivery network (CDN) such as Tailwind CSS, you will not need to run these commands as CDN files are not stored within your project.

All fresh Laravel projects will contain an app.css file located in the resources/css directory. Open this file. This is where our app’s styles will go.

While writing CSS styles, you can use the sail npm run watch command to watch for changes to our stylesheets. What does “watching” mean? Watching for changes means that our resource files will be automatically packaged when we change anything in our resource files. When we change a resource file and save it, we can reload the page in our browser without typing sail npm run dev each time. It’s a beautiful thing.

It’s worth noting, though, that Webpack might not detect changes to your files in some local development environments. If you find this command doesn’t work, try running this command instead:

npm run watch-poll

Tailwind CSS

Bootstrap

Materialize CSS

In Conclusion

In part six of this series, the final part, we won’t be writing any code. Rather, I will just be providing some ideas of features and changes you can make to the application we created. You can read the final part here.