🎼 Bass

Boilerplate for static website based on webpack, best practices and modern tools.

🚀 Demo

Table of contents

1. Features
2. Requirements
3. Instructions
   1. Webpack
   2. Babel
   3. ESLint & Stylelint
   4. Prettier, Husky & Lint-staged
   5. SASS
   6. PostCSS
   7. Google Fonts
4. Contribuiting
5. TODO

🏆 Features

• Webpack to bundle application
• Write modern JavaScript with Babel
• Lint your code with ESLint and Stylelint
• Format your code with Prettier
• Ensure every commit is formatted with Husky & Lint-staged
• Optimize and minify HTML, CSS, JS and images
• Auto prefixes CSS
• 7in1 SASS pattern
• Comes with:
  • normalize.css
  • fontawesome-free
  • hamburgers
  • Open Sans Google Font

☑️ Requirements

• 🐳 Docker
• 🐙 Docker Compose

OR

• Node
• NPM or 🐈 Yarn

📜 Instructions

# clone repo
$ git clone https://github.com/verzola/bass.git
# enter in directory
$ cd bass

# run on docker
$ docker-compose up -d

# or run locally
$ yarn # or npm install
# develop with hot code reload
$ yarn run dev # or npm run dev

# other scripts
$ yarn run build # builds website to dist folder
$ yarn run format # formats code using prettier
$ yarn run lint # lint js & scss
$ yarn run lint:js # lint js only
$ yarn run lint:scss # lint scss only

🕸️ 📦 Webpack

Webpack bundles your application

Config: webpack.config.js

Learn more about Webpack

🐠 Babel

Write modern JavaScript and compile to JavaScript that old browsers understand.

Learn more about Babel

🚫 💩 ESLint & StyleLint

Lint your code with community recommended standards.

ESLint Config: .eslintrc.json

Stylelint Config: .stylelintrc.json

Learn more about ESLint

Learn more about StyleLint

🚫 💩 Prettier, husky & Lint-staged

A pre-commit hook ensures that the files you commit are properly formatted.

Learn more about Prettier

Learn more about Husky

Learn more about Lint-staged

👓 SASS

Based on sass-boilerplate with some vertical rhythm tweaks and some default style.

PostCSS

PostCSS is configured with CSSNano and Autoprefixer plugins.

CSSNano minifies and optimizes the output CSS.

Autoprefixer adds browser prefixes automatically based on browserlist on package.json.

PostCSS Config: postcss.config.js

Learn more about CSSNano

Learn more about Autoprefixer

Google Fonts

The default installation comes with Open Sans Google Font downloaded locally. If you a different Google Font, you can use Google Webfonts Helper to download the CSS snippet and the fonts file and put them on src/base/_fonts.scss and /src/fonts/ respectively.

🙋 Contributing

Contribuitions are welcome. If you find any problem or have a suggestion, please open an issue.

⚠️ Known issues

• Watch does not work on Docker Desktop on Windows (see)

📝 TODO

• Imagemin section on README
• Contribute file
• Pull request template file
• Progressive Web App
• Favicon
• OpenGraph
• Other important meta tags
• Extract babel config to a file
• Create a chat and badge
• Alert component
• Label component
• Forms components