A simple boilerplate for creating a static PWA using Webpack, Pug, PostCSS and CSS Modules
To make easy create a new projects, Kratos has a generator using Yeoman
To use it:
# install yeoman
$ npm install -g yo
# install kratos generator
$ npm install -g generator-kratos-boilerplate
# generate a new project
$ yo kratos-boilerplate
# install dependencies
$ npm i
# run the project
$ npm start
With the commands above, you have everything to start.
The app.config.json
file has all minimal config to create your scaffolding.
This project use Sass as CSS preprocessor 😁
For grid system uses Autoprefixer to make easy use browser prefixes, Lost with some help from, Rucksack for animations, reset and a lot of great mixins, Rupture for responsive utilities. And Font Magician to get the webfonts.
To make easier create your components and avoid a lot of problems, it boilerplate use CSS Modules.
Example
.host text-align center .title font-size 4rem .description font-size 2rem;
After the transformation it will become like this
._host_4897k_1 {
text-align: center;
}
._title_4897k_9 {
font-size: 4rem;
}
._description_4897k_12 {
font-size: 2rem;
}
npm start
: run all tasks and initialize watch for changes and a servernpm run build
: run all production tasks create adist
folder to deploynpm run lint
: lint javascript and cssnpm run fix
: command to fix all eslint errorsnpm run deploy
: run all tasks to build and deploy on gh-pages
MIT License © Felipe Fialho