Construindo uma vitrine de comércio eletrônico com interface de usuário de vitrine e Tailwind CSS

Neste artigo, vamos construir uma vitrine com interface de usuário de vitrine e CSS Tailwind.

O que é Storefront UI?

Storefront UI é uma biblioteca de componentes Vue-atualmente, um beta estável-que oferece um sistema de design bem pensado de componentes de comércio eletrônico. Ele segue os princípios do design atômico , que é ótimo para construção aplicativos front-end escalonáveis ​​e de fácil manutenção. Também é compatível com o Google UX Playbook para varejo.

Por que a interface do usuário da loja?

• Ótimas opções de personalização : você pode personalizar os componentes da interface do usuário do Storefront (átomos, moléculas e organismos) facilmente por meio de adereços, slots e variáveis ​​CSS. Você também pode personalizar a aparência de seus componentes com Tailwind CSS, como faremos aqui
• Mobile-first : tenha certeza de que seus componentes são responsivos
• Desempenho : você não precisa importar componentes desnecessários. O Storefront UI fornece a fonte bruta, o que significa que você pode se beneficiar de otimizações de tempo de construção, como agitação de árvore ou agrupamento de partes comuns. Ele apenas agrupa o que você importa
• Acessibilidade : é dedicado ao comércio eletrônico e possui todos os elementos/componentes necessários para a construção de uma loja online moderna. Esses componentes também são acessíveis e são baseados no Google UX Playbook

O que é Tailwind CSS?

Tailwind CSS é uma incrível framework CSS com prioridade para o utilitário que torna os componentes de estilo simples e Rápido. Você pode adicionar classes como flex , pt-4 e text-center no atributo class de sua marcação para estilização.

Por que usar Tailwind CSS?

• Torna o estilo mais rápido : não há necessidade de escrever estilos CSS, SCSS ou menos manualmente
• Facilita a estilização : você não precisa deixar seu arquivo de marcação enquanto estiliza
• Nomes de classe intuitivos : os nomes de classe não poderiam ser mais simples. Por exemplo, mb-0 significa margin-bottom definido como 0 e pt-0 significa padding-top definido para 0. Também é fácil manter a consistência com as opções de cores, espaçamento, tipografia, sombras e tudo o mais que compõe um sistema de design bem projetado. Você define classes apenas uma vez, e essas classes são usadas em todo o aplicativo

Construindo uma vitrine

Para entender melhor a interface do usuário da vitrine, vamos usá-la para construir uma vitrine.

Instalação e configuração de arquivo

Crie um aplicativo Vue com o seguinte comando:

 vue create  

Se não tiver o Vue instalado em sua máquina, você pode verificar o guia de instalação do Vue para saber como instale-o.

Agora, instale o Storefront UI:

 npm install--save @ storefront-ui/vue 

Importar estilos globais da interface do usuário da vitrine-eles serão adicionados ao arquivo main.js no diretório raiz do seu projeto:

 import"@ storefront-ui/vue/styles.scss"; 

Instale o Tailwind CSS:

 install-D tailwindcss @ npm: @ tailwindcss/postcss7-compat @ tailwindcss/postcss7-compat postcss @ ^ 7 autoprefixer @ ^ 9 

Gere seus arquivos tailwind.config.js e postcss.config.js :

 npx tailwindcss init-p 

Crie o arquivo ./src/index.css e cole o seguinte código para importar os estilos de base, componentes e utilitários do Tailwind:

 @tailwind base;
componentes @tailwind;
utilitários @tailwind; 

Importe o arquivo index.css para seu arquivo raiz main.js :

 import'./index.css'

Verifique se sua instalação funciona iniciando o projeto Vue e importando um átomo de link da interface de usuário da vitrine para o arquivo App.vue :

//Arquivo App.vue
 
  Página inicial  
 
 

Se tudo estiver bem, você verá um link legal.

Você pode ajustar o tamanho da fonte do link: o Tailwind fornece a classe para ajustar o tamanho das fontes . Adicione um atributo de classe ao SfLink componente e dê a ele um valor de text-lg . Se você salvar o arquivo e verificar seu navegador, verá que o tamanho da fonte mudou.

Você também pode acessar e usar variáveis ​​CSS da interface do usuário do Storefront com o Tailwind. Se você deseja acessar as variáveis ​​CSS, veja como será o seu arquivo tailwind.config.js :

 module.exports={ purga: [], importante: verdade, tema: { ampliar: { tamanho da fonte: { "sf-xs":"var (-font-size-xs)",//12px "sf-sm":"var (-font-size-sm)",//14px "sf-base":"var (-font-size-base)",//16px "sf-lg":"var (-font-size-lg)",//18px }, espessura da fonte: { "sf-light":"var (-font-weight-light)",//300 "sf-normal":"var (-peso da fonte-normal)",//400 "sf-medium":"var (-font-weight-medium)",//500 "sf-semibold":"var (-font-weight-semibold)",//600 "sf-bold":"var (-font-weight-bold)",//700 }, cores: { "sf-c-black":"var (-c-black)",//# 1d1f22 "sf-c-black-base":"var (-c-black-base)",//# 1d1f22 "sf-c-black-lighten":"var (-c-black-lighten)",//# 292c30 "sf-c-black-darken":"var (--c-black-darken)",//# 111214 "sf-c-white":"var (-c-white)",//#ffffff "sf-c-body":"var (-c-body)",//#ffffff "sf-c-text":"var (-c-text)",//# 1d1f22 "sf-c-text-muted":"var (-c-text-muted)",//# 72757E "sf-c-text-disabled":"var (-c-text-disabled)",//# e0e0e1 "sf-c-link":"var (-c-link)",//# 43464E "sf-c-link-hover":"var (-c-link-hover)",////# 1d1f22 "sf-c-primary":"var (-c-primary)",//# 5ece7b "sf-c-primary-base":"var (-c-primary-base)",//# 5ece7b "sf-c-primary-lighten":"var (-c-primary-lighten)",//# 72d48b "sf-c-primary-darken":"var (-c-primary-darken)",//# 4ac86b "sf-c-primary-variant":"var (-c-primary-variant)",//# 9ee2b0 "sf-c-on-primary":"var (-c-on-primary)",//#ffffff "sf-c-secondary":"var (--c-secondary)",//# 1d1f22 "base-sf-c-secundária":"var (-base-c-secundária)",//# 1d1f22 "sf-c-secondary-lighten":"var (-c-secondary-lighten)",//# 292c30 "sf-c-secondary-darken":"var (-c-secondary-darken)",//# 111214 "sf-c-secondary-variant":"var (-c-secondary-variant)",//# 43464E "sf-c-on-secondary":"var (-c-on-secondary)",//#ffffff "sf-c-light":"var (-c-light)",//# f1f2f3 "sf-c-light-base":"var (-c-light-base)",//# f1f2f3 "sf-c-light-lighten":"var (-c-light-lighten)",//#ffffff "sf-c-light-darken":"var (-c-light-darken)",//# e3e5e7 "sf-c-light-variant":"var (-c-light-variant)",//#ffffff "sf-c-on-light":"var (-c-on-light)",//# 1d1f22 "sf-c-gray":"var (-c-gray)",//# 72757E "sf-c-gray-base":"var (-c-gray-base)",//# 72757E "sf-c-gray-lighten":"var (-c-gray-lighten)",//# 7f828b "sf-c-gray-darken":"var (-c-gray-darken)",//# 666971 "sf-c-gray-variant":"var (-c-gray-variant)",//# 8D8F9A "sf-c-on-gray":"var (-c-on-gray)",//# 1d1f22 "sf-c-dark":"var (-c-dark)",//# 1d1f22 "sf-c-dark-base":"var (-c-dark-base)",//# 1d1f22 "sf-c-dark-lighten":"var (-c-dark-lighten)",//# 292c30 "sf-c-dark-darken":"var (-c-dark-darken)",//# 111214 "sf-c-dark-variant":"var (-c-dark-variant)",//# 43464E "sf-c-on-dark":"var (-c-on-dark)",//#ffffff "sf-c-info":"var (-c-info)",//# 0468DB "sf-c-info-base":"var (-c-info-base)",//# 0468DB "sf-c-info-lighten":"var (-c-info-lighten)",//# 0474f4 "sf-c-info-darken":"var (-c-info-darken)",//# 045cc2 "sf-c-info-variant":"var (-c-info-variant)",//# e1f4fe "sf-c-on-info":"var (-c-on-info)",//#ffffff "sf-c-success":"var (-c-success)",//# 5ece7b "sf-c-success-base":"var (-c-success-base)",//# 5ece7b "sf-c-success-lighten":"var (-c-success-lighten)",//# 72d48b "sf-c-success-darken":"var (-c-success-darken)",//# 4ac86b "sf-c-success-variant":"var (-c-success-variant)",//# 9ee2b0 "sf-c-on-success":"var (-c-on-success)",//#ffffff "sf-c-warning":"var (-c-warning)",//# ecc713 "sf-c-warning-base":"var (-c-warning-base)",//# ecc713 "sf-c-warning-lighten":"var (-c-warning-lighten)",//# eecd2b "sf-c-warning-darken":"var (-c-warning-darken)",//# d4b311 "sf-c-warning-variant":"var (-c-warning-variant)",//# f6e389 "sf-c-on-warning":"var (-c-on-warning)",//#ffffff "sf-c-perigo":"var (-c-perigo)",//# d12727 "sf-c-hazard-base":"var (-c-hazard-base)",//# d12727 "sf-c-perigo-clarear":"var (-c-perigo-clarear)",//# da3838 "sf-c-perigo-escurecer":"var (-c-perigo-escurecer)",//# bc2323 "sf-c-perigo-variante":"var (-c-perigo-variante)",//# fcede8 "sf-c-on-danger":"var (-c-on-danger)",//#ffffff }, espaçamento: { "sf-2xs":"var (-spacer-2xs)",//4px "sf-xs":"var (--spacer-xs)",//8px "sf-sm":"var (-spacer-sm)",//16px "sf-base":"var (-spacer-base)",//24px "sf-lg":"var (-spacer-lg)",//32px "sf-xl":"var (-spacer-xl)",//40px "sf-2xl":"var (-spacer-2xl)",//80px "sf-3xl":"var (-spacer-3xl)",//160px }, família de fontes: { "sf-primary":"var (-font-family-primary)",//"Roboto", serif "sf-secondary": `var (-font-family-secondary)`,//"Raleway", sans-serif }, }, }, variantes: {}, plugins: [],
};

Cole este código acima em seu arquivo tailwind.config.js e salve. Volte para o arquivo App.vue e altere o valor da classe no componente SfInput para text-sf-lg . Voilà! Agora você está usando as variáveis ​​CSS da interface do usuário do Storefront por meio do Tailwind para estilizar os componentes.

Construindo a barra de navegação

Para construir a barra de navegação da vitrine, crie um arquivo de cabeçalho no diretório de componentes e cole o seguinte código no arquivo:

//VittyHeader.vue
 
    
 

Aqui, importamos o SfHeader . Este componente usa slots nomeados , um dos quais é navegação . Usaremos este slot para adicionar links de navegação ao componente SfHeader .

//NavigationLinks.vue
 
 
  Página inicial  
 
  Sobre  
 
  Contato  
 


 

Lembre-se de limpar seu arquivo App.vue e importar seu componente de cabeçalho para ver como fica no navegador.

Construindo a molécula do carrossel

A interface de usuário da vitrine usa Glide.js para seus carrosséis. Aqui podemos ver opções para personalizar o carrossel, como o perView propriedade, que é usada para controlar o número de slides visíveis de uma vez. Estaremos usando o SfHero para criar controles deslizantes na vitrine. Se precisar usar as opções fornecidas pelo Glide.js, você pode usar o componente carrossel :

//VittyHero.vue
   Coleção de verão 2019     

O componente SfHeroItem é importado automaticamente como um componente filho do SfHero . No trecho de código acima, utilizamos os slots nomeados subtitle e title para alterar a cor padrão do texto para que fique mais visível na imagem principal.

Construindo a molécula de produtos domésticos

Para construir a seção de produtos domésticos, usaremos o SfSection componente para criar uma seção na vitrine, o SfCarousel componente, que aceitará uma propriedade de configurações para personalização do carrossel . Também usaremos o SfProductCard componente para processar informações do produto.

A propriedade titleHeading no componente SfSection é usada para definir o texto do cabeçalho da seção, e a propriedade levelHeading determina o tamanho desse texto título:

Construindo a seção de banner

Para construir a seção de banner, usaremos SfBanner que tem um slot chamado call-to-action onde podemos usar o SfButton componente:

Construindo a seção de demonstração

Para construir esta seção, usaremos o componente SfSection e o componente SfImage . O SfImage O componente pode lançar uma sobreposição escura em uma imagem e exibir algum texto que foi passado como filho. Isso pode ser visto nas três primeiras imagens:

   
 
  UMA  
 
  B  
 
  C  
 
  
 
 

Conclusão

Muito bem! Você chegou até aqui. Neste artigo, vimos o que é Storefront UI, como configurá-la e como usar o Tailwind para personalização de CSS. Também aprendemos como usar alguns componentes construindo uma bela vitrine. Sinta-se à vontade para obter o código do meu repositório GitHub aqui .

A postagem Como criar uma vitrine de comércio eletrônico com interface de usuário de vitrine e CSS do Tailwind apareceu primeiro no LogRocket Blog .

Source link