├── app ├── sass │ ├── helpers │ │ ├── _extends.scss │ │ ├── _global.scss │ │ ├── _media.scss │ │ └── _mixins.scss │ ├── sections │ │ ├── _footer.scss │ │ └── _header.scss │ ├── vendors │ │ ├── _global.scss │ │ └── _bootstrap-grid.scss │ ├── components │ │ ├── _global.scss │ │ └── _variables.scss │ └── main.scss ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── img │ └── favicon │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ ├── apple-touch-icon-72x72.png │ │ └── apple-touch-icon-114x114.png ├── css │ ├── fonts.css │ └── main.css ├── js │ └── common.js ├── _.htaccess └── index.html ├── .bowerrc ├── .gitignore ├── bower.json ├── package.json ├── README.md └── gulpfile.js /app/sass/helpers/_extends.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/sass/sections/_footer.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/sass/sections/_header.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "app/bower" 3 | } -------------------------------------------------------------------------------- /app/sass/vendors/_global.scss: -------------------------------------------------------------------------------- 1 | @import "bootstrap-grid"; -------------------------------------------------------------------------------- /app/sass/helpers/_global.scss: -------------------------------------------------------------------------------- 1 | @import "mixins"; 2 | @import "extends"; 3 | -------------------------------------------------------------------------------- /app/sass/components/_global.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | //@import "sprite"; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | app/bower 3 | app/sass-cash 4 | app/css 5 | dist 6 | .idea 7 | -------------------------------------------------------------------------------- /app/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /app/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/img/favicon/favicon.ico -------------------------------------------------------------------------------- /app/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /app/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /app/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /app/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /app/img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /app/img/favicon/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/img/favicon/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /app/img/favicon/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YauhenKavalchuk/Starting_template/HEAD/app/img/favicon/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /app/css/fonts.css: -------------------------------------------------------------------------------- 1 | /********************************************* @IMPORT 2 | \*********************************************/ 3 | /********************************************* font-face 4 | \*********************************************/ 5 | /********************************************* FONTS 6 | \*********************************************/ 7 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "start_html", 3 | "version": "2.0.0", 4 | "authors": [ 5 | "Just_Jack " 6 | ], 7 | "dependencies": { 8 | "font-awesome": "^4.6.3", 9 | "jquery": "^2.1.4", 10 | "waypoints": "^4.0.0", 11 | "normalize-css": "normalize.css#^3.0.3", 12 | "matchHeight": "^0.6.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "start_html", 3 | "version": "2.0.0", 4 | "description": "", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "devDependencies": { 10 | "browser-sync": "^2.10.0", 11 | "gulp": "^3.9.0", 12 | "gulp-autoprefixer": "^3.1.0", 13 | "gulp-clean": "^0.3.1", 14 | "gulp-if": "^2.0.0", 15 | "gulp-imagemin": "^2.4.0", 16 | "gulp-minify-css": "^1.2.1", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-sass": "^2.0.4", 19 | "gulp-uglify": "^1.4.2", 20 | "gulp-useref": "^2.0.1", 21 | "gulp.spritesmith": "^6.2.1", 22 | "imagemin-pngquant": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/js/common.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | //Цели для Яндекс.Метрики и Google Analytics 4 | $(".count_element").on("click", (function() { 5 | ga("send", "event", "goal", "goal"); 6 | yaCounterXXXXXXXX.reachGoal("goal"); 7 | return true; 8 | })); 9 | 10 | //jquery.matchHeight.js 11 | //Docs: https://github.com/liabru/jquery-match-height 12 | $('element').matchHeight(); 13 | 14 | //AJAX forms send 15 | //Docs: http://api.jquery.com/jquery.ajax/ 16 | $("form").submit(function() { 17 | $.ajax({ 18 | type: "GET", 19 | url: "mail.php", 20 | data: $("form").serialize() 21 | }).done(function() { 22 | alert("Спасибо за заявку!"); 23 | setTimeout(function() { 24 | $.fancybox.close(); 25 | }, 1000); 26 | }); 27 | return false; 28 | }); 29 | 30 | }); 31 | -------------------------------------------------------------------------------- /app/sass/components/_variables.scss: -------------------------------------------------------------------------------- 1 | /*********************************************/ 2 | /*COLORS*/ 3 | /*********************************************/ 4 | 5 | /*********************************************/ 6 | /*FONTS*/ 7 | /*********************************************/ 8 | 9 | /*********************************************/ 10 | /*SIZES*/ 11 | /*********************************************/ 12 | $small-phone-max-width: 14.938em; // 239px 13 | $small-phone: 15em; // 240px 14 | 15 | $phone-max-width: 19.938em; // 319px 16 | $phone: 20em; // 320px 17 | 18 | $phone-landscape-max-width: 29.9375em; // 479px 19 | $phone-landscape: 30em; // 480px 20 | 21 | $small-tablet-max-width: 35.4375em; // 567px 22 | $small-tablet: 35.5em; // 568px 23 | 24 | $tablet-max-width: 47.938em; // 767px 25 | $tablet: 48em; // 768px 26 | 27 | $tablet-landscape-max-width: 61.9375em; // 991px 28 | $tablet-landscape: 62em; // 992px 29 | 30 | $desktop-max-width: 63.938em; // 1023px 31 | $desktop: 64em; // 1024px 32 | 33 | $site-max-width: 79.9375em; // 1279px 34 | $site: 80em; // 1280px -------------------------------------------------------------------------------- /app/_.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Add correct content-type for fonts 4 | AddType application/vnd.ms-fontobject .eot 5 | AddType application/x-font-ttf .ttf 6 | AddType application/x-font-opentype .otf 7 | AddType application/x-font-woff .woff 8 | AddType image/svg+xml .svg 9 | 10 | # Compress compressible fonts 11 | AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml 12 | 13 | ExpiresActive On 14 | ExpiresDefault "access plus 5 seconds" 15 | 16 | # Cache Images 17 | ExpiresByType image/x-icon "access plus 2592000 seconds" 18 | ExpiresByType image/jpeg "access plus 2592000 seconds" 19 | ExpiresByType image/png "access plus 2592000 seconds" 20 | ExpiresByType image/gif "access plus 2592000 seconds" 21 | ExpiresByType image/svg+xml "access plus 2592000 seconds" 22 | 23 | # Cache Fonts 24 | ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds" 25 | ExpiresByType application/x-font-ttf "access plus 2592000 seconds" 26 | ExpiresByType application/x-font-opentype "access plus 2592000 seconds" 27 | ExpiresByType application/x-font-woff "access plus 2592000 seconds" 28 | ExpiresByType image/svg+xml "access plus 2592000 seconds" 29 | 30 | # Cache other content types (Flash, CSS, JS, HTML, XML) 31 | ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" 32 | ExpiresByType text/css "access plus 604800 seconds" 33 | ExpiresByType text/javascript "access plus 2592000 seconds" 34 | ExpiresByType application/javascript "access plus 2592000 seconds" 35 | ExpiresByType application/x-javascript "access plus 2592000 seconds" 36 | ExpiresByType text/html "access plus 600 seconds" 37 | ExpiresByType application/xhtml+xml "access plus 600 seconds" 38 | 39 | -------------------------------------------------------------------------------- /app/sass/main.scss: -------------------------------------------------------------------------------- 1 | /*********************************************/ 2 | /*@IMPORTS*/ 3 | /*********************************************/ 4 | 5 | @import "vendors/global"; 6 | @import "helpers/global"; 7 | @import "components/global"; 8 | 9 | /*********************************************/ 10 | /*FONTS*/ 11 | /*********************************************/ 12 | 13 | //@include font-face("Arial", "../fonts/Arial/Arial", normal, eot ttf woff woff2); 14 | 15 | /*********************************************/ 16 | /*MAIN STYLES*/ 17 | /*********************************************/ 18 | 19 | body { 20 | font-family: sans-serif; 21 | font-size: 16px; 22 | min-width: 320px; 23 | position: relative; 24 | } 25 | 26 | /*********************************************/ 27 | /*TYPOGRAPHY*/ 28 | /*********************************************/ 29 | 30 | /*********************************************/ 31 | /*STICKY FOOTER*/ 32 | /*********************************************/ 33 | 34 | .body { 35 | display: flex; 36 | min-height: 100vh; 37 | flex-direction: column; 38 | } 39 | 40 | .main { 41 | flex: 1; 42 | } 43 | 44 | /*********************************************/ 45 | /*HEADER*/ 46 | /*********************************************/ 47 | 48 | @import "sections/header"; 49 | 50 | /*********************************************/ 51 | /*SECTIONS*/ 52 | /*********************************************/ 53 | 54 | /*********************************************/ 55 | /*FOOTER*/ 56 | /*********************************************/ 57 | 58 | @import "sections/footer"; 59 | 60 | /*********************************************/ 61 | /*@IMPORT MEDIA*/ 62 | /*********************************************/ 63 | 64 | @import "helpers/media"; 65 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Заголовок 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /app/sass/helpers/_media.scss: -------------------------------------------------------------------------------- 1 | @import "../components/variables"; 2 | /*********************************************/ 3 | /*Desktop First Method*/ 4 | /*********************************************/ 5 | 6 | /* Large Devices, Wide Screens */ 7 | @media only screen and (max-width : $site) { 8 | 9 | } 10 | 11 | 12 | /* Medium Devices, Desktops */ 13 | @media only screen and (max-width : $tablet-landscape) { 14 | 15 | } 16 | 17 | 18 | /* Small Devices, Tablets */ 19 | @media only screen and (max-width : $tablet) { 20 | 21 | } 22 | 23 | 24 | /* Extra Small Devices, Phones */ 25 | @media only screen and (max-width : $phone-landscape) { 26 | 27 | 28 | /*Disable Animation on Mobile Devices*/ 29 | .animated { 30 | /*CSS transitions*/ 31 | -o-transition-property: none !important; 32 | -moz-transition-property: none !important; 33 | -ms-transition-property: none !important; 34 | -webkit-transition-property: none !important; 35 | transition-property: none !important; 36 | /*CSS transforms*/ 37 | -o-transform: none !important; 38 | -moz-transform: none !important; 39 | -ms-transform: none !important; 40 | -webkit-transform: none !important; 41 | transform: none !important; 42 | /*CSS animations*/ 43 | -webkit-animation: none !important; 44 | -moz-animation: none !important; 45 | -o-animation: none !important; 46 | -ms-animation: none !important; 47 | animation: none !important; 48 | } 49 | } 50 | 51 | 52 | /* Custom, iPhone Retina */ 53 | @media only screen and (max-width : $phone) { 54 | 55 | } 56 | 57 | 58 | /*********************************************/ 59 | /*Mobile First Method*/ 60 | /*********************************************/ 61 | 62 | /* Custom, iPhone Retina */ 63 | @media only screen and (min-width : $phone) { 64 | 65 | } 66 | 67 | 68 | /* Extra Small Devices, Phones */ 69 | @media only screen and (min-width : $phone-landscape) { 70 | 71 | } 72 | 73 | 74 | /* Small Devices, Tablets */ 75 | @media only screen and (min-width : $tablet) { 76 | 77 | } 78 | 79 | 80 | /* Medium Devices, Desktops */ 81 | @media only screen and (min-width : $tablet-landscape) { 82 | 83 | } 84 | 85 | 86 | /* Large Devices, Wide Screens */ 87 | @media only screen and (min-width : $site) { 88 | 89 | } 90 | -------------------------------------------------------------------------------- /app/sass/helpers/_mixins.scss: -------------------------------------------------------------------------------- 1 | /*********************************************/ 2 | /*FONT FACE*/ 3 | /*********************************************/ 4 | 5 | // @include font-face(RalewayBold, '../fonts/raleway-bold', normal, normal, eot woff2 woff ttf); 6 | 7 | @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { 8 | $src: null; 9 | 10 | $extmods: ( 11 | eot: "?", 12 | svg: "#" + str-replace($name, " ", "_") 13 | ); 14 | 15 | $formats: ( 16 | otf: "opentype", 17 | ttf: "truetype" 18 | ); 19 | 20 | @each $ext in $exts { 21 | $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); 22 | $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); 23 | $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); 24 | } 25 | 26 | @font-face { 27 | font-family: quote($name); 28 | font-style: $style; 29 | font-weight: $weight; 30 | src: $src; 31 | } 32 | } 33 | 34 | /*********************************************/ 35 | /*TRIANGLES*/ 36 | /*********************************************/ 37 | 38 | // $direction: up, down, left, right 39 | // @include triangle(up, $size: 10px, $color: #222); 40 | 41 | @mixin triangle($direction, $size, $color){ 42 | content: ''; 43 | display: block; 44 | position: absolute; 45 | height: 0; width: 0; 46 | @if ($direction == 'up'){ 47 | border-bottom: $size solid $color; 48 | border-left: 1/2*$size solid transparent; 49 | border-right: 1/2*$size solid transparent; 50 | } 51 | @else if ($direction == 'down'){ 52 | border-top: $size solid $color; 53 | border-left: 1/2*$size solid transparent; 54 | border-right: 1/2*$size solid transparent; 55 | } 56 | @else if ($direction == 'left'){ 57 | border-top: 1/2*$size solid transparent; 58 | border-bottom: 1/2*$size solid transparent; 59 | border-right: $size solid $color; 60 | } 61 | @else if ($direction == 'right'){ 62 | border-top: 1/2*$size solid transparent; 63 | border-bottom: 1/2*$size solid transparent; 64 | border-left: $size solid $color; 65 | } 66 | } 67 | 68 | /*********************************************/ 69 | /*CUT TEXT WITH ELLIPSIS*/ 70 | /*********************************************/ 71 | 72 | // @include text-ellipsis; 73 | 74 | @mixin text-ellipsis { 75 | overflow: hidden; 76 | text-overflow: ellipsis; 77 | white-space: nowrap; 78 | } 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Starting_template 2 | 3 | Starting template is a front-end HTML5/SCSS/JS template. Featuring the latest technologies and impeccable code this download is the ideal starting point for any web project. 4 | 5 | ## Gulp - Start Guide 6 | > **Need to ensure you have everything on your machine:**
7 | >1. Node.js
8 | >2. npm
9 | >3. Bower
10 | 11 | **In root of template, use commands:** 12 | 18 | 19 | ### SASS Partials 20 |

