JavaScript + SASS
Basic SPA - Boilerplate Features
These are the most relevant technologies that this boilerplate includes, all of them are configured to inspire your project and are showing examples of what you can do with them.
- JavaScript: Written in vanilla JavaScript.
- SASS: Some good Sass practices to create the Styles.
- Autoprefixer: Automatically add vendor prefixes to these Styles.
- Webpack: Automation of tasks and compilation of the project.
- Babel: Transpiler to different versions of EcmaScript.
- Browserlist: To configure which browsers will support.
- Jest: Framework for testing.
- ESLint: Linting for Scripts.
- StyleLint: Linting for Styles.
- Prettier: Formatter for Scripts and Styles.
- EditorConfig: Formatter for files in general.
- Husky: Used for attaching to git hooks and run scripts.
🥑 Demo (In progress)
Once you download the project you will find a complete demo of how it works, including (each boilerplate could include different examples):
- Page: Example of how to create a page.
- File structure: Project structure following "feature" convention.
- Styles structure: Structure, mixins and variables using non-strict BEM.
- File names: File names structure using "type name" convention.
📚 Setup and scripts
Before start download or clone the boilerplate. Install all the dependencies.
$ npm install
Run the project for local development.
$ npm start
Build the project for a production environment.
$ npm run build
Test your code.
$ npm test
The linting is configured with husky and will run before push, but you can run it.
$ npm run lint # (Will run scripts and styles linting)
$ npm run lint:scripts # (Only scripts lint)
$ npm run lint:styles # (Only styles lint)
🎩 Contributors
This project is possible thanks to the contributors.
 Quique Fdez Guerra 📦 💻 🔧 |  Sabrina Pertusatti 💻 |  Víctor Gámez 💻 |  Alex Kryzhanovskyy 💻 |  Juan Carlos 💻 |