Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/felipefialho/kratos-boilerplate
:fire: A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
https://github.com/felipefialho/kratos-boilerplate
badge boilerplate css css-modules cssmodules es6 javascript kratos kratos-boilerplate postcss pug sass webpack yeoman
Last synced: 6 days ago
JSON representation
:fire: A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
- Host: GitHub
- URL: https://github.com/felipefialho/kratos-boilerplate
- Owner: felipefialho
- License: mit
- Created: 2015-04-07T22:46:23.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T08:35:36.000Z (about 1 year ago)
- Last Synced: 2024-12-05T10:41:43.059Z (17 days ago)
- Topics: badge, boilerplate, css, css-modules, cssmodules, es6, javascript, kratos, kratos-boilerplate, postcss, pug, sass, webpack, yeoman
- Language: JavaScript
- Homepage:
- Size: 8.51 MB
- Stars: 311
- Watchers: 13
- Forks: 36
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-made-by-brazilians - kratos-boilerplate
README
# Kratos Boilerplate
> A simple boilerplate for creating a static PWA using Webpack, Pug, PostCSS and CSS Modules
[](./license.md)
[](https://github.com/felipefialho/kratos-boilerplate/graphs/contributors)
## Generate a new project with Yeoman
To make easy create a new projects, Kratos has a [generator using Yeoman](https://github.com/felipefialho/generator-kratos-boilerplate)
To use it:
```sh
# install yeoman
$ npm install -g yo
# install kratos generator
$ npm install -g generator-kratos-boilerplate
# generate a new project
$ yo kratos-boilerplate
```
## Getting Started
```sh
# 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](https://github.com/postcss/autoprefixer) to make easy use browser prefixes, [Lost](https://github.com/peterramsing/lost) with some help from, [Rucksack](http://simplaio.github.io/rucksack/) for animations, reset and a lot of great mixins, [Rupture](https://github.com/jenius/rupture) for responsive utilities. And [Font Magician](https://github.com/jonathantneal/postcss-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](https://github.com/css-modules/css-modules).
Example
```css
.host text-align center .title font-size 4rem .description font-size 2rem;
```
After the transformation it will become like this
```css
._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
[npm-badge]: https://img.shields.io/npm/v/generator-kratos-boilerplate.svg
[npm-url]: https://www.npmjs.com/package/generator-kratos-boilerplate