This package allows admins to create a custom styleguide for Laravel project development.
Basic Elements
Choose from a list of basic elements like headings, text, tables, etc..
Colors
Provide a list of colors with class name, description, and hex value.
Custom Patterns
Admins can also create custom patterns with a built in codemirror textarea.
This package comes with 3 models: basic settings, colors, and patterns. Run the following
composer require xpersonas/laravel-styleguide
php artisan vendor:publish --tag=xpersonas-styleguide
php artisan migrate
The styleguide provides a Laravel component that can be dropped in any of your templates. This allows you to drop it in a page where your styles will be applied to all the elements contained within the styleguide.
Add this to your template:
<x-styleguide-base />
Edit your Styleguide settings by visiting /admin/styleguide
on your site.
The styleguide comes with a limited stylesheet for layout purposes. Include this only on your styleguide page if needed.
<link href="{{ asset('css/vendor/xpersonas/styleguide.css') }}" rel="stylesheet" type="text/css" />
There are several CRUD-related pages that will need protection from anonymous users. Please use what ever authentication system you are using to ensure these pages are safe from the public.
// Route setup.
Route::get('admin/styleguide/preview', '\Xpersonas\Styleguide\Http\Controllers\StyleguideController@index')->name('simple-styleguide');
Route::resource('admin/styleguide/patterns','Xpersonas\Styleguide\Http\Controllers\StyleguidePatternController', ['names' => 'pattern'])->middleware(['web']);
Route::resource('admin/styleguide/colors','Xpersonas\Styleguide\Http\Controllers\StyleguideColorController', ['names' => 'color'])->middleware(['web']);
Route::resource('admin/styleguide/basics','Xpersonas\Styleguide\Http\Controllers\StyleguideBasicsController', ['names' => 'basics'])->middleware(['web']);
// Wildcard route to protect.
admin/styleguide/*
This package is Nova-ready. If you want to manage styleguide settings, patterns, and colors within a "beautifully designed administration panel" then follow the instructions below.
Add our Nova Tool to your Nova Service Proivder:
// app/Providers/NovaServiceProvider.php
public function tools()
{
return [
new \Xpersonas\Styleguide\Providers\StyleguideNovaTool(),
];
}
This package is also compatible with the excellent Laravel Nova Color Field from timothyasp.
composer require timothyasp/nova-color-field