papa_karlo

import gulp   from 'gulp'
import stylus from 'gulp-stylus'
import grid   from 'smart-grid'
import del    from 'del'

const settings = {
    outputStyle: 'styl', /* less || scss || sass || styl */
    columns: 12, /* number of grid columns */
    offset: "30px", /* gutter width px || % */
    container: {
        maxWidth: '1200px', /* max-width оn very large screen */
        fields: '30px' /* side fields */
    },
    breakPoints: {
        lg: {
            'width': '1100px', /* -> @media (max-width: 1100px) */
            'fields': '30px' /* side fields */
        },
        md: {
            'width': '960px',
            'fields': '15px'
        },
        sm: {
            'width': '780px',
            'fields': '15px'
        },
        xs: {
            'width': '560px',
            'fields': '15px'
        }
    }
};

const paths = {
  styl: {
    vendor: './vendor/',
    src:    './src/**/*.styl',
    dest:   './dest'
  }
}

const clean = () => del([ 'dest' ])
export { clean }

export function init(cb){
  grid(paths.styl.vendor, settings)
  cb()
}

export function styl_build(){
  return gulp.src(paths.styl.src)
    .pipe(stylus({
        paths : [
          'src',
          'vendor'
       ]
     }))
    .pipe(gulp.dest(paths.styl.dest))
}

const build = gulp.series(
  clean,
  init,
  styl_build
)
export { build }

export default build

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp"
  },
  "author": "Vsnegovik",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-stylus": "^2.6.0",
    "smart-grid": "^1.0.3",
    "del": "^2.2.2"
  }
}

{
  "presets": [ "es2015" ]
}

@import smart-grid

.items
  row-flex()
  justify-content-md(center)

  .item
    col()
    col-3()
    col-md-5()
    col-xs-10()