Download the PHP package michaelmano/laramin without Composer

Laramin

Laramin is a dashboard template designed with material in mind. I created Laramin to get your laravel project up and running without spending to much time worrying about designing an admin panel and logic to handle related assets like tag inputs.

Laramin does not handle any backend logic.

Table of Contents

• Installing Routes Controllers Views Login Form
• Config Menu Project Manager
• Elements Default Blade Grid System Kitchen Sink Tags Cards Utility Helpers
• Vue Components Modals Image Cropper Flash Messages Loading Overlay Tabs Tooltips
• Delete Item
• Sortable Items

Installing

Once you have a Laravel project up and running you can install laramin with composer composer require michaelmano/laramin and then adding it to your service providers under config/app.php

MichaelMano\Laramin\LaraminServiceProvider::class,

and then publish the assets with

php artisan vendor:publish --provider="MichaelMano\Laramin\LaraminServiceProvider"

I highly suggest not editing the files under public/michaelmano/laramin as Laramin is still in beta and there will be many updates.

Routes

As Laramin is an admin panel I will start with php artisan make:auth and then edit my route service provider app/Providers/RouteServiceProvider.php and adding the below inside of mapWebRoutes.

and then creating a file called dashboard.php inside of the routes folder and here is where I will create all of my dashboard routes.

To stop user registration I will edit app/Http/Controllers/Auth/RegisterController.php and add a new public function to the bottom called forbidden

Then edit web/routes.php file and add

However if your project uses registration you can set up your own middleware to handle the dashboard. I will also update

with protected $redirectTo = '/home'; to protected $redirectTo = '/dashboard';

and

return redirect('/home'); with return redirect('/dashboard');

Views

Now I will create a view folder called dashboard resources/views/dashboard and create a index.blade.php file and put the following code inside of it.

This is the blade layout to use with laramin.

Login Form

Now overwrite the login page under resources/views/auth/login.blade.php with the following.

Controllers

Generate a controller that can be used to handle your dashboard index php artisan make:controller Dashboard/DashboardController and any others you may require, e.g. if your project has dynamic pages you can generate this with php artisan make:controller Dashboard/PageController -r Pass the -r parameter for resources e.g. CRUD

Config

The config can be found in your project under config/laramin.php

Menu

You can set the menu up by editing the config and this layout uses font-awesome, The user avatar will be a font awesome user icon unless your user object has a $user->avatar which points to a image URL.

Project Manager

The project manager is used to create a help form which a client may use to send them an email or get their contact details, If you remove the values the help button will not show.

Elements

Grid System

Laramin uses Buzuki a mobile-first, responsive BEM flavoured flexbox css grid system.

Kitchen Sink

If your project is set to local environment laramin has 1 route which you can view for all elements you can use in the system with the code also shown. you can access it from http://your-domain.tld/laramin

Box

The box element is just an element with a box-shadow, You can also add a modifier class of Box--padded which will add padding to the Box,

Masonry

The Masonry of laramin uses css grids, no JavaScript at all. The code below uses the Masonry elements with the Cards

Tags

The tags can be specified like so:

Cards

The card component has 3 elements, The Header, Content and Footer, Below I am putting the title of the post in the header with a slug as a heading meta, then we have the post content as Card__content and in the footer I am rendering the Tags.

Forms

Utility Helpers

Margins

util-breakaway-${top/right/bottom/left}-${0/1/2/3/4/5/6/7/8}-${5} can be used like so util-breakaway-bottom-0 to remove margins off the bottom or util-breakaway-top-1-5 to add 1.5rem margin to the top.

Animations

Laramin uses the animate.css library Animate.css

Vue Components

Modals

The button on click will trigger a function called showModal() which takes 1 paramer, the reference of the modal which must also be unique ref="modal" and the modal can be passed a prop for the animation you wish to use <laramin-modal ref="name" @close="hideModal" animation-in="flipInX" animation-out="flipOutX"> by default the animations are bounceInLeft and bounceOutRight

Image Cropper

<laramin-crop image="http://via.placeholder.com/1920x800" label="file button text (default is choose an image)" :min-width="1920" :min-height="800" name="image"></laramin-crop>

The name and image are required, the name will set the name of the file input and also create a hidden input called ${name}_dimentions which you can use in the back end of your application to crop the uploaded image.

The min-height and min-width props are to set the aspect ratio of the image and will create a flash error message and resets the file input if the user tries to select an image under those dimentions and also make sure that the cropper is at that aspect ratio width / height

The image you pass will be the default image and the cropper will not be enabled until the user selects one with the upload button.

Below is an example of a trait I have used to manage media which also uses the Intervention Image package.

Now just use the trait in your model like so:

In the controller all you have to do is check if the update has the image fields.

Flash Messages

The flash messages can be passed 2 ways, One is if you set a session variable called message (or the errors that laravel passes on form fields). The second way is if you are using javascript you can push to the laramin object like so laramin.messages.push({type: 'error', 'message'}); and there are 2 types. error and success.

Loading Overlay

The loading overlay can be triggered like the above flash messages. laramin.loading = true; however you must also disable this when you have finished loading laramin.loading = false; unless you are waiting for a page reload. Below is how I have set up the sortable items with a promis.

So I have set the window to loading, created a promis and then when they have all completed I set the loading back to false.

Tabs

The tabs component is quite easy to use.

This will create the tabs component but also allow you to link to a specific tab on a page by using the name as a hash, e.g. http://site-url.com/page-url#tab-2 which will open tab 2 instead of 1.

Tags Input

Which will create the input and add auto complete suggestions and default tags to be pre filled. The name prop will also create hidden inputs with the values in the tags input. e.g. tag1, tag2, tag3 which you can use like so.

Tooltips

Tool tips are self explanatory. <laramin-tooltip tooltip="test tooltip">This will show test tool tip on hover.</laramin-tooltip>

Laravel Components

Delete Item

This will create a button with the text Delete Page if you do not pass delete_text it will just show a trash can that when clicked will show a modal window with an input where you have to pass the value in before you can delete it e.g. the page title. The remove will remove first parent with the class as this is done via ajax.

Vanilla JavaScript

Sortable Items

To use sortable you would have a field called order on your modal and then when rendering you would do it like so:

This will render each item and each item will have a hidden form which will change the value of the order input and post it to the route you specify when dragged. The item will only change order if you drag it by the sortable button <button class="Button Button--round js-sortable-tile"><i class="fa fa-arrows"></i></button>