diff --git a/content/css/gvial.css b/content/css/gvial.css
diff --git a/content/css/mq/mediaqueries.scss b/content/css/mq/mediaqueries.scss
diff --git a/content/js/gvial.js b/content/js/gvial.js
@@ -0,0 +1,142 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+class Navigation {
+    constructor(opts) {
+        opts = {
+            open: '#main-icon .burger-icon',
+            close: '#main-icon .close-icon',
+            css: 'is-menu-opened'
+        };
+
+        this.opts = opts;
+        this.init();
+    }
+
+    init() {
+
+        this.el = {
+            open: document.querySelector(this.opts.open),
+            close: document.querySelector(this.opts.close),
+        };
+
+        setTimeout(() => {
+            this.el.open.addEventListener('click', () => {
+                this.onClick();
+            });
+            this.el.close.addEventListener('click', () => {
+                this.onClick();
+            });
+            document.getElementById('primary-navigation').addEventListener('click', (e) => {
+                if (document.body.classList.contains('is-menu-opened') == false) {
+                    return false;
+                }
+                if (e.target.id == "primary-navigation"){
+                    this.onClick();
+                }
+            });
+        }, 100);
+    }
+
+    onClick() {
+        document.body.classList.toggle(this.opts.css);
+    }
+}
+/* harmony export (immutable) */ __webpack_exports__["a"] = Navigation;
+
+
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modules_Navigation__ = __webpack_require__(0);
+//import LazyLoad from 'vanilla-lazyload';
+
+
+new __WEBPACK_IMPORTED_MODULE_0__modules_Navigation__["a" /* default */]();
+/*
+let myLazyLoad = new LazyLoad({
+  // example of options object -> see options section
+  container: document.getElementById('scrollPane'),
+  elements_selector: ".lzl",
+  data_src: "src",
+  data_srcset: "srcset",
+});
+*/
+
+/***/ })
+/******/ ]);
diff --git a/content/js/index.js → content/js6/index.js b/content/js/index.js → content/js6/index.js
diff --git a/content/js/modules/Navigation.js → content/js6/modules/Navigation.js b/content/js/modules/Navigation.js → content/js6/modules/Navigation.js
diff --git a/content/css/gridlex-vars.scss → content/scss/_gridlex-vars.scss b/content/css/gridlex-vars.scss → content/scss/_gridlex-vars.scss
diff --git a/content/css/gridlex.scss → content/scss/_gridlex.scss b/content/css/gridlex.scss → content/scss/_gridlex.scss
@@ -3,7 +3,7 @@
     Just a Flexbox Grid System
 ========================================================================== */
 
