Start Project

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "app/components/"
+}

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+trim_trailing_whitespace = true
+indent_style = tab
+end_of_line = lf
+insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+app/build.css
+app/build.js
+app/*.html
+app/components
+node_modules/
+.idea

bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "graduation-project-loftschool",
+  "description": "",
+  "main": "app/",
+  "authors": [
+    "Andrey Chechkin"
+  ],
+  "license": "ISC",
+  "homepage": "https://github.com/Sky161/test-loftschool",
+  "moduleType": [
+    "globals"
+  ],
+  "dependencies": {
+    "bootstrap-sass": "^3.3.7"
+  }
+}

browserify-shim.json

@@ -0,0 +1,13 @@
+{
+	"jquery": {
+		"path": "./app/components/jquery/dist/jquery.min.js",
+		"exports": "$"
+	},
+	"bootstrap": {
+		"path": "./app/components/bootstrap-sass/assets/javascripts/bootstrap.min.js",
+		"exports": null,
+		"depends": {
+			"jquery": "$"
+		}
+	}
+}

gulpfile.js

@@ -0,0 +1,66 @@
+'use strict';
+var gulp = require('gulp');
+var browserify = require('gulp-browserify');
+var plumber = require('gulp-plumber');
+var rename = require('gulp-rename');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var browserSync = require('browser-sync').create();
+var watch = require('gulp-watch');
+var jade = require('gulp-jade');
+
+var tplPath = './';
+
+gulp.task('scripts', function() {
+
+	gulp.src(tplPath + 'scripts/main.js')
+		.pipe(browserify({
+			shim: require("./browserify-shim.json")
+		}))
+		.pipe(plumber())
+		.pipe(rename("build.js"))
+		.pipe(gulp.dest(tplPath +'/app/'))
+});
+
+gulp.task('jade', function () {
+	gulp.src(tplPath + '/jade/*.jade')
+		.pipe(plumber())
+		.pipe(jade({pretty: true}))
+		.pipe(gulp.dest(tplPath + './app/'))
+		.pipe(browserSync.stream());
+});
+
+gulp.task('sass', function () {
+	gulp.src(tplPath + '/sass/**/*.sass')
+		.pipe(plumber())
+		.pipe(sass().on('error', sass.logError))
+		.pipe(rename('build.css'))
+		.pipe(autoprefixer('last 10 versions', '> 1%', 'ie 9'))
+		.pipe(gulp.dest(tplPath + '/app/'))
+		.pipe(browserSync.stream());
+});
+
+gulp.task('server', function(){
+	browserSync.init({
+		server: {
+			baseDir: "./app"
+		}
+	});
+});
+
+gulp.task('watch', ['jade', 'sass', 'scripts', 'server'], function () {
+	watch(tplPath + '/scripts/**/*.js', function(){
+		gulp.start("scripts");
+		browserSync.reload();
+	});
+	watch(tplPath + '/jade/**/*.jade', function(){
+		gulp.start("jade");
+		browserSync.reload();
+	});
+	watch(tplPath + '/sass/**/*.sass', function(){
+		gulp.start("sass");
+		browserSync.reload();
+	});
+});
+
+gulp.task('default', ['jade', 'sass', 'scripts']);

jade/index.jade

@@ -0,0 +1,14 @@
+doctype html
+html(lang='ru')
+	head
+		meta(charset='utf-8')
+		meta(http-equiv='X-UA-Compatible', content='IE=edge')
+		meta(name='viewport', content='width=device-width, initial-scale=1')
+		title Другофильтр VK
+		link(rel="stylesheet", href="build.css")
+		script(src="build.js")
+	body
+		header
+		main.content
+			h1 Hello, world!
+		footer

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "graduation-project-loftschool",
+  "version": "1.0.0",
+  "description": "This if graduation project for online education Loftschool",
+  "main": "gulpfile.js",
+  "devDependencies": {
+    "bower": "^1.7.9",
+    "browser-sync": "^2.10.1",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-browserify": "^0.5.1",
+    "gulp-jade": "^1.1.0",
+    "gulp-plumber": "^1.0.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.2",
+    "gulp-watch": "^4.3.9"
+  },
+  "scripts": {
+    "postinstall": "bower i && gulp"
+  },
+  "author": "Andrey Chechkin",
+  "license": "ISC"
+}

sass/_mixins.sass

@@ -0,0 +1,49 @@
+/*
+ * Varibles from styles
+ *
+ * @author Andrey Chechkin
+ * @license GNU/AGPLv3
+ * @see {@link https://www.gnu.org/licenses/agpl-3.0.txt|License}
+ */
+
+@import "variables"
+
+=fontAdd($name, $path)
+	@font-face
+		font-family: $name
+		src: url('#{$fontsPrefix}#{$path}.eot')
+		src: url('#{$fontsPrefix}#{$path}.eot?#iefix') format('embedded-opentype'),
+		url('#{$fontsPrefix}#{$path}.woff') format('woff'),
+		url('#{$fontsPrefix}#{$path}.ttf') format('truetype')
+		font-weight: normal
+		font-style: normal
+
+=linearGradient($top, $bottom)
+	background: $top; /* Old browsers */
+	background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
+
+=bg($path, $addit)
+	background: url('#{$imgPrefix}#{$path}') $addit
+
+=sizeMixin($item)
+	width: $item
+	height: $item
+
+=transitionMixin($item)
+	transition: $item $transition-type $transition-speed
+
+=resetCss
+	margin: 0
+	padding: 0
+
+=absolute($top:auto, $right:auto, $bottom:auto, $left:auto)
+	position: absolute
+	top: $top
+	right: $right
+	bottom: $bottom
+	left: $left

sass/_variables.sass

@@ -0,0 +1,19 @@
+/*
+ * Varibles from styles
+ *
+ * @author Andrey Chechkin
+ * @license GNU/AGPLv3
+ * @see {@link https://www.gnu.org/licenses/agpl-3.0.txt|License}
+ */
+
+// paths
+$tplPath: './'
+$imgPrefix: '#{$tplPath}img/'
+$fontsPrefix: '#{$tplPath}fonts/'
+
+//devices
+$medium: 1280px
+$small: 980px
+
+$transition-speed: 0.4s
+$transition-type: linear

sass/main.sass

@@ -0,0 +1,18 @@
+/*
+ * Styles
+ *
+ * @author Andrey Chechkin
+ * @license GNU/AGPLv3
+ * @see {@link https://www.gnu.org/licenses/agpl-3.0.txt|License}
+ */
+
+@import "./variables"
+@import "./mixins"
+@import "../app/components/bootstrap-sass/assets/stylesheets/bootstrap"
+
+html
+  width: 100%
+  min-height: 100%
+
+  *
+    box-sizing: border-box

scripts/main.js

@@ -0,0 +1,17 @@
+/*
+* Main file js
+*
+* @author Andrey Chechkin
+* @license GNU/AGPLv3
+* @see {@link https://www.gnu.org/licenses/agpl-3.0.txt|License}
+*/
+"use strict";
+
+require("jquery");
+var bootstrap = require("bootstrap");
+
+document.addEventListener("DOMContentLoaded", () => {
+	bootstrap;
+
+	console.log("Load");
+});