This projects uses ES6, Pug, Stylus, Gulp and Browsersync. The main objective of this boilerplate is to ensure Quality to our code with Code Standards and Hooks to prevent messy codes to be committed or pushed.
Maybe you want to read about them:
For grid system uses Jeet with some help from Kouto Swiss for animations, reset and a lot of great mixins. Rupture for responsive utilities and uses ITCSS to build the CSS Architecture.
First of all, install the dependencies to run this boilerplate.
# Clone this repository
$ git clone [email protected]:Qualy-org/qualy-front.git
$ cd qualy-front
# install dependencies
$ npm install
With the commands above, you have everything to start.
├── README.md
├── build
│ ├── css
│ │ └── main.css
│ ├── img
│ │ └── qualy.png
│ │ └── favicon.png
│ ├── index.html
│ └── js
│ └── main.js
├── gulpfile.babel.js
├── package.json
└── src
├── img
│ └── qualy.png
│ └── favicon.png
├── js
│ ├── main.js
├── styl
│ ├── base
| | └── _base.styl
| ├── components
│ | └── _components.styl
| ├── generic
│ | └── _generic.styl
| ├── objects
│ | └── _objects.styl
| ├── settings
│ | └── _settings.styl
| ├── tools
│ | └── _tools.styl
| ├── trumps
│ | └── _trumps.styl
│ └── main.styl
└── templates
└── index.pug
Those folders and file will change during the project.
This project uses eslint and .editorconfig is defined to have indent_size of 4 spaces.
This project also uses Husky to prevent commit and push messy and wrong code. Please, don't be stupid, fix all errors before commit and push =D
To help you, this project has a npm run fix
command to fix all jscs errors.
gulp
: run all tasks and initialize watch for changes and a servergulp js
: execute js filesgulp pug
: compile pug filesgulp css
: compile stylus filesgulp images
: compress image filesgulp browser-sync
: inicialize a servergulp watch
: call for watch filesgulp pages
: deploy files to gh-pagesgulp test
: initialize server and run both performance and code complexity testsgulp deploy
: run all tasks and deploy files to gh-pages
Thanks to @Diessicode for the awesome idea to put this logo.
This boilerplate is free and open source software, distributed under the The MIT License. So feel free to use this to create your site without linking back to me or using a disclaimer.
If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.