sprucecss root admin template

Ce référentiel contient le modèle statique de notre administrateur Laravel nommé Root.

Le modèle est construit avec Eleventy pour notre santé mentale et une gestion plus facile. Vous pouvez récupérer le contenu des fichiers de modèle Nunjucks ou du dossier dist compilé.

Le modèle changera probablement régulièrement à l'avenir en raison du développement du package Laravel.

Ce que vous obtenez

Nous avons utilisé Alpine.js pour gérer le code JS. Bien qu'il existe des comportements JS assez complets, ce modèle est toujours du HTML/CSS statique, vous devez donc faire la partie interactive.

À l’heure actuelle, vous pouvez récupérer les vues ou mises en page suivantes :

• Tableau de bord
• Liste de produits
• Liste de commande
• Liste des clients
• Liste des catégories
• Article Modifier
• Vue de l'article
• Paramètres
• Se connecter
• S'inscrire
• Réinitialisation du mot de passe

Il existe de nombreux composants spécifiques à l'administrateur :

• Fenêtre modale avec personnalisations.
• Bloc de table de données avec prise en charge de la recherche et du filtrage.
• Recherche simple.
• Divers menus déroulants.
• Cartes widgets.
• Modal du gestionnaire de médias.
• Boîte de liste déroulante.

Soyez opérationnel

Nous utilisons eleventy --serve et compilons Sass avec sass-cli avec des scripts npm.

1. Clonez le référentiel.

2. Installez les dépendances.

   Dans le fichier package.json , vous retrouverez l'ensemble des dépendances (et scripts) pour les installer à l'aide de la commande suivante :

   npm install

3. Exécuter le mode développement

   Pour exécuter le mode développement, utilisez le npm script . Ce script surveillera également les changements.

   npm start

4. Exécuter le mode production

   Avant la mise en ligne, vous devez utiliser le script de production pour compresser les fichiers Sass.

   npm run prod

SCSS

Le projet compile les fichiers SCSS du dossier ./src/scss dans le dossier ./src/css . Le projet inclut Spruce CSS, qui donne le style avec certains composants Spruce UI.

Autres scripts

• sass:lint/sass:lint:fix Vous pouvez lint vos fichiers SCSS avec Stylelint et stylelint-config-sass-guidelines prédéfinis avec la commande npm run sass:lint . Utilisez la commande npm run sass:lint:fix si vous souhaitez des correctifs automatiques.

• js:lint/js:lint:fix Vous pouvez également lint votre JS comme avec Sass. Pour les règles, nous utilisons le préréglage Airbnb.

Licence

Le code est sous licence du MIT.