Kratos Boilerplate
This project uses Pug, Stylus, Gulp and Browsersync.
Maybe you want to read about them:
For grid system uses 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.
Getting Started
Installation
First of all, install the dependencies to run this boilerplate.
# Clone this repository
$ git clone git@github.com:LFeh/kratos-boilerplate.git
$ cd kratos-boilerplate
# install gulp globally
$ npm install -g gulp
# install dependencies
$ npm install
With the commands above, you have everything to start.
Folders and Files
├── README.md
├── build
│ ├── css
│ │ └── style.css
│ ├── img/
│ ├── svg/
│ └── js
│ └── main.js
│ ├── index.html
├── gulpfile.babel.js
├── package.json
└── src
├── img/
├── svg/
├── js/
├── styl
│ ├── _core/*.styl
│ ├── atoms/*.styl
│ ├── molecules/*.styl
│ ├── organisms/*.styl
│ ├── widgets/*.styl
│ ├── pages/*.styl
│ └── style.styl
└── pug
└── index.pug
Those folders and file will change during the project.
Code Standards
This project uses my own Coding Style as code reference.
This project also uses Husky to prevent commit and push messy and wrong code.
To help you, this project has a npm run fix
command to fix all jscs errors.
Parker CSS
To view a reporter of CSS files, use a npm run reporter
command.
Tasks
gulp
: run all tasks and initialize watch for changes and a servergulp js
: execute js filesgulp html
: compile pug filesgulp css
: compile stylus filesgulp images
: compress image filesgulp icons
: generate sprite of iconsgulp browser-sync
: inicialize a servergulp watch
: call for watch filesgulp build
: run all tasks
Credits
This boilerplate uses as a base the awesome Qualy Boilerplate by @Willian_justen ❤️
License
MIT License © Luiz Felipe Tartarotti Fialho