The partials directory is where most of the CSS is constructed. Plan ahead and think how to structure these.

21 | 50 | 51 | ###Automatically sprite generation 52 |

Example of Sprite using

53 | ``` 54 | .selector { 55 | @include sprite($apple-touch-icon); 56 | } 57 | ``` 58 | > **apple-touch-icon** - the name of image 59 | 60 | ###Structuring your projects 61 |

This is a developer preference. There is no official way. Do you want all your pages in partials? Would you rather just add main components and still use style.scss for the bulk of the CSS? Do what's best for you and your project.

62 | 63 | ###Who's behind this? 64 |

Base is proudly made by Evgeny Kovalchuk and is the result of many hours working on projects of all sizes. It is driven by a massive enthusiasm for all things web. 65 |

66 |

Base is constantly updated and modified to ensure it stays on top of the game. If you’ve any suggestions or ideas then don’t hesitate to get in touch.

67 | 68 | ---------- 69 | ###Author's profile in social networks: 70 | | Profile: | Link: | 71 | ----------------- | ---------------------------------------------------------------------------------------- 72 | | LinkedIn: | linkedin.com | 73 | | VK: | vk.com | 74 | | Facebook: | facebook.com | 75 | |Twitter: | twitter.com | 76 | -------------------------------------------------------------------------------- /app/css/main.css: -------------------------------------------------------------------------------- 1 | /********************************************* @IMPORT VARIABLES 2 | \*********************************************/ 3 | /********************************************* COLORS 4 | \*********************************************/ 5 | /********************************************* FONTS 6 | \*********************************************/ 7 | /********************************************* SIZES 8 | \*********************************************/ 9 | /********************************************* @IMPORT BUTTONS 10 | \*********************************************/ 11 | /********************************************* MAIN STYLES 12 | \*********************************************/ 13 | body { 14 | font-family: sans-serif; 15 | font-size: 16px; 16 | min-width: 320px; 17 | position: relative; } 18 | 19 | /********************************************* FOOTER AT THE BOTTOM 20 | \*********************************************/ 21 | html, body { 22 | height: 100%; 23 | margin: 0; 24 | padding: 0; } 25 | 26 | .wrapper { 27 | min-height: 100%; 28 | height: auto !important; 29 | height: 100%; 30 | margin: 0 0 -100px 0; 31 | padding: 0; } 32 | 33 | .footer-push, .footer { 34 | height: 100px; 35 | margin: 0; 36 | padding: 0; } 37 | 38 | /********************************************* @IMPORT HEADER 39 | \*********************************************/ 40 | /********************************************* TYPOGRAPHY 41 | \*********************************************/ 42 | /********************************************* SECTIONS 43 | \*********************************************/ 44 | /********************************************* @IMPORT FOOTER 45 | \*********************************************/ 46 | /********************************************* @IMPORT MEDIA 47 | \*********************************************/ 48 | /********************************************* Desktop First Method 49 | \*********************************************/ 50 | /* Large Devices, Wide Screens */ 51 | /* Medium Devices, Desktops */ 52 | /* Small Devices, Tablets */ 53 | /* Extra Small Devices, Phones */ 54 | @media only screen and (max-width: 480px) { 55 | /*Disable Animation on Mobile Devices*/ 56 | .animated { 57 | /*CSS transitions*/ 58 | transition-property: none !important; 59 | /*CSS transforms*/ 60 | -ms-transform: none !important; 61 | -webkit-transform: none !important; 62 | transform: none !important; 63 | /*CSS animations*/ 64 | -webkit-animation: none !important; 65 | animation: none !important; } } 66 | 67 | /* Custom, iPhone Retina */ 68 | /********************************************* Mobile First Method 69 | \*********************************************/ 70 | /* Custom, iPhone Retina */ 71 | /* Extra Small Devices, Phones */ 72 | /* Small Devices, Tablets */ 73 | /* Medium Devices, Desktops */ 74 | /* Large Devices, Wide Screens */ 75 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*********************************************/ 2 | /*DEPENDENCIES*/ 3 | /*********************************************/ 4 | 5 | var gulp = require("gulp"), // gulp core 6 | sass = require('gulp-sass'), // sass compiler 7 | gulpif = require('gulp-if'), // conditionally run a task 8 | clean = require('gulp-clean'), // removing files and folders 9 | uglify = require('gulp-uglify'), // uglifies the js 10 | rename = require("gulp-rename"), // rename files 11 | useref = require('gulp-useref'), // parse build blocks in HTML files to replace references 12 | minifyCss = require('gulp-minify-css'), // minify the css files 13 | autoprefixer = require('gulp-autoprefixer'), // sets missing browserprefixes 14 | browserSync = require('browser-sync').create(), // inject code to all devices 15 | imagemin = require('gulp-imagemin'), // minify images 16 | pngquant = require('imagemin-pngquant'), // minify png-format images 17 | spritesmith = require('gulp.spritesmith'); // create sprites 18 | 19 | /*********************************************/ 20 | /*BROWSERSYNC (LOCAL SERVEVR)*/ 21 | /*********************************************/ 22 | 23 | gulp.task('default', ['watch'], function () { // start server 24 | browserSync.init({ 25 | server: {baseDir: "./app/"} // base dir 26 | }); 27 | }); 28 | 29 | /*********************************************/ 30 | /*WATCHER (WATCHING FILE CHANGES)*/ 31 | /*********************************************/ 32 | 33 | gulp.task('watch', function () { 34 | gulp.watch(['./app/**/*.html'], ['html']); // watching changes in HTML 35 | gulp.watch(['./app/sass/**/*.scss'], ['sass']); // watching changes in SASS 36 | gulp.watch(['./app/js/**/*.js'], ['js']); // watching changes in JS 37 | gulp.watch(['./app/img/sprite/*.*'], ['sprite']); // watching changes in IMAGES 38 | }); 39 | 40 | /*********************************************/ 41 | /*HTML TASKS*/ 42 | /*********************************************/ 43 | 44 | gulp.task('html', function () { 45 | gulp.src('./app/index.html') // get the files 46 | .pipe(gulp.dest('./app/')) // where to put the file 47 | .pipe(browserSync.stream()); // browsersync stream 48 | }); 49 | 50 | /*********************************************/ 51 | /*SASS TASKS*/ 52 | /*********************************************/ 53 | 54 | gulp.task('sass', ['sprite'], function () { 55 | gulp.src('./app/sass/**/*') // get the files 56 | .pipe(sass().on('error', sass.logError)) // add prefixes 57 | .pipe(autoprefixer({ 58 | browsers: ['last 2 versions'], 59 | cascade: true 60 | })) 61 | .pipe(gulp.dest('app/css')) // where to put the file 62 | .pipe(browserSync.stream()); // browsersync stream 63 | }); 64 | 65 | /*********************************************/ 66 | /*JS TASKS*/ 67 | /*********************************************/ 68 | 69 | gulp.task('js', function () { 70 | return gulp.src('./app/js/**/*.js') // get the files 71 | .pipe(browserSync.stream()); // browsersync stream 72 | }); 73 | 74 | /*********************************************/ 75 | /*IMAGES TASKS*/ 76 | /*********************************************/ 77 | 78 | gulp.task('sprite', function(done) { 79 | buildSprite().on('end', done); 80 | }); 81 | 82 | gulp.task('images', ['sprite'], function() { 83 | return gulp.src('./app/img/**/*') // get the files 84 | .pipe(imagemin({ // minify images 85 | progressive: true, 86 | svgoPlugins: [{ 87 | removeViewBox: false 88 | }, { 89 | cleanupIDs: false 90 | }], 91 | use: [pngquant({ // minify png-format images 92 | quality: '50-70', 93 | speed: 4 94 | })], 95 | interlaced: true 96 | })) 97 | .pipe(gulp.dest('dist/img')); // where to put the files 98 | }); 99 | 100 | /*********************************************/ 101 | /*FONTS TASKS*/ 102 | /*********************************************/ 103 | 104 | gulp.task('fonts', function () { 105 | return gulp.src('./app/fonts/**/*') // get the files 106 | .pipe(gulp.dest('dist/fonts')); // where to put the files 107 | }); 108 | 109 | /*********************************************/ 110 | /*LIBS TASKS (PERSONAL DEVELOPER LIBS)*/ 111 | /*********************************************/ 112 | 113 | gulp.task('libs', function () { 114 | return gulp.src('./app/libs/**/*') // get the files 115 | .pipe(gulp.dest('dist/libs')); // where to put the files 116 | }); 117 | 118 | /*********************************************/ 119 | /*EXTRASS TASKS (ROOT FILES, EXCEPT HTML)*/ 120 | /*********************************************/ 121 | 122 | gulp.task('extrass', function () { 123 | return gulp.src([ // get the files 124 | 'app/*.*', 125 | '!app/*.html' // except '.html' 126 | ]).pipe(gulp.dest('dist')); // where to put the files 127 | }); 128 | 129 | /*********************************************/ 130 | /*BUILD TASKS*/ 131 | /*********************************************/ 132 | 133 | gulp.task('clean', function () { 134 | return gulp.src('dist', {read: false}) 135 | .pipe(clean()); // clean dir 136 | }); 137 | 138 | gulp.task('build', ['clean'], function () { 139 | gulp.start('images'); // images task 140 | gulp.start('fonts'); // fonts task 141 | gulp.start('libs'); // libs task 142 | gulp.start('extrass'); // extras task 143 | var assets = useref.assets(); 144 | return gulp.src('app/*.html') 145 | .pipe(assets) 146 | .pipe(gulpif('*.js', uglify())) // uglify js-files 147 | .pipe(gulpif('*.css', minifyCss())) // minify css-files 148 | .pipe(assets.restore()) 149 | .pipe(useref()) 150 | .pipe(gulp.dest('./dist')); // where to put the files 151 | }); 152 | 153 | /*********************************************/ 154 | /*FUNCTIONS*/ 155 | /*********************************************/ 156 | 157 | function buildSprite() { 158 | var spriteData = gulp.src('./app/img/sprite/*.*') 159 | .pipe(spritesmith({ 160 | imgName: '../img/sprite.png', 161 | cssName: '_sprite.scss', 162 | cssFormat: 'scss', 163 | padding: 5 164 | })); 165 | 166 | spriteData.img.pipe(gulp.dest('./app/img')); 167 | return spriteData.css.pipe(gulp.dest('./app/sass/components')); 168 | } 169 | -------------------------------------------------------------------------------- /app/sass/vendors/_bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important;visibility:hidden !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}} --------------------------------------------------------------------------------