xpersonas/laravel-styleguide

Simple styleguide for use with Laravel projects. Quickly create a page of html elements and components to be styled with your front end stylesheets.

v1.0.17 2021-05-20 18:49 UTC

Requires

• php: >=7.3
• eloquent/composer-npm-bridge: ^5.0

Requires (Dev)

• orchestra/testbench: ^5.3
• phpunit/phpunit: ^9.2
• squizlabs/php_codesniffer: *

Suggests

• timothyasp/nova-color-field: If using Nova, consider using this color picker.

GPL-3.0-or-later

• xpersonas

• laravel
• styleguide

README

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.

Installation

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

Usage

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.

Stylesheets

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" />

Protecting Routes

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/*

Nova Ready (optional)

https://nova.laravel.com

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.

Installation

Add our Nova Tool to your Nova Service Proivder:

// app/Providers/NovaServiceProvider.php

public function tools()
{
    return [
        new \Xpersonas\Styleguide\Providers\StyleguideNovaTool(),
    ];
}

Laravel Nova Color Field (optional)

This package is also compatible with the excellent Laravel Nova Color Field from timothyasp.

composer require timothyasp/nova-color-field

Contribute

https://github.com/xpersonas/laravel-styleguide/pulls

Author

xpersonas