🔥 A simple boilerplate for creating a static PWA using Webpack, Pug, PostCSS and CSS Modules
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.stylintrc Rename folder Jul 18, 2018
.travis.yml
app.config.json
license Init 2.0.0 Jul 17, 2018
package-lock.json
package.json
postcss.config.js
readme.md Fix readme Jul 19, 2018
sass-lint.json
webpack.config.js

readme.md

Kratos Boilerplate

A simple boilerplate for creating a static PWA using Webpack, Pug, PostCSS and CSS Modules

license GitHub contributors

Getting Started

# 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.

About CSS

Stylus or Sass

You can use Stylus or Sass as CSS preprocessor 😁

Post CSS libs

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.

CSS Modules

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;
}

Tasks

  • npm start: run all tasks and initialize watch for changes and a server
  • npm run build: run all production tasks create a dist folder to deploy
  • npm run lint: lint javascript and css
  • npm run fix: command to fix all eslint errors
  • npm run deploy: run all tasks to build and deploy on gh-pages

License

MIT License © Felipe Fialho