diff --git a/build-tasks/compile-js.js b/build-tasks/compile-js.js
index 9e5794b..8c9b455 100644
--- a/build-tasks/compile-js.js
+++ b/build-tasks/compile-js.js
@@ -39,13 +39,5 @@ module.exports = () => {
         .pipe(uglifyJs())
         .pipe(gulp.dest(path.join('dist', 'js')));
 
-    const init = browserify(path.join('src', 'js', 'init.js'), {
-            debug: false
-        })
-        .bundle()
-        .pipe(source('init.js'))
-        .pipe(buffer())
-        .pipe(gulp.dest(path.join('dist', 'js')));
-
-    return merge(debug, production, min, init);
+    return merge(debug, production, min);
 };
diff --git a/src/js/init.js b/examples/basic/app.js
similarity index 91%
rename from src/js/init.js
rename to examples/basic/app.js
index 96d8c25..0b7cadc 100644
--- a/src/js/init.js
+++ b/examples/basic/app.js
@@ -1,8 +1,5 @@
 'use strict';
 
-var config = require('./includes/config');
-var util = require('./includes/util');
-
 /**
  * This is just an example usage of the image editor. Also this is used for testing.
  * This code can be pretty messy, but that is fine because nothing of this will come to
@@ -33,6 +30,10 @@ var util = require('./includes/util');
     widthInCm = $input.w.val();
     heightInCm = $input.h.val();
 
+    function isFullscreen() {
+        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+    }
+
     function getOptimalDimension(values, currentDimension, ratio) {
         if (currentDimension === 'h') {
             values.width = Math.round(values.height * ratio);
@@ -90,14 +91,14 @@ var util = require('./includes/util');
 
     function handleResize() {
         var width = $wrapper.width();
-        var height = util.isFullscreen() ? $window.height() : $wrapper.height();
+        var height = isFullscreen() ? $window.height() : $wrapper.height();
         editor.canvas.resize({width: width, height: height});
     }
 
     function getWrapperData() {
         var $navbar = $('.image-editor__navbar');
-        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
-        var isMobile = $window.width() <= config.screenSizes.mobile.max;
+        var isFullScreen = isFullscreen();
+        var isMobile = $window.width() <= 767;
         var windowHeight = window.innerHeight ? window.innerHeight : $window.height();
         var windowWidth = window.innerWidth ? window.innerWidth : $window.width();
 
@@ -154,7 +155,7 @@ var util = require('./includes/util');
     function init() {
 
         editor = new ImageEditor('canvas-editor', {
-                type: 'canvas',
+                type: 'wallpaper',
                 buttons: {
                     showThreeD: '3d',
                     hideThreeD: 'Flat',
@@ -163,7 +164,7 @@ var util = require('./includes/util');
                     showRulers: 'show-rulers',
                     hideRulers: 'hide-rulers',
                     showFullscreen: 'show-fullscreen',
-                    hideFullscreen: 'exit-fullscreen',
+                    exitFullscreen: 'exit-fullscreen',
                 },
                 dimensions: getWrapperData()
             })
diff --git a/fonts/breuertext-medium-webfont.ttf b/examples/basic/fonts/breuertext-medium-webfont.ttf
similarity index 100%
rename from fonts/breuertext-medium-webfont.ttf
rename to examples/basic/fonts/breuertext-medium-webfont.ttf
diff --git a/fonts/breuertext-medium-webfont.woff b/examples/basic/fonts/breuertext-medium-webfont.woff
similarity index 100%
rename from fonts/breuertext-medium-webfont.woff
rename to examples/basic/fonts/breuertext-medium-webfont.woff
diff --git a/fonts/breuertext-regular-webfont.ttf b/examples/basic/fonts/breuertext-regular-webfont.ttf
similarity index 100%
rename from fonts/breuertext-regular-webfont.ttf
rename to examples/basic/fonts/breuertext-regular-webfont.ttf
diff --git a/fonts/breuertext-regular-webfont.woff b/examples/basic/fonts/breuertext-regular-webfont.woff
similarity index 100%
rename from fonts/breuertext-regular-webfont.woff
rename to examples/basic/fonts/breuertext-regular-webfont.woff
diff --git a/index.php b/examples/basic/index.html
similarity index 93%
rename from index.php
rename to examples/basic/index.html
index b0528dd..60fe315 100644
--- a/index.php
+++ b/examples/basic/index.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="stylesheet" href="/main.css?123" />
-    <title>Crop - dev</title>
+    <link rel="stylesheet" href="/examples/basic/style.css" />
 </head>
 <body>
     <div id="container">
@@ -41,6 +40,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
     <script src="/dist/js/main.js"></script>
-    <script src="/dist/js/init.js"></script>
+    <script src="/examples/basic/app.js"></script>
 </body>
 </html>
diff --git a/examples/basic/style.css b/examples/basic/style.css
new file mode 100644
index 0000000..7b3261d
--- /dev/null
+++ b/examples/basic/style.css
@@ -0,0 +1,31 @@
+@font-face {
+   font-family: breuer;
+   font-style: normal;
+   font-weight: normal;
+   src: url('fonts/breuertext-regular-webfont.woff') format('woff'),
+        url('fonts/breuertext-regular-webfont.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: breuerMedium;
+  src: url('fonts/breuertext-medium-webfont.woff') format('woff'),
+       url('fonts/breuertext-medium-webfont.ttf')  format('truetype');
+}
+
+* {
+    font-family: breuer;
+}
+
+#container {
+  background: #fff;
+  text-align:center;
+  margin: 0;
+  width: 100%;
+}
+
+#wrapper {
+    margin: 0 auto;
+    width: 100%;
+    height: 600px;
+}
+
diff --git a/src/js/includes/config.js b/src/js/includes/config.js
index 772848b..63b4b73 100644
--- a/src/js/includes/config.js
+++ b/src/js/includes/config.js
@@ -6,6 +6,5 @@ module.exports = {
     buttonMenu: require('./config/button-menu'),
     rulerHandle: require('./config/ruler-handle'),
     dragHandle: require('./config/drag-handle'),
-    dragBar: require('./config/drag-bar'),
-    screenSizes: require('./config/screen-sizes'),
+    dragBar: require('./config/drag-bar')
 };
diff --git a/src/js/includes/config/screen-sizes.js b/src/js/includes/config/screen-sizes.js
deleted file mode 100644
index 1f6b024..0000000
--- a/src/js/includes/config/screen-sizes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-module.exports = {
-    mobile: {
-        min: 0,
-        max: 767
-    },
-    tablet: {
-        min: 768,
-        max: 983
-    },
-    desktop: {
-        min: 984,
-        max: 1311
-    },
-    hd: {
-        min: 1312,
-        max: 99999
-    }
-};