init

gulpfile.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var gulp = require('gulp'),
+
+  uglify = require('gulp-uglify'),
+  watch = require('gulp-watch'),
+  prefixer = require('gulp-autoprefixer'),
+  cssmin = require('gulp-minify-css'),
+  sass = require('gulp-sass'),
+  sourcemaps = require('gulp-sourcemaps'),
+  imagemin = require('gulp-imagemin'),
+  concatCss = require('gulp-concat-css'),
+  concat = require('gulp-concat'),
+  pngquant = require('imagemin-pngquant'),
+
+  rigger = require('gulp-rigger'),
+  rimraf = require('rimraf'),
+
+  browserSync = require("browser-sync"),
+  reload = browserSync.reload;
+
+var path = {
+  build: {
+    html: 'build/',
+    js: 'build/js/',
+    css: 'build/css/',
+    img: 'build/img/',
+    fonts: 'build/fonts/'
+  },
+  src: {
+    html: 'src/templates/index.html',
+    js: 'src/js/*.js',
+    style: 'src/styles/**/*.*',
+    img: 'src/img/**/*.*',
+    fonts: 'src/fonts/**/*.*'
+  },
+  watch: {
+    html: 'src/templates/*.html',
+    js: 'src/js/*.js',
+    style: 'src/styles/**/*.*',
+    img: 'src/img/**/*.*',
+    fonts: 'src/fonts/**/*.*'
+  },
+  clean: './build'
+};
+var config = {
+  server: {
+    baseDir: "./build/"
+  },
+  tunnel: true,
+  host: 'localhost',
+  port: 7000,
+  logPrefix: "boshConfigurator"
+};
+
+gulp.task('html:build', function () {
+  gulp.src(path.src.html)
+    .pipe(rigger())
+    .pipe(gulp.dest(path.build.html))
+    .pipe(reload({stream: true}));
+});
+gulp.task('js:build', function () {
+  gulp.src(path.src.js)
+    .pipe(rigger())
+    .pipe(sourcemaps.init())
+    .pipe(concat("main.js"))
+    .pipe(uglify())
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(path.build.js))
+    .pipe(reload({stream: true}));
+});
+gulp.task('style:build', function () {
+  gulp.src(path.src.style)
+    .pipe(sourcemaps.init())
+    .pipe(sass.sync().on('error', sass.logError))
+    .pipe(prefixer())
+    .pipe(concatCss("styles.css"))
+    .pipe(cssmin())
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(path.build.css))
+    .pipe(reload({stream: true}));
+});
+gulp.task('image:build', function () {
+  gulp.src(path.src.img)
+    .pipe(imagemin({
+      progressive: true,
+      svgoPlugins: [{removeViewBox: false}],
+      use: [pngquant()],
+      interlaced: true
+    }))
+    .pipe(gulp.dest(path.build.img))
+    .pipe(reload({stream: true}));
+});
+
+gulp.task('fonts:build', function() {
+  gulp.src(path.src.fonts)
+    .pipe(gulp.dest(path.build.fonts))
+});
+gulp.task('build', [
+  'html:build',
+  'js:build',
+  'style:build',
+  'fonts:build',
+  'image:build'
+]);
+gulp.task('watch', function(){
+  watch([path.watch.html], function(event, cb) {
+    gulp.start('html:build');
+  });
+  watch([path.watch.style], function(event, cb) {
+    gulp.start('style:build');
+  });
+  watch([path.watch.js], function(event, cb) {
+    gulp.start('js:build');
+  });
+  watch([path.watch.img], function(event, cb) {
+    gulp.start('image:build');
+  });
+  watch([path.watch.fonts], function(event, cb) {
+    gulp.start('fonts:build');
+  });
+});
+gulp.task('webserver', function () {
+  browserSync(config);
+});
+gulp.task('clean', function (cb) {
+  rimraf(path.clean, cb);
+});
+
+gulp.task('default', ['build', 'webserver', 'watch']);
+
+
+

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "bosh",
+  "version": "1.0.0",
+  "description": "configurator for gulp ",
+  "main": "index.js",
+  "scripts": {
+    "preinstall": "npm install express",
+    "start": "gulp",
+    "build": "gulp build"
+  },
+
+  "author": "php",
+  "license": "ISC",
+  "dependencies": {
+    "autoprefixer": "^6.5.0",
+    "browser-sync": "^2.17.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-concat-css": "^2.3.0",
+    "gulp-imagemin": "^3.0.3",
+    "gulp-sass": "^3.1.0",
+    "gulp-livereload": "^3.8.1",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-rigger": "^0.5.8",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^2.0.0",
+    "gulp-watch": "^4.3.10",
+    "imagemin-pngquant": "^5.0.0",
+    "postcss": "^5.2.4",
+    "postcss-cli": "^2.6.0",
+    "rimraf": "^2.5.4"
+  }
+}

