oldskool html bootstrap
Initial Release
O Oldskool é um modelo HTML de Bootstrap 5 moderno e flexível, com listagens de cartões personalizáveis na página de categoria e uma excelente exibição de produto na página de produto individual. É o ponto de partida perfeito para qualquer site de varejo de moda, e o design limpo e mínimo do modelo significa que é fácil de modificar e indolor integrar ao seu aplicativo de comércio eletrônico personalizado. E acima de tudo, é grátis!
Ver demo | Baixar zip
Se você não pretende trabalhar com o código -fonte do modelo (e isso significa que você não o estará compilando ou executando o servidor Webpack Dev), não precisará instalar nada. Você pode simplesmente navegar até a pasta Dist e começar a editar os arquivos.
A maioria dos desenvolvedores editará o código -fonte e também estará executando o WebPack para recompilar os arquivos do modelo. Se for esse o caso, verifique se você tem o Node.js instalado. Você pode baixá -lo aqui
git clone https://github.com/PixelRocket-Shop/oldskool-html-bootstrap.gitnpm install em sua linha de comando.npm start para iniciar o WebPack DevServer.npm run build O modelo consiste em 10 páginas:
Para manter o código de repetição no mínimo, usamos guidão.js como motor de modelos e parciais para adicionar rapidamente o mesmo código a páginas diferentes. Também usamos um plug -in de guidão para dados JSON - isso nos permite usar loops e produzir um único bloco de código HTML em vez de repetir o mesmo HTML.
URL de demonstração
Observe que este é apenas um modelo HTML. Ele não se conecta a um banco de dados e não funciona automaticamente em um sistema de gerenciamento de conteúdo (WordPress etc). Você precisará incorporar nosso código em seu aplicativo.
? Dist - Versão gerada do modelo. Vá aqui se não quiser trabalhar com o código -fonte do modelo. Mas esteja avisado: se você personalizar qualquer coisa nesta pasta diretamente e depois recompilar o modelo usando o WebPack, a menos que você mova a pasta Dist para fora do modelo, suas alterações serão substituídas.
? Node_modules - Diretório em que o NPM instala dependências. Você não verá esta pasta até concluir a instalação do modelo. Você não precisa criar esta pasta.
? SRC - Código fonte do modelo. Vá aqui para personalizar seu modelo.
? SRC/Ativos - Ativos de modelo, como CSS, JS, Imagens etc.
? SRC/Data - Modelo JSON Data Arquivos. Usamos esses arquivos JSON para facilitar o trabalho do seu trabalho no modelo.
? Páginas de modelo src/html. Vá aqui para editar páginas existentes ou adicionar novas páginas.
? SRC/Parcials - Modelos parciais do guidão.
O guidão é um mecanismo de modelo que nos permite manter nosso código -fonte de modelo o mais organizado e o mais limpo possível. Ele reduz a duplicação do código e, através do uso de funções auxiliares, permite que os desenvolvedores de modelos emitam muito rapidamente grandes quantidades de dados com código mínimo. Você pode ler mais sobre isso aqui.
Usamos o guidão por dois motivos principais: em primeiro lugar, o uso de parques do guidão nos permite fazer referência ao mesmo arquivo em vários arquivos HTML e significa que você só precisa editar o código de uma única fonte. Se você está acostumado a trabalhar com o React ou o Vue, isso seria o mesmo que referenciar um componente. Em segundo lugar, o uso de dados JSON para nossos dados de catálogo fictício mantém o código do modelo limpo. Podemos emitir facilmente 10 produtos fictícios em nossa página de listagem, produzindo um loop básico de guidão.
Abra o seguinte arquivo em nosso modelo: src/html/index.html.
Em torno da linha 21, você verá o seguinte código:
{{> swiper/swiper-homepage-hero }}
Isso é um guidão parcial. Esse código diz ao HandleBars para olhar dentro de uma pasta chamada Swiper (localizada na pasta Parcials) e, em seguida, encontrar um arquivo chamado Swiper-Homepage -hero e insira-o no arquivo index.html quando for compilado.
Existem algumas notas importantes sobre o uso do guidão parciais:
Vejamos como usamos guidão para manter nossa base de código limpa. Abra a página da categoria: src/html/category.html.
Na linha 40, você 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}}
E esse é o nosso loop para uma página de categoria. Estamos passando em dados JSON para o nosso Loop de guidão e, em seguida, dentro do loop, estamos referenciando um guidão parcial e passando os dados para cada item de loop:
{{> listing-cards/listing-card-one this }}
O plug -in Webpack Handlebars que usamos vem com um utilitário muito útil que nos permite passar nos arquivos JSON como dados de modelo.
Navegue para: src/dados. Aqui é onde residem nossos arquivos JSON de dados de modelo. Você pode editar, remover ou adicionar o seu próprio a esta pasta.
Novamente, se referirmos nosso loop de página de categoria:
{{#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}}
A parte importante aqui com relação aos dados de modelo é a categoria-produtores.entries. O que isso significa é que, dentro da nossa pasta de dados, você encontrará um arquivo JSON chamado "category-products". Este arquivo de categoria-products.json possui uma "chave" chamada "entradas".
Todos os arquivos CSS/SASS de origem do modelo são mantidos dentro da pasta de ativos do modelo. Navegue para SRC/Assets/SCSS. Abra o tema.scss com seu editor.
Este é o principal ponto de entrada para todos os outros arquivos SASS/CSS.
Para criar uma nova página, navegue no seu editor de código para: src/html. Para facilitar a instalação do HTML correto, clone uma página existente. Renomeie o arquivo recém-criado para qualquer URL necessário. E é isso. Agora você está livre para abrir a nova página com seu editor de código, fazer suas alterações e salvar o arquivo. Saia do WebPack DevServer e reinicie -o para que a página apareça.
O Bootstrap já possui um site de documentação abrangente que o guiará na configuração e no uso de todos os recursos de bootstrap padrão. O Bootstrap 5 está totalmente integrado ao código -fonte do nosso modelo. Consulte o site do documento do Bootstrap primeiro para obter qualquer recurso padrão de bootstrap: visite o site do documento do bootstrap
Bootstrap
Aos.js
Unsplash
Pexels
Pixabay
MediumZoom.js
Nouislider.js
Simplebar.js
Swiper.js
Você pode encontrar nosso site aqui ou pode nos enviar um e -mail para [email protected]
