Giter VIP home page Giter VIP logo

laravel-styleguide's Introduction

Laravel Styleguide

build PHP version Total Downloads License Maintainability

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..

svg-main-x

Colors
Provide a list of colors with class name, description, and hex value.

sg-colors-x

Custom Patterns
Admins can also create custom patterns with a built in codemirror textarea.

sg-pattern-x

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.

Screen Shot 2020-08-13 at 12 29 12 PM

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

Screen Shot 2020-08-13 at 12 09 42 PM

Contribute

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

Author

xpersonas

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.