src/js/acconrdeon.js

@@ -0,0 +1,19 @@
+window.onload = function() {
+  var header = document.getElementsByClassName('product-tab__head');
+
+  for( var i=0 ; i < 3; i++) {
+    header[i].addEventListener('click', toogleActive);
+  }
+
+  function toogleActive() {
+    clear();
+    this.parentNode.classList.add('active');
+  }
+
+  function clear() {
+    var top = document.getElementsByClassName('product-tab');
+    for( var i = 0; i < 3; i ++)
+      top[i].classList.remove('active');
+  }
+};
+

src/styles/footer.sass

@@ -0,0 +1,15 @@
+.footer 
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  padding: 15px 39px;
+  color: #000000;
+  &__site 
+    position: relative;
+    &::before 
+      content: '>';
+      position: absolute;
+      left: -15px;    
+  &__bosch 
+    text-align: right;

src/styles/header.sass

@@ -0,0 +1,10 @@
+.header 
+  &__line 
+    width: 100%;
+    display: block;
+    height: 15px;
+  &__container 
+    height: 80px;
+  &__logo 
+    float: right;
+    margin: 29px 30px;

src/styles/main.sass

@@ -0,0 +1,15 @@
+.main 
+  background-image: url(../img/bg.jpg);
+  background-size: cover;
+  background-position: top center;
+  background-repeat: no-repeat;
+  height: 100%;
+  padding: 0 40px;
+  &__title 
+    margin: 20px 0;
+    font-size: 28px;
+  &__description 
+    padding: 10px 0;
+  &__container 
+    display: flex;
+

src/styles/reset.sass

@@ -0,0 +1,48 @@
+@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,700&subset=cyrillic';
+
+html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5,
+h6, p, blockquote, pre,a, abbr, acronym, address, big,
+cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small,
+strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt,
+dd, ol, ul, li,fieldset, form, label, legend,table, caption,
+tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,
+embed, figure, figcaption, footer, header, hgroup, menu, nav,
+output, ruby, section, summary, time, mark, audio, video 
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline
+body, html 
+  height: 100%;
+html 
+  box-sizing: border-box;
+*, *:before, *:after 
+  box-sizing: inherit;
+body 
+  font: normal 14px/140% Roboto, Helvetica, Arial, Tahoma, sans-serif;
+img,fieldset, a img 
+  border: none;
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="password"],
+input[name="cardNumber"],
+textarea 
+  -webkit-appearance: none;
+  border-radius: 0;
+
+textarea 
+  overflow: auto;
+
+input, button 
+  margin: 0;
+  padding: 0;
+  border: 0;
+input[type="submit"], button 
+  cursor: pointer
+
+div, input, textarea, select,button,
+h1,h2,h3,h4,h5,h6,a,span,a:focus 
+  outline: none;
+

src/templates/footer.html

@@ -0,0 +1,6 @@
+<div class="footer">
+    <div class="footer__site">
+        <span>zur Bosch Website</span>
+    </div>
+    <div class="footer__bosch">© Robert Bosch Hausgeräte GmbH</div>
+</div>

src/templates/header.html

@@ -0,0 +1,6 @@
+<div class="header">
+    <img src="./img/header-top.png" class="header__line" alt="">
+    <div class="header__container">
+        <img src="./img/bosh.png" class="header__logo" alt="">
+    </div>
+</div>

src/templates/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <link lang="de">
+    <title>Bosсh</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="./css/styles.css">
+    <script src="./js/main.js"></script>
+
+</head>
+<body>
+    //= header.html
+    <main>
+        <section class="menu">
+            <nav class="menu__categories">
+                <ul></ul>
+            </nav>
+            <nav class="menu__sub-categories">
+
+            </nav>
+        </section>
+    </main>
+
+    <div id="category-tpl" hidden>
+        <li class="menu__categories-item">
+            <a href="#">
+                <span class="menu__categories-name"></span>
+                <span class="menu__categories-marker"></span>
+            </a>
+        </li>
+    </div>
+
+    <div id="sub-category-tpl" hidden>
+        <li>
+            <a href="#"></a>
+        </li>
+    </div>
+    //= footer.html
+</body>
+</html>

src/templates/main.html

@@ -0,0 +1,8 @@
+<div class="main">
+    <h1 class="main__title">Einfach zur perfekten Waschmaschine.</h1>
+    <p class="main__description">Entdecken Sie die vielfältigen Auswahlmöglichkeiten und konfigu</p>
+    <div class="main__container">
+        //= configurator.html
+        //= content.html
+    </div>
+</div>