Awesome Open Source
Awesome Open Source

Kratos Boilerplate

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

license GitHub contributors

Generate a new project with Yeoman

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

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

This project use 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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Css (209,838
Webpack (9,583
Sass (6,031
Boilerplate (5,525
Es6 (5,301
Pug (1,471
Postcss (1,247
Css Modules (546
Badge (532
Yeoman (474
Related Projects