oldskool html bootstrap
Initial Release
Oldskool es una plantilla HTML Bootstrap 5 moderna y flexible con listados de tarjetas personalizables en la página de categoría y una excelente pantalla de productos en la página de productos individual. Es el punto de partida perfecto para cualquier sitio web minorista de moda, y el diseño limpio y mínimo de la plantilla significa que es fácil de modificar e indoloro integrarse con su aplicación de comercio electrónico personalizada. Y sobre todo, ¡es gratis!
Ver demostración | Descargar zip
Si no tiene la intención de trabajar con el código fuente de la plantilla (y eso significa que no lo compilará o 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í
git clone https://github.com/PixelRocket-Shop/oldskool-html-bootstrap.gitnpm install en su línea de comando.npm start a Webpack DevServer.npm run build La plantilla consta de 10 páginas:
Para mantener la repetición del código al mínimo, hemos utilizado HandleBars.js como motor de plantilla y parciales para agregar rápidamente el mismo código a diferentes páginas. También usamos un complemento Handlebars para datos JSON: esto nos permite usar bucles y emitir un solo 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 administración de contenido (WordPress, etc.). Deberá incorporar nuestro código a su aplicación.
? Dist - Versión generada de la plantilla. Vaya aquí si no desea trabajar con el código fuente de la plantilla. Pero tenga en cuenta: si personaliza algo en esta carpeta directamente, y luego recompire la plantilla usando Webpack, a menos que mueva la carpeta DIST de la plantilla, sus cambios se anularán.
? Node_Modules - Directorio donde NPM instala dependientes. No verá esta carpeta hasta que complete la instalación de la plantilla. No necesita crear esta carpeta.
? SRC - Código fuente de plantilla. Vaya aquí para personalizar su plantilla.
? SRC/Activos: activos de plantilla como CSS, JS, imágenes, etc.
? SRC/DATA - Plantilla JSON Data Files. Utilizamos estos archivos JSON para facilitar su trabajo de insertar contenido en la plantilla.
? SRC/HTML - Páginas de plantilla. Vaya aquí para editar páginas existentes o agregar nuevas páginas.
? SRC/Parcials - Plantillas parciales de manillar.
Manillars es un motor de plantilla que nos permite mantener nuestro código fuente de plantilla lo más organizado y limpio como sea posible. Reduce la duplicación de código y mediante el uso de funciones auxiliares, permite a los desarrolladores de plantillas producir muy rápidamente grandes cantidades de datos con un código mínimo. Puedes leer más al respecto aquí.
Utilizamos el manillar por dos razones principales: en primer lugar, el uso de parciales de manillares nos permite hacer referencia al mismo archivo en múltiples archivos HTML y significa que solo tiene que editar el código desde una sola fuente. Si está acostumbrado a trabajar con React o Vue, esto sería lo mismo que hacer referencia a un componente. En segundo lugar, el uso de datos JSON para nuestros datos de catálogo ficticio mantiene nuestro código de plantilla limpio. Podemos emitir fácilmente 10 productos ficticios en nuestra página de listado al emitir un bucle básico de Handlebars.
Abra el siguiente archivo en nuestra plantilla: src/html/index.html.
Alrededor de la línea 21 verá el siguiente código:
{{> swiper/swiper-homepage-hero }}
Eso es un manillars parcial. Ese código le dice a Handlebars que busque dentro de una carpeta llamada Swiper (ubicada en la carpeta Parcials) y luego que busque un archivo llamado Swiper-Homepage-Hero e inserte en el archivo index.html cuando se compila.
Hay algunas notas importantes sobre nuestro uso de parciales de manillares:
Veamos cómo usamos el manillar para mantener nuestra base de código limpia. Abra la página Categoría: SRC/HTML/Categoría.html.
Alrededor de la línea 40, encontrará este código:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Y ese es nuestro bucle para una página de categoría. Estamos pasando los datos JSON a nuestro bucle de manillares, luego dentro del bucle estamos haciendo referencia a un manillar parcial y transmitiendo los datos para cada elemento de bucle:
{{> listing-cards/listing-card-one this }}
El complemento Webpack Handlebars que utilizamos viene con una utilidad muy útil que nos permite pasar en archivos JSON como datos de plantilla.
Navegue a: SRC/Data. Aquí es donde residen nuestros archivos JSON de datos de plantilla. Puede editar, eliminar o agregar el suyo a esta carpeta.
Nuevamente, si hacemos referencia a nuestro bucle de página de categoría:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
La parte importante aquí con respecto a los datos de la plantilla son los productos de categoría. Lo que esto significa es que dentro de nuestra carpeta de datos encontrará un archivo JSON llamado "Productos de categoría". Este archivo de categoría-products.json tiene una "clave" llamada "entradas".
Todos los archivos CSS/SASS de origen de la plantilla se mantienen dentro de la carpeta de activos de la plantilla. Navegue a SRC/Assets/SCSS. Abra theme.scss con su 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 a: SRC/HTML. Para que sea más fácil poner el HTML correcto en su lugar, clone una página existente. Cambie el nombre del archivo recién creado a cualquier URL que necesite. Y eso es todo. Ahora puede abrir la nueva página con su editor de código, realizar sus cambios y luego guardar el archivo. Deje de Webpack DevServer y reinicie para que aparezca la página.
Bootstrap ya tiene un sitio de documentación integral que lo guiará en la configuración y el uso de todas las funciones de bootstrap predeterminadas. Bootstrap 5 está completamente integrado al código fuente de nuestra plantilla. Consulte primero el sitio DOC de Bootstrap para obtener cualquier característica predeterminada de Bootstrap: Visite el sitio DOC de Bootstrap
Oreja
Aos.js
Sin estelares
Pexels
Pixabay
Mediumzoom.js
Nouislider.js
SimpleBar.js
Swiper.js
Puede encontrar nuestro sitio web aquí o puede enviarnos un correo electrónico a suppixelRocket.store
