UIkit starter template for Laravel
Out of the box, Laravel ships with a default welcome template built with Tailwind CSS. On top of the base framework, Laravel JetStream provides two user interfaces (your choice of Laravel Livewire or InertiaJS) for login and register pages whilst Laravel Fortify provides the authentication backend.
Although Tailwind CSS is quickly gaining popularity, many people, like me, prefer a more traditional front-end framework, like Bootstrap, Foundation, or Bulma. I choose UIkit by YOOtheme because I found it to be the most modern, clean, well-thought-out, and modular framework available.
I've used UIkit for just about every project I've worked on in the last few years, for both websites and web applications, from tiny single-page landing sites, to massive web applications with thousands of users.
This package enhances Laravel with a starter template for UIkit, and gives you everything you need to start your next web project.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See Deployment for notes on how to deploy the project on a live system.
To begin, you'll need a fresh install of Laravel 10+. Adding this to an existing project is not recommended and may cause issues. For full instructions on installing Laravel, refer to the Laravel installation docs, but something like the following will get you up and running:
composer global require laravel/installer
laravel new mysite
cd mysite
To turn the base Laravel installation into a UIkit site, follow the steps below.
composer require torrix/laravel-uikit
php artisan vendor:publish --provider="Torrix\LaravelUikitServiceProvider" --force
.env
with the correct credentials for it.composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
php artisan migrate
Add in config/app.php
:
'providers' => [
// ...
App\Providers\FortifyServiceProvider::class,
],
npm install && npm run dev
Sometimes, npm run dev
needs to be run twice to complete the installation.
Read the output carefully to see if this is the case.
php artisan serve
Your new site will be served at http://localhost:8000.
To get started in UIkit, read their excellent docs. The examples and tests provided should give you all the help you need. To get an idea of what UIkit is capable of, I highly recommend the KickOff starter templates for inspiration.
To start customising UIkit to your own needs, take a look in
app.scss. In there, you will find the
standard UIkit imports, and by way of a simple example, I've changed the
default blue primary colour to a nice purple shade, just to show what's
possible in almost no time at all. Try changing it to another colour, and
then running npm run dev
to rebuild the CSS, and see the changes to your
site.
Whilst developing your site, running Laravel Mix in watch mode makes it easy to make changes and quickly see their results:
npm run watch
When deploying to a live server, remember to build your assets in production mode for smaller, faster downloads:
npm run prod
Matt Fletcher @ Torrix
This template is open-source software licensed under the MIT license - see the LICENSE.md file for details