Deimos Boilerplate

This project uses Pug, Stylus, Gulp and Browsersync.

Maybe you want to read about them:

• GulpJS
• Pug
• Stylus
• Browsersync

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.

• NodeJS
• GulpJS

# Clone this repository
$ git clone git@github.com:ribeiroevandro/deimos-boilerplate.git
$ cd deimos-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
│   ├── assets
│   │   └── css
│   │   │   └── style.css
│   │   ├── img/
│   │   ├── svg/
│   │   └── js
│   │       └── main.js
│   ├── styleguide
│   ├── index.html
├── gulpfile.js
├── package.json
└── src
    ├── data/
    ├── helpers/
    ├── img/
    ├── js/
    │   └── main.js
    ├── styl
    │   ├── _core/*.styl
    │   ├── blocks/*.styl
    │   ├── elements/*.styl
    │   ├── imports/*.styl
    │   ├── templates/*.styl
    │   └── style.styl
    └── pug
        └── layouts
        │   ├── inc
        │   │   ├── head.pug
        │   │   ├── header.pug
        │   │   ├── footer.pug
        │   │   └── scripts.pug
        │   └── default.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 server
• gulp js: execute js files
• gulp html: compile pug files
• gulp css: compile stylus files
• gulp images: compress image files
• gulp icons: generate sprite of icons
• gulp browser-sync: inicialize a server
• gulp watch: call for watch files
• gulp build: run all tasks
• gulp surge: deploy for surge.sh CDN

Surge

For configure the surge.sh in gulpfile.js change the line domain: 'example.surge.sh' for your domain.

Credits

This boilerplate uses as a base the awesome Kratos Boilerplate by @LFeh ❤️

License

MIT License © Evandro Ribeiro