Skip to content
Boilerplate básico para projetos front-end com ênfase em HTML e CSS.
CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
js
sass
.editorconfig Initial commit Nov 18, 2019
.gitignore Initial commit Nov 18, 2019
LICENSE.md Initial commit Nov 18, 2019
README.md README quick fix Dec 14, 2019
index.html Initial commit Nov 18, 2019
package-lock.json Bump serialize-to-js from 3.0.0 to 3.0.1 Dec 7, 2019
package.json browserlist to Parcel async/await Jan 18, 2020

README.md

Basic Front Boilerplate (BFB)

Boilerplate básico para projetos front-end com ênfase em HTML e CSS.

Pré-requisitos

  • Node.js

Uso

Optamos por usar o Parcel, que é um bundler que atende ao objetivo do projeto, é rápido e não precisa de configuração. Então, o projeto tem suporte a Sass, suporte a JavaScript moderno com Babel e muitos mais.

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, você só precisa executar npm start e começar a mexer no HTML e Sass como se não houvesse amanhã -- o Parcel oferece live reload: sempre que qualquer alteração é feita, o navegador é atualizado instantaneamente no endereço do servidor que é levantado.

Algo importante sobre estilos é que o arquivo sass/style.scss importa todos os demais (partials), então, sempre que criar um novo arquivo na estrutura, lembre-se de importá-lo.

Se necessário for, você pode executar o comando para fazer o build, que vai minificar os assets, fazer as devidas substituições e tudo o mais que é comum em builds.

Apesar de este boilerplate contar com uma das mais atuais arquiteturas CSS possíveis atualmente -- SMACSS, BEM e Namespaces CSS -- e suporte a ES6, seu uso é recomendado mais para testes e estudos.

Licença

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

You can’t perform that action at this time.