A simple boilerplate using Gulp, Jade, Stylus and Browsersync.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

android-chrome-192x192

Iceberg Simple Boilerplate

license

A simple boilerplate using Gulp, Pug (formerly Jade), Stylus and Browsersync and more to start projects quickly.

  • Gulp
  • Pug
  • Stylus
  • Jeet - grid system for CSS
  • Rupture - simple media queries for stylus
  • Rucksack - a little bag of CSS superpowers
  • Browsersync - for live reloading and static server
  • Babel - the compiler for using ES6
  • ESLint - for JavaScript linting
  • CSS / JS Sourcemaps
  • Optimizes IMGs

Getting Started

Dependencies

Make sure these are installed first.

Quick Start

Then you need to install the dependencies to run this boilerplate:

$ git clone https://github.com/diogorodrigues/iceberg-boilerplate.git
$ cd iceberg-boilerplate

$ npm install       # install all dependencies
$ npm run setup     # or install all dependencies and build

File Structure

iceberg-boilerplate

├── build
│   ├── assets
│   │   ├── css
│   │   │   └── main.css
│   │   │   ├── fonts
│   │   ├── img/
│   │   ├── js
│   │   │   ├── modules/*.js
│   │   │   ├── main.js
│   ├── index.html
├── src
│   ├── fonts/
│   ├── img/
│   ├── js/
│   ├── styl
│   │   ├── _core/*.styl
│   │   ├── atoms/*.styl
│   │   ├── molecules/*.styl
│   │   ├── organisms/*.styl
│   │   ├── pages/*.styl
│   │   └── main.styl
│   └── views
├── gulpfile.js
├── package.json
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md

Tasks

Main Tasks

  • npm run start - run all tasks and initialize watch for changes and a server
  • npm run test - lint javascript
  • npm run setup - install all dependencies and build
  • npm run build - run all tasks to build

Other Tasks

  • npm run html - compile pug files
  • npm run js - compile js files
  • npm run css - compile stylus files
  • npm run fonts - move fonts files
  • npm run img - compress image files
  • npm run clean - deletes all the contents of the folder 'builder'

Maybe you want to read about NPM Scripts.

Code Standards

This project uses eslint with airbnb preset. .editorconfig is defined to have indent_size of 2 spaces.

This project also uses Husky to prevent commit and push messy and wrong code. If you don't want this, you can uninstall running npm uninstall --save-dev husky and deleting the precommit command on package.json.

How to Contribute

Please review the contributing file.

License

MIT License © Diogo Rodrigues