Universal StyleLib

Versione non più supportata.
Questa documentazione fa riferimento alla versione precedente della libreria e non è più manutenuta.
Aggiorna alla nuova versione della libreria.

Installazione

Per installare la libreria tramite Composer, aprire un terminale ed eseguire:

composer config repositories.deployuniversal vcs https://github.com/giovdi/stylelib
composer require deploystudio/universal-stylelib

In un terminale, nella root del progetto Laravel, installare la libreria tramite composer con i comandi sopra indicati, quindi aggiungere in config/app.php le seguenti linee nell'array aliases:

'aliases' => [
	// ...
	'Box' => 'DeployStudio\Style\NOMETEMA\Box',
	'BoxStat' => 'DeployStudio\Style\NOMETEMA\BoxStat',
	'Table' => 'DeployStudio\Style\NOMETEMA\Table',
	'Form' => 'DeployStudio\Style\NOMETEMA\NForm',
	'FormGroup' => 'DeployStudio\Style\NOMETEMA\NFormGroup',
],

I valori NOMETEMA supportati sono: Adminlte, Angle, Bootswatch, Inspinia, Minimalart, Nifty e Templatevamp.

Includi scripts e stili

Per determinate funzionalità la libreria richiede scripts e stili disponibili sulla CDN Pixelstyle:

<!-- stili libreria, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/general-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/adminlte-v1.css">

<!-- script plugin dipendenti, da aggiungere prima di </head> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_it.min.js"></script>

<!-- script libreria, da aggiungere a fondo pagina in coda a tutti gli altri, prima di eventuali script personali -->
<script src="https://stylelib.pixelstyle.it/script-v1.js"></script>

<!-- stili libreria, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/general-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/angle-v1.css">

<!-- script plugin dipendenti, da aggiungere prima di </head> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_it.min.js"></script>

<!-- script libreria, da aggiungere a fondo pagina in coda a tutti gli altri, prima di eventuali script personali -->
<script src="https://stylelib.pixelstyle.it/script-v1.js"></script>

<!-- stili plugin dipendenti, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.css" />

<!-- stili libreria, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/general-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/bootstrap-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/select2-bs4-1.2.3.css">

<!-- script plugin dipendenti, da aggiungere prima di </head> -->
<!-- nota: select2 4.0.6+ non supportata -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.js"></script>

<!-- script libreria, da aggiungere a fondo pagina in coda a tutti gli altri, prima di eventuali script personali -->
<script src="https://stylelib.pixelstyle.it/script-v1.js"></script>

<!-- per Bootstrap 5, aggiungere anche questo script, a seguire -->
<script src="https://stylelib.pixelstyle.it/bootstrap5-v1.js"></script>

Dopo la creazione di un progetto
Laravel 6+, procedere come segue:

1. aggiungere a resources/js/bootstrap.js le seguenti linee (solo con Vite):
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

2. usare i seguenti comandi per fare lo scaffolding Bootstrap senza Vue:
composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run build  #solo con Vite // usare "npm run dev" con Laravel Mix

3. correggere views/layouts/app.blade.php
> rimuovere gli script di Vite (se presenti)
> aggiungere gli script e stili generici (app.css, app.js)
> aggiungere script e stili del tab 'Bootstrap Base L5'.

Per la gestione dell'autenticazione utente, Laravel 11+ utilizza Breeze:

1. usare i seguenti comandi per fare lo scaffolding Bootstrap senza Vue:
composer require laravel/breeze --dev
php artisan breeze:install (seleziona Blade with Alpine stack)
php artisan migrate
npm install

2. se utilizzi Laravel al di fuori della cartella public, aggiungi la seguente riga all'htaccess:
RewriteRule ^build/(.*)$ public/build/$1 [L]

3. aggiungi i seguenti script

4. ricorda che ad ogni nuova classe Tailwind e componente Blade UI usati, va dato il comando
npm run build

Script e stili non ancora disponibili

Script e stili non ancora disponibili

<!-- stili libreria, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/general-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/minimalart-v1.css">

<!-- script plugin dipendenti, da aggiungere prima di </head> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_it.min.js"></script>

<!-- script libreria, da aggiungere a fondo pagina in coda a tutti gli altri, prima di eventuali script personali -->
<script src="https://stylelib.pixelstyle.it/script-v1.js"></script>

<!-- stili plugin dipendenti, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" />
<link rel="stylesheet" href="assets/vendors/mc-datepicker/mc-calendar.min.css" />

<!-- stili libreria, da aggiungere subito prima di un eventuale custom.css -->
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/general-v1.css">
<link rel="stylesheet" href="https://stylelib.pixelstyle.it/nifty-v1.css">

<!-- script plugin dipendenti, da aggiungere prima di </head> -->
<!-- nota: select2 4.0.6+ non supportata -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.3.0/jquery.bootstrap-touchspin.min.js"></script>

<!-- script libreria, da aggiungere a fondo pagina in coda a tutti gli altri, prima di eventuali script personali -->
<script src="https://stylelib.pixelstyle.it/script-v2.js"></script>
<script src="https://stylelib.pixelstyle.it/nifty-v1.js"></script>
<script src="https://stylelib.pixelstyle.it/bootstrap5-v1.js"></script>

Script e stili non ancora disponibili

Upgrade

La libreria è attualmente in alpha, per aggiornarla si consiglia di disinstallarla e reinstallarla:

composer remove deploystudio/universal-stylelib
composer require deploystudio/universal-stylelib