Kavlan es la plantilla de panel de administración oscuro perfecta para hacer que la navegación y el mantenimiento de su sistema de administración sean muy fáciles. Kavlan, limpio, receptivo y fácil de usar, ofrece una experiencia de usuario que lo ayudará a crear una interfaz exitosa. Y sobre todo, ¡es gratis!
Ver demostración | Descargar ZIP
Requisitos
Inicio rápido
Páginas de plantilla
Enlace de demostración
Características clave de la plantilla
Estructura del archivo de plantilla
Bigote daliniano
Datos JSON de plantilla
Personalizar estilos de plantilla
Crear nuevas páginas
Documentación de arranque
Créditos
Contáctenos
Si no tiene la intención de trabajar con el código fuente de la plantilla (y eso significa que no lo compilará ni ejecutará el servidor de desarrollo Webpack), no necesita instalar nada. Simplemente puede navegar a la carpeta dist y comenzar a editar los archivos.
La mayoría de los desarrolladores editarán el código fuente y también ejecutarán Webpack para recompilar los archivos de plantilla. Si ese es el caso, asegúrese de tener Node.js instalado. Puedes descargarlo desde aquí.
Descargue la última versión O clone el repositorio: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
Instale Node.js si aún no lo tiene en su sistema.
Abra la raíz del proyecto en su línea de comando.
Ejecute npm install
en su línea de comando.
Ejecute npm start
para iniciar Webpack devserver.
Si desea volver a compilar los archivos de plantilla (que salen a la carpeta dist), ejecute npm run build
La plantilla consta de 6 páginas:
Panel
Página de inicio de sesión
Página de registro
Página de contraseña olvidada
Página 404
Página en blanco
Para mantener la repetición de código al mínimo, hemos utilizado manillares.js como motor de plantillas y parciales para agregar rápidamente el mismo código a diferentes páginas. También utilizamos un complemento de manillar para datos JSON; esto nos permite usar bucles y generar un único bloque de código HTML en lugar de repetir el mismo HTML.
URL de demostración
Tenga en cuenta que esta es solo una plantilla HTML. No se conecta a una base de datos y no funcionará automáticamente en un sistema de gestión de contenidos (Wordpress, etc.). Deberá incorporar nuestro código en su aplicación.
Integración de Chart.js con 3 tipos de gráficos diferentes
Construido con Bootstrap 5
Totalmente responsivo
Componente de últimos pedidos
Barra lateral plegable (se contrae automáticamente al cambiar el tamaño del navegador)
Componente de notificaciones
Componente de avatar
Componente de inicio de sesión/registro
dist: versión generada de la plantilla. Vaya aquí si no desea trabajar con el código fuente de la plantilla. Pero tenga cuidado: si personaliza algo en esta carpeta directamente y luego vuelve a compilar la plantilla usando webpack, a menos que mueva la carpeta dist fuera de la plantilla, sus cambios se anularán.
node_modules: directorio donde NPM instala dependencias. No verá esta carpeta hasta que complete la instalación de la plantilla. No es necesario crear esta carpeta.
src: código fuente de la plantilla. Vaya aquí para personalizar su plantilla.
src/assets: activos de plantilla como CSS, JS, imágenes, etc.
src/data: archivos de datos JSON de plantilla. Usamos estos archivos JSON para facilitarle el trabajo de insertar contenido en la plantilla.
src/html - Páginas de plantilla. Vaya aquí para editar páginas existentes o agregar páginas nuevas.
src/partials - Plantillas parciales de manillares.
Manillar es un motor de plantillas que nos permite mantener el código fuente de nuestra plantilla lo más organizado y limpio posible. Reduce la duplicación de código y, mediante el uso de funciones auxiliares, permite a los desarrolladores de plantillas generar rápidamente grandes cantidades de datos con un código mínimo. Puedes leer más sobre esto aquí.
Abra el siguiente archivo en nuestra plantilla: src/html/index.html.
Alrededor de la línea 21 verá el siguiente código:
{{> content/breadcrumbs }}
Eso es un manillar parcial. Ese código le dice a Manillar que busque dentro de una carpeta llamada contenido (ubicada en la carpeta de parciales) y luego busque un archivo llamado ruta de navegación y lo inserte en el archivo index.html cuando se compila.
Hay algunas notas importantes sobre nuestro uso de los parciales de manillar:
Todos nuestros parciales se almacenan dentro de src/partials. No coloque parciales en ningún otro lugar.
Usamos .html como nuestra extensión de archivo parcial. También hemos agregado .svg como extensión de archivo parcial válida.
Si tiene carpetas dentro de carpetas dentro de su carpeta parcial, solo haga referencia a la carpeta en la que reside el parcial. Por lo tanto, se hará referencia a "partials/header/navbars/navbar.html" como "navbars/navbar".
No incluya la extensión de archivo parcial. Tenga en cuenta que en el ejemplo anterior generamos "breadcrumbs" y no "breadcrumbs.html".
El complemento Webpack Seats que utilizamos viene con una utilidad muy útil que nos permite pasar archivos JSON como datos de plantilla.
Navegue hasta: src/data. Aquí es donde residen nuestros archivos JSON de datos de plantilla. Puede editar, eliminar o agregar el suyo propio a esta carpeta.
Todos los archivos CSS/SASS de origen de la plantilla se guardan dentro de la carpeta de activos de la plantilla. Navegue a src/assets/scss. Abre theme.scss con tu editor.
Este es el principal punto de entrada para todos los demás archivos SASS/CSS.
Para crear una nueva página, navegue en su editor de código hasta: src/html. Para que sea más fácil implementar el HTML correcto, clone una página existente. Cambie el nombre del archivo recién creado a la URL que necesite. Y eso es todo. Ahora puede abrir la nueva página con su editor de código, realizar los cambios y luego guardar el archivo. Salga de Webpack devserver y reinícielo para que aparezca la página.
Bootstrap ya tiene un sitio de documentación completo que lo guiará en la configuración y el uso de todas las funciones predeterminadas de Bootstrap. Bootstrap 5 está completamente integrado al código fuente de nuestra plantilla. Consulte primero el sitio de documentación de Bootstrap para conocer las funciones predeterminadas de Bootstrap: Visite el sitio de documentación de Bootstrap
Oreja
gráfico.js
desempaquetar
Pexels
Pixabay
Barra simple.js
Puede encontrar nuestro sitio web aquí o puede enviarnos un correo electrónico a [email protected]