Use Less instead of CSS for a quick markup

Make sure type="text/less" is in your style attribute and followed with the LESS.js script tag within <head/>

	<style type="text/less">
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

<!DOCTYPE html>  
<html>  
<head>  
	<title>Quick HTML page with less</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" />
	<link rel="stylesheet" href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css" />

	<style type="text/less">
	/* mixins */
	.flex() {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}

	.flex--column() {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.flex--row() {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}

	.flex-flex(@flex) {
		-webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: @flex;         /* OLD - Firefox 19- */
		-webkit-flex: @flex;          /* Chrome */
		-ms-flex: @flex;              /* IE 10 */
		flex: @flex;    
	}

	.flex-content(@content) {
		-webkit-justify-content: @content;
		-ms-flex-pack: @content;
		justify-content: @content;
	}
	/* END mixins */

	
	.mizu {
	  min-height: 100vh;
	}

	.mizu-header,
	.mizu-footer {
		background-color: #646065;
		color: white;
		height: 50px;
	}
	
	.mizu,
	.mizu-body {
	  .flex();
	  .flex--column();
	}

	.mizu-content {
		color: #766561;
		background-color: #CBCBCB;
	}

	.mizu-nav {
	  order: -1;
	  color: #EDE8E1;
	  background-color: #D2C4BE;
	}

	.mizu-ads {
		color: #EDE8E1;
		background-color: #D2C4BE;
	}

	@media (min-width: 768px) {
	  .mizu-body {
	    .flex--row();
	    .flex-flex(1)
	  }
	  .mizu-content {
	    .flex-flex(1)
	  }
	  .mizu-nav, .mizu-ads {
	    /* 12em is the width of the columns */
	    .flex-flex(0 0 12em)
	  }
	}


	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>  
<body class="mizu">  
	<header class="mizu-header">The header</header>
	<div class="mizu-body">
		<main class="mizu-content">
			<div id="app">{{user.firstname}} {{user.lastname}}</div>
		</main>
		<nav class="mizu-nav">
			Navigation
		</nav>
		<aside class="mizu-ads">
			Advertisement
		</aside>
	</div>
	<footer class="mizu-footer">The Footer</footer>

	<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
	<script src="resources/js/app.js"></script>
</body>  
</html>

Moving from Quickpage to Gulp

What is Gulp

Official definition: Gulp: the streaming build system

Gulp is basically a tool that automates your frontend tasks, but it goes beyond that if you want it. It can upload your changed files to CDN networks, copy files to production environment, optimize images and more. There are inumerous plugins for all these functions and if you can't find one that suits your needs, you can always write your own.

Initialise a Gulp project

To initialise a new Gulp project from your project's directory run

npm init

and follow the instructions. The command will create your package.json file, necessary for any npm project.

name: vuejs-gulp-browserify-deployment
version: 0.0.0
description: Deployment with Vue and Gulp and Browserify
entry point: gulpfile.js
test command: Enter
git repository: https://github.com/HariantoAtWork/vuejs-gulp
keywords: VueJS, LESS, Gulp, Browserify, mdstn.com, mizu.work
author: Harianto van Insulinde
license: CC-BY-4.0
Is this ok? (yes): Enter

{
  "name": "vuejs-laravel-gulp-deployment",
  "version": "0.0.0",
  "description": "Deployment with Vue and Gulp",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/HariantoAtWork/vuejs-laravel-gulp.git"
  },
  "keywords": [
    "VueJS",
    "LESS",
    "Gulp",
    "Browserify",
    "mdstn.com",
    "mizu.work"
  ],
  "author": "Harianto van Insulinde",
  "license": "CC-BY-4.0",
  "bugs": {
    "url": "https://github.com/HariantoAtWork/vuejs-laravel-gulp/issues"
  },
  "homepage": "https://github.com/HariantoAtWork/vuejs-laravel-gulp#readme"
}

npm install --save-dev gulp gulp-less gulp-sass gulp-autoprefixer gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-livereload gulp-notify node-notifier stream-combiner2 babelify partialify browserify vinyl-buffer vinyl-source-stream

Create gulpfile.js

Guide not yet finished…