-@import "gridlex-vars";
+@import "_gridlex-vars";
 
 [class*="#{$gl-gridName}"]{
   box-sizing: border-box;

diff --git a/content/css/helpers.scss → content/scss/_helpers.scss b/content/css/helpers.scss → content/scss/_helpers.scss
diff --git a/content/css/normalize.scss → content/scss/_normalize.scss b/content/css/normalize.scss → content/scss/_normalize.scss
diff --git a/content/css/vars.scss → content/scss/_vars.scss b/content/css/vars.scss → content/scss/_vars.scss
diff --git a/content/css/gvial.scss → content/scss/gvial.scss b/content/css/gvial.scss → content/scss/gvial.scss
@@ -1,7 +1,7 @@
-@import "vars";
-@import "normalize";
-@import "gridlex";
-@import "helpers";
+@import "_vars";
+@import "_normalize";
+@import "_gridlex";
+@import "_helpers";
 
 @font-face {
   font-family: 'Roboto Bold';
@@ -91,13 +91,13 @@ body {
 
 
 
-@import "widgets/header";
-@import "widgets/solidity";
-@import "widgets/products-services";
-@import "widgets/factors";
-@import "widgets/small-shit";
+@import "widgets/_header";
+@import "widgets/_solidity";
+@import "widgets/_products-services";
+@import "widgets/_factors";
+@import "widgets/_small-shit";
 
-@import "widgets/main-icon";
+@import "widgets/_main-icon";
 
-@import "mq/mediaqueries";
+@import "mq/_mediaqueries";
 
diff --git a/content/scss/mq/_mediaqueries.scss b/content/scss/mq/_mediaqueries.scss
@@ -0,0 +1,4 @@
+@import "_up-1170";
+@import "_up-970";
+@import "_up-750";
+
diff --git a/content/css/mq/up-1170.scss → content/scss/mq/_up-1170.scss b/content/css/mq/up-1170.scss → content/scss/mq/_up-1170.scss
@@ -1,5 +1,5 @@
-@import "../vars";
-@import "../gridlex-vars";
+@import "../_vars";
+@import "../_gridlex-vars";
 
 @media #{$gl-md}{
 

diff --git a/content/css/mq/up-750.scss → content/scss/mq/_up-750.scss b/content/css/mq/up-750.scss → content/scss/mq/_up-750.scss
@@ -1,5 +1,5 @@
-@import "../vars";
-@import "../gridlex-vars";
+@import "../_vars";
+@import "../_gridlex-vars";
 
 @media #{$gl-xs}{
   .main-wrapper {

diff --git a/content/css/mq/up-970.scss → content/scss/mq/_up-970.scss b/content/css/mq/up-970.scss → content/scss/mq/_up-970.scss
@@ -1,5 +1,5 @@
-@import "../vars";
-@import "../gridlex-vars";
+@import "../_vars";
+@import "../_gridlex-vars";
 
 
 @media #{$gl-sm}{

diff --git a/content/css/widgets/factors.scss → content/scss/widgets/_factors.scss b/content/css/widgets/factors.scss → content/scss/widgets/_factors.scss
@@ -1,4 +1,4 @@
-@import "../vars";
+@import "../_vars";
 
 .factors {
 

diff --git a/content/css/widgets/header.scss → content/scss/widgets/_header.scss b/content/css/widgets/header.scss → content/scss/widgets/_header.scss
@@ -1,4 +1,4 @@
-@import "../vars";
+@import "../_vars";
 
 #header {
   > .main-wrapper {

diff --git a/content/css/widgets/main-icon.scss → content/scss/widgets/_main-icon.scss b/content/css/widgets/main-icon.scss → content/scss/widgets/_main-icon.scss
@@ -1,4 +1,4 @@
-@import '../vars';
+@import '../_vars';
 
 //Animation
 $midTime: .3s;

diff --git a/content/css/widgets/products-services.scss → content/scss/widgets/_products-services.scss b/content/css/widgets/products-services.scss → content/scss/widgets/_products-services.scss
@@ -1,4 +1,4 @@
-@import "../vars";
+@import "../_vars";
 
 .products-services {
   figcaption {

diff --git a/content/css/widgets/small-shit.scss → content/scss/widgets/_small-shit.scss b/content/css/widgets/small-shit.scss → content/scss/widgets/_small-shit.scss
@@ -1,4 +1,4 @@
-@import "../vars";
+@import "../_vars";
 
 .our-company {
   background: #D9E3EA;

diff --git a/content/css/widgets/solidity.scss → content/scss/widgets/_solidity.scss b/content/css/widgets/solidity.scss → content/scss/widgets/_solidity.scss
@@ -1,4 +1,4 @@
-@import "../vars";
+@import "../_vars";
 
 .solidity {
   position: relative;

diff --git a/layouts/main-parts/head.haml b/layouts/main-parts/head.haml
@@ -16,10 +16,4 @@
 %meta{:content => "width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no", :name => "viewport"}
 %meta{:content => "on", "http-equiv" => "cleartype"}
 
-- if @config[:environment] == 'prod'
-
-  %link{:href => relative_path_to("/css/gvial-#{@config[:hexa]}-min.css"), :rel => "stylesheet", :type=>"text/css"}
-
-- else
-
-  %link{:href => relative_path_to("/css/gvial.css"), :rel => "stylesheet", :type=>"text/css"}
+%link{:href => relative_path_to(get_hash('/css/gvial.css')), :rel => "stylesheet", :type=>"text/css"}
diff --git a/layouts/main-parts/scripts.haml b/layouts/main-parts/scripts.haml
@@ -1,11 +1,10 @@
-- if (@config[:environment] == 'prod')
-  :javascript
-    var js = document.createElement('script'), s = document.getElementsByTagName('script')[0],
-        className = document.getElementsByTagName("HTML")[0].className;
-    js.type = 'text/javascript'; js.async = true;
-    js.src = 'js/gvial-#{@config[:hexa]}-min.js';
-    s.parentNode.insertBefore(js, s);
+- js = relative_path_to(get_hash('/js/gvial.js'))
+
+:javascript
+  var js = document.createElement('script'), s = document.getElementsByTagName('script')[0],
+      className = document.getElementsByTagName("HTML")[0].className;
+  js.type = 'text/javascript'; js.async = true;
+  js.src = '#{js}';
+  s.parentNode.insertBefore(js, s);
 
-- if @config[:environment] == 'dev'
-  %script{:src=>relative_path_to("/js/gvial.js"), :type=>"text/javascript"}
 
diff --git a/lib/default.rb b/lib/default.rb
@@ -1,5 +1,20 @@
 # All files in the 'lib' directory will be loaded
 # before nanoc starts compiling.
 
+require 'json'
+
+def get_hash(file)
+
+  tmp = File.read('output/manifest.json')
+  data_hash = JSON.parse(tmp)
+
+  data_hash.each do |child|
+    if (child["path"] == file)
+      return child["hashedPath"]
+    end
+  end
+
+end
+
 include Nanoc::Helpers::Rendering
 include Nanoc::Helpers::LinkTo
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,38 @@
+{
+    "/css/gvial.css": {
+        "path": "/css/gvial-9ed89c595d9d48bfb16fa1ab4d92a9ae.css"
+    },
+    "/fonts/roboto-bold.eot": {
+        "path": "/fonts/roboto-bold-17a4e9efbe54db9ad97a8db633465bcd.eot"
+    },
+    "/fonts/roboto-bold.svg": {
+        "path": "/fonts/roboto-bold-6d70cc4876991ad55d0d491f98471b64.svg"
+    },
+    "/fonts/roboto-bold.ttf": {
+        "path": "/fonts/roboto-bold-54d913e4b50152e1bb8ecbdf4d83d0a7.ttf"
+    },
+    "/fonts/roboto-bold.woff": {
+        "path": "/fonts/roboto-bold-dca94153062209347f7e5582284dcd53.woff"
+    },
+    "/fonts/roboto-light.eot": {
+        "path": "/fonts/roboto-light-5177b32d9ddfe1f9a0ff1fc6555a7356.eot"
+    },
+    "/fonts/roboto-light.svg": {
+        "path": "/fonts/roboto-light-855ddcc36fa81e9a7707991205b415b0.svg"
+    },
+    "/fonts/roboto-light.ttf": {
+        "path": "/fonts/roboto-light-79124a9c41d05e72545131ab60db6804.ttf"
+    },
+    "/fonts/roboto-light.woff": {
+        "path": "/fonts/roboto-light-5c817cc46f3148e857335805f1502535.woff"
+    },
+    "/images/logo-gvial.svg": {
+        "path": "/images/logo-gvial-c04ae046f173430aaf90309597bd7f09.svg"
+    },
+    "/images/logo-white.png": {
+        "path": "/images/logo-white-db3844bba9b94741e37d649732cc6ba5.png",
+        "type": "png",
+        "height": 51,
+        "width": 57
+    }
+}
diff --git a/package.json b/package.json
@@ -4,7 +4,22 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack"
+    "clean": "rm -rf  output/ && mkdir output/",
+    "autoprefixer": "postcss -u autoprefixer -r content/css/*",
+    "scss": "node-sass -o content/css/ content/scss/ --source-maps --source-map-contents --precision 2",
+    "stylelint:prod": "stylelint \"dist/css/*\" --config stylelint-prod.json",
+    "stylelint:dev": "stylelint \"scss/**/*.scss\" --syntax scss --config stylelint-dev.json ",
+    "lint": "eslint js",
+    "hashly:js": "hashly content/js/ output/ --base-dir /work/www/mateclass/gvial/content/ --manifest-format \"json\" --rename-format \"{basename}-{hash}{extname}\" --verbose --amend",
+    "hashly:css": "hashly content/css/ output/ --base-dir /work/www/mateclass/gvial/content/ --manifest-format \"json\" --rename-format \"{basename}-{hash}{extname}\" --verbose --amend",
+    "webpack": "webpack",
+    "build:js": "npm run webpack && npm run hashly:js",
+    "watch:js": "nodemon --watch js6/ -x \"npm run build:js\"",
+    "build:css": "npm run scss  && npm run hashly:css",
+    "watch:css": "nodemon -e scss -x \"npm run build:css\"",
+    "build:all": "npm run clean && npm run build:css && npm run build:js",
+    "watch:all": "parallelshell \"npm run watch:css\" \"npm run watch:js\"",
+    "postinstall": "npm run build:all"
   },
   "keywords": [],
   "author": "",
@@ -13,9 +28,15 @@
     "vanilla-lazyload": "^4.0.3"
   },
   "devDependencies": {
+    "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.22.0",
+    "hashly": "^0.5.0",
+    "node-sass": "^4.5.0",
+    "nodemon": "^1.11.0",
+    "postcss-cli": "^2.6.0",
+    "stylelint": "^7.8.0",
     "webpack": "^2.2.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  entry: './content/js/index.js',
+  entry: './content/js6/index.js',
   module:{
     loaders: [
       {
@@ -13,6 +13,6 @@ module.exports = {
     ]
   },
   output: {
-    filename: './output/js/gvial.js',
+    filename: './content/js/gvial.js',
   }
 };