saulopaiva / basic-front-boilerplate-fluid-versions

Boilerplate Front End para a Web Moderna

Basic Front Boilerplate (BFB)

Boilerplate front-end para projetos de teste/estudos.

---

Pré-requisitos

• Node.js
• npm

Uso

O BFB usa Parcel, uma build tool rápida, eficiente e que não precisa de configuração (zero configuration).

Em função disso, oferece suporte a CSS e JavaScript modernos, Sass, e todas as outras modernidades/comonidades da ferramenta.

Comandos

Comando	O que faz?	Observação
npm install	Instala pacotes necessários	Execute isso primeiro!
npm start	Inicia o desenvolvimento	Acesse http://localhost:1234
npm run build	Faz build do site	Resultado na pasta dist

Considerações

Basicamente, depois da instalação inicial de pacotes, só é preciso executar npm start e começar a mexer no projeto como se não houvesse amanhã.

Parcel oferece hot reload: conforme alterações de código são feitas, ele faz rebuild automático dos arquivos alterados e atualiza o navegador.

O arquivo style/index.scss carrega todos os demais (partials), então, sempre que criar um novo arquivo na estrutura, lembre-se de importá-lo -- dentro dos conceitos da arquitetura ITCSS.

💡 Não sabe ITCSS?
Caso não saiba o que é ou como usar ITCSS, conheça nosso curso para aprender mais sobre como estruturar seu CSS de maneira profissional.
Para saber mais, cadastre seu e-mail na lista preferencial para ser avisado quando abriremos uma nova turma.

Tweaks

CSS Cascade Layers

Caso queira usar CSS Cascade Layers, o plugin PostCSS Cascade Layers já está disponível no BFB.

Para ativá-lo, adicione o seguinte código ao arquivo .postcssrc (dentro do nó plugins):

"@csstools/postcss-cascade-layers": true,

Solução de Problemas

Pacotes Node não estão sendo instalados

Caso aconteçam erros ao tentar instalar os pacotes Node, pode ser algo relacionado à compatibilidade.

Recomendamos o uso do nvm para controlar as versões do Node.

Então, você pode executar nvm use para ativar a mesma versão do Node usada para desenvolver o BFB.

Licença

Este projeto usa a licença WTFPL. Consulte o arquivo LICENSE.md para mais detalhes.