├── .editorconfig ├── .gitattributes ├── .gitignore ├── .prettierrc ├── .stylelintrc ├── LICENSE.md ├── README.md ├── gulpfile.js ├── package.json └── src ├── img ├── prod │ └── .gitkeep └── sample │ └── .gitkeep ├── js ├── app.js ├── base │ └── .gitkeep ├── components │ └── .gitkeep ├── layout │ └── .gitkeep ├── pages │ └── _index.js └── vendors │ ├── bootstrap.js │ ├── color-switcher.js │ └── jquery.js ├── pug ├── base │ ├── _mixins.pug │ ├── _variables.pug │ ├── mixins │ │ ├── _comment.pug │ │ ├── _image.pug │ │ ├── _space.pug │ │ └── _suffix.pug │ └── variables │ │ ├── _global.pug │ │ └── _page.pug ├── components │ └── .gitkeep ├── index.pug ├── layouts │ └── default.pug └── partials │ ├── _footer.pug │ ├── _header.pug │ ├── _sidebar.pug │ └── includes │ ├── _icons.pug │ ├── _meta-tags.pug │ ├── _scripts.pug │ └── _styles.pug └── sass ├── _base.scss ├── _components.scss ├── _layouts.scss ├── _pages.scss ├── app.scss ├── base ├── _global.scss ├── _mixins.scss ├── _variables.scss ├── global │ ├── _fonts.scss │ ├── _normalize.scss │ └── _reset.scss ├── mixins │ ├── _bem.scss │ ├── _colors.scss │ ├── _fonts.scss │ └── _media-queries.scss └── variables │ └── _colors.scss ├── components └── .gitkeep ├── layouts └── _default.scss ├── pages └── .gitkeep ├── partials ├── _footer.scss ├── _header.scss └── _sidebar.scss ├── themes ├── blue.scss ├── green.scss └── red.scss └── vendors ├── bootstrap-grid.scss ├── bootstrap.scss ├── bootstrap ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _code.scss ├── _custom-forms.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _images.scss ├── _input-group.scss ├── _jumbotron.scss ├── _list-group.scss ├── _media.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _popover.scss ├── _print.scss ├── _progress.scss ├── _reboot.scss ├── _root.scss ├── _spinners.scss ├── _tables.scss ├── _toasts.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables.scss ├── mixins │ ├── _alert.scss │ ├── _background-variant.scss │ ├── _badge.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _caret.scss │ ├── _clearfix.scss │ ├── _float.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _grid-framework.scss │ ├── _grid.scss │ ├── _hover.scss │ ├── _image.scss │ ├── _list-group.scss │ ├── _lists.scss │ ├── _nav-divider.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _screen-reader.scss │ ├── _size.scss │ ├── _table-row.scss │ ├── _text-emphasis.scss │ ├── _text-hide.scss │ ├── _text-truncate.scss │ ├── _transition.scss │ └── _visibility.scss └── utilities │ ├── _align.scss │ ├── _background.scss │ ├── _borders.scss │ ├── _clearfix.scss │ ├── _display.scss │ ├── _embed.scss │ ├── _flex.scss │ ├── _float.scss │ ├── _overflow.scss │ ├── _position.scss │ ├── _screenreaders.scss │ ├── _shadows.scss │ ├── _sizing.scss │ ├── _spacing.scss │ ├── _text.scss │ └── _visibility.scss └── color-switcher.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_size = 2 4 | end_of_line = lf 5 | indent_style = tab 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [*.md] 10 | trim_trailing_whitespace = false 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | *.css text eol=lf 3 | *.html text eol=lf 4 | *.js text eol=lf 5 | *.json text eol=lf 6 | *.md text eol=lf 7 | *.py text eol=lf 8 | *.rb text eol=lf 9 | *.scss text eol=lf 10 | *.svg text eol=lf 11 | *.yml text eol=lf 12 | # Don't diff or textually merge source maps 13 | *.map binary 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-*.json 3 | .idea 4 | .tmp 5 | dist 6 | .DS_Store 7 | *.zip 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "tabWidth": 2, 4 | "useTabs": true 5 | } 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "block-no-empty": true, 4 | "color-no-invalid-hex": true, 5 | "comment-no-empty": true, 6 | "declaration-block-no-duplicate-properties": true, 7 | "length-zero-no-unit": true, 8 | "declaration-block-no-shorthand-property-overrides": true, 9 | "font-family-no-duplicate-names": true, 10 | "font-family-no-missing-generic-family-keyword": true, 11 | "function-calc-no-unspaced-operator": true, 12 | "function-linear-gradient-no-nonstandard-direction": true, 13 | "keyframe-declaration-no-important": true, 14 | "media-feature-name-no-unknown": true, 15 | "no-duplicate-at-import-rules": true, 16 | "no-empty-source": true, 17 | "no-extra-semicolons": true, 18 | "no-invalid-double-slash-comments": true, 19 | "property-no-unknown": true, 20 | "selector-pseudo-class-no-unknown": true, 21 | "selector-pseudo-element-no-unknown": true, 22 | "selector-type-no-unknown": true, 23 | "string-no-newline": true, 24 | "unit-no-unknown": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2019 Yasin ATEŞ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 |

5 |

Front End Starter Kit with Gulp

6 | 7 | This project is an opinionated build automation for front-end web development based on [Gulp](http://gulpjs.com/), [Node](https://nodejs.org/), [NPM](https://www.npmjs.com/),[Babel](https://babeljs.io/), [Sass](http://sass-lang.com/), and [Pug](https://pugjs.org/). 8 | 9 | 10 | 11 | 12 | 13 | ### Features 14 | 15 | - Pug compilation with [gulp-pug](https://www.npmjs.com/package/gulp-pug) 16 | - Tidy Html files with [gulp-prettier](https://www.npmjs.com/package/gulp-prettier) 17 | - Concatinate the Javascript files with [gulp-include](https://www.npmjs.com/package/gulp-include) 18 | - Sass compilation with [gulp-sass](https://www.npmjs.com/package/gulp-sass) 19 | - Es6 transpilation with [gulp-babel](https://www.npmjs.com/package/gulp-babel) 20 | - Auto-refresh browser with [browser sync](https://www.npmjs.com/package/browser-sync) 21 | - Minification ([Clean CSS](https://www.npmjs.com/package/gulp-clean-css) and [Uglify](https://www.npmjs.com/package/gulp-uglify)) 22 | - Autoprefix CSS with [Autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) 23 | - Better error messages in gulp with [Plumber](https://www.npmjs.com/package/gulp-plumber) 24 | - Compress images with [Image min](https://www.npmjs.com/package/gulp-imagemin) 25 | - Show compiled file size with [gulp-size](https://www.npmjs.com/package/gulp-size) in development mode 26 | - Output project files in zip file for Themeforest production with [gulp-zip](https://www.npmjs.com/package/gulp-zip) 27 | 28 | 29 | ### How to use 30 | 31 | 32 | 33 | 1- Clone this repository 34 | 35 | ```bash 36 | git clone https://github.com/yasinatesim/front-end-starter-kit-with-gulp.git 37 | ``` 38 | 39 | 2- Update the files 40 | 41 | **_package.json_** 42 | 43 | ```json 44 | ... 45 | "name": "theme-name-no-space-character-please-using-dash", 46 | "version": "1.0.0" 47 | "documentation": "enter the online dcoumentation url", 48 | "browserlist": "supprted browser list" 49 | ... 50 | ``` 51 | 52 | **_gulpfile.js_** 53 | 54 | ```javascript 55 | ... 56 | // for themeforest theme 57 | const isThemeforestTheme = false; 58 | // if production mode is active. -> false: developement mode 59 | const isProduction = false; 60 | // if minified file included in production 61 | const minifiedFileInclude = false; 62 | ... 63 | ``` 64 | 65 | 3- Install the project dependencies 66 | 67 | ```bash 68 | cd my-new-project 69 | npm install 70 | ``` 71 | 72 | 4- Develop awesome things 73 | 74 | ```bash 75 | npm start 76 | ``` 77 | 78 | or 79 | 80 | ```bash 81 | gulp 82 | ``` 83 | 84 | ### License 85 | 86 | [![License](http://img.shields.io/:license-mit-blue.svg)](http://badges.mit-license.org) 87 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dependencies 3 | * ----------------------------------------------------------------------------- 4 | */ 5 | 6 | const gulp = require("gulp"); 7 | const gulpLoadPlugins = require("gulp-load-plugins"); 8 | const browserSync = require("browser-sync").create(); 9 | const del = require("del"); 10 | 11 | // plugins load 12 | const $ = gulpLoadPlugins(); 13 | 14 | // auto reload the browser 15 | const reloadStream = browserSync.reload; 16 | const reload = done => { 17 | browserSync.reload(); 18 | done(); 19 | }; 20 | 21 | // catch stream errors 22 | const gulpSrc = gulp.src; 23 | 24 | gulp.src = function onError(...args) { 25 | return ( 26 | gulpSrc 27 | .apply(gulp, args) 28 | // Catch errors 29 | .pipe( 30 | $.plumber(function onError(error) { 31 | $.util.log( 32 | $.util.colors.red(`Error (${error.plugin}):${error.message}`) 33 | ); 34 | this.emit("end"); 35 | }) 36 | ) 37 | ); 38 | }; 39 | 40 | // package data 41 | const pkg = require("./package.json"); 42 | 43 | // for themeforest theme 44 | const isThemeforestTheme = true; 45 | 46 | // if production mode is active. -> false: developement mode 47 | const isProduction = false; 48 | 49 | // if minified file included in production 50 | const minifiedFileInclude = true; 51 | 52 | // Project Path 53 | const srcRoot = "src"; 54 | const src = { 55 | views: `${srcRoot}/pug`, 56 | styles: `${srcRoot}/sass`, 57 | stylesColors: `${srcRoot}/sass/themes`, 58 | stylesVendors: `${srcRoot}/sass/vendors`, 59 | scripts: `${srcRoot}/js`, 60 | scriptsVendors: `${srcRoot}/js/vendors`, 61 | images: `${srcRoot}/img` 62 | }; 63 | 64 | // Distribution Path 65 | const tmpRoot = ".tmp"; 66 | const distRoot = isThemeforestTheme ? `${pkg.name}-v${pkg.version}` : "dist"; 67 | const dist = { 68 | views: isProduction ? `${distRoot}` : `${tmpRoot}`, 69 | styles: isProduction ? `${distRoot}/assets/css` : `${tmpRoot}/assets/css`, 70 | stylesColors: isProduction 71 | ? `${distRoot}/assets/css/colors` 72 | : `${tmpRoot}/assets/css/colors`, 73 | stylesVendors: isProduction 74 | ? `${distRoot}/assets/css/vendors` 75 | : `${tmpRoot}/assets/css/vendors`, 76 | scripts: isProduction ? `${distRoot}/assets/js` : `${tmpRoot}/assets/js`, 77 | scriptsVendors: isProduction 78 | ? `${distRoot}/assets/js/vendors` 79 | : `${tmpRoot}/assets/js/vendors`, 80 | images: isProduction ? `${distRoot}/assets/img` : `${tmpRoot}/assets/img` 81 | }; 82 | 83 | /** 84 | * Builds 85 | * ================================================================ 86 | */ 87 | 88 | // html 89 | 90 | gulp.task("views", () => 91 | gulp 92 | .src(`${src.views}/*.pug`) 93 | .pipe( 94 | $.pug({ 95 | pretty: 96 | (isThemeforestTheme && isProduction) || !isThemeforestTheme 97 | ? true 98 | : false, 99 | data: { 100 | isProduction: isProduction, 101 | isThemeforestTheme: isThemeforestTheme 102 | } 103 | }) 104 | ) 105 | .pipe( 106 | $.if( 107 | (isThemeforestTheme && isProduction) || !isThemeforestTheme, 108 | $.prettier({ 109 | printWidth: 300, 110 | tabWidth: 4, 111 | useTabs: true 112 | }) 113 | ) 114 | ) 115 | .pipe(gulp.dest(`${dist.views}`)) 116 | .pipe(reloadStream({ stream: true })) 117 | ); 118 | 119 | // styles 120 | 121 | gulp.task("style", () => { 122 | let stream = gulp 123 | .src(`${src.styles}/*.scss`) 124 | .pipe($.sass()) 125 | .pipe( 126 | $.sass 127 | .sync({ 128 | outputStyle: "expanded", 129 | precision: 6, 130 | includePaths: ["."] 131 | }) 132 | .on("error", $.sass.logError) 133 | ) 134 | .pipe($.autoprefixer()); 135 | 136 | if (isProduction) { 137 | if (minifiedFileInclude) { 138 | stream = stream 139 | .pipe(gulp.dest(dist.styles)) 140 | .pipe($.cleanCss()) 141 | .pipe($.rename({ suffix: ".min" })); 142 | } 143 | } else { 144 | stream = stream 145 | .pipe($.cleanCss()) 146 | .pipe($.rename({ suffix: ".min" })) 147 | .pipe( 148 | $.size({ 149 | showFiles: true 150 | }) 151 | ); 152 | } 153 | stream = stream 154 | .pipe(gulp.dest(dist.styles)) 155 | .pipe(reloadStream({ stream: true })); 156 | return stream; 157 | }); 158 | 159 | gulp.task("style:theme", () => { 160 | let stream = gulp 161 | .src(`${src.stylesColors}/*.scss`) 162 | .pipe($.sass()) 163 | .pipe( 164 | $.sass 165 | .sync({ 166 | outputStyle: "expanded", 167 | precision: 6, 168 | includePaths: ["."] 169 | }) 170 | .on("error", $.sass.logError) 171 | ) 172 | .pipe($.autoprefixer()); 173 | 174 | if (isProduction) { 175 | if (minifiedFileInclude) { 176 | stream = stream 177 | .pipe(gulp.dest(dist.stylesColors)) 178 | .pipe($.cleanCss()) 179 | .pipe($.rename({ suffix: ".min" })); 180 | } 181 | } else { 182 | stream = stream 183 | .pipe($.cleanCss()) 184 | .pipe($.rename({ suffix: ".min" })) 185 | .pipe( 186 | $.size({ 187 | showFiles: true 188 | }) 189 | ); 190 | } 191 | stream = stream 192 | .pipe(gulp.dest(dist.stylesColors)) 193 | .pipe(reloadStream({ stream: true })); 194 | return stream; 195 | }); 196 | 197 | gulp.task("style:vendors", () => { 198 | let stream = gulp 199 | .src(`${src.stylesVendors}/*.scss`) 200 | .pipe($.sass()) 201 | .pipe( 202 | $.sass 203 | .sync({ 204 | outputStyle: "expanded", 205 | precision: 6, 206 | includePaths: ["."] 207 | }) 208 | .on("error", $.sass.logError) 209 | ) 210 | .pipe($.autoprefixer()); 211 | 212 | if (isProduction) { 213 | if (minifiedFileInclude) { 214 | stream = stream 215 | .pipe(gulp.dest(dist.stylesVendors)) 216 | .pipe($.cleanCss()) 217 | .pipe($.rename({ suffix: ".min" })); 218 | } 219 | } else { 220 | stream = stream 221 | .pipe($.cleanCss()) 222 | .pipe($.rename({ suffix: ".min" })) 223 | .pipe( 224 | $.size({ 225 | showFiles: true 226 | }) 227 | ); 228 | } 229 | stream = stream 230 | .pipe(gulp.dest(dist.stylesVendors)) 231 | .pipe(reloadStream({ stream: true })); 232 | return stream; 233 | }); 234 | 235 | gulp.task("styles", gulp.series("style", "style:theme", "style:vendors")); 236 | 237 | // scripts 238 | 239 | gulp.task("script", () => { 240 | let stream = gulp 241 | .src(`${src.scripts}/*.js`) 242 | .pipe($.include()) 243 | .pipe( 244 | $.babel({ 245 | presets: [["env", { loose: true, modules: false }]] //'use-strict' deleted 246 | }) 247 | ); 248 | 249 | if (isProduction) { 250 | if (minifiedFileInclude) { 251 | stream = stream 252 | .pipe(gulp.dest(dist.scripts)) 253 | .pipe($.uglify()) 254 | .pipe($.rename({ suffix: ".min" })); 255 | } 256 | } else { 257 | stream = stream 258 | .pipe($.uglify()) 259 | .pipe($.rename({ suffix: ".min" })) 260 | .pipe( 261 | $.size({ 262 | showFiles: true 263 | }) 264 | ); 265 | } 266 | stream = stream 267 | .pipe(gulp.dest(dist.scripts)) 268 | .pipe(reloadStream({ stream: true })); 269 | return stream; 270 | }); 271 | 272 | gulp.task("script:vendors", () => { 273 | let stream = gulp 274 | .src(`${src.scriptsVendors}/*.js`) 275 | .pipe($.include()) 276 | .pipe( 277 | $.babel({ 278 | presets: [["env", { loose: true, modules: false }]] //'use-strict' deleted 279 | }) 280 | ); 281 | 282 | if (isProduction) { 283 | if (minifiedFileInclude) { 284 | stream = stream 285 | .pipe(gulp.dest(dist.scriptsVendors)) 286 | .pipe($.uglify()) 287 | .pipe($.rename({ suffix: ".min" })); 288 | } 289 | } else { 290 | stream = stream 291 | .pipe($.uglify()) 292 | .pipe($.rename({ suffix: ".min" })) 293 | .pipe( 294 | $.size({ 295 | showFiles: true 296 | }) 297 | ); 298 | } 299 | stream = stream 300 | .pipe(gulp.dest(dist.scriptsVendors)) 301 | .pipe(reloadStream({ stream: true })); 302 | return stream; 303 | }); 304 | 305 | gulp.task("scripts", gulp.series("script", "script:vendors")); 306 | 307 | // images 308 | 309 | gulp.task("images", () => { 310 | let stream; 311 | if (isThemeforestTheme) { 312 | stream = gulp 313 | .src( 314 | !isProduction ? `${src.images}/sample/**/*` : `${src.images}/prod/**/*` 315 | ) 316 | .pipe($.newer(!isProduction ? `${dist.images}/sample` : `${dist.images}`)) 317 | .pipe( 318 | $.imagemin([ 319 | $.imagemin.gifsicle({ 320 | interlaced: true 321 | }), 322 | $.imagemin.jpegtran({ 323 | progressive: true 324 | }), 325 | $.imagemin.optipng({ 326 | optimizationLevel: 5 327 | }), 328 | $.imagemin.svgo({ 329 | plugins: [ 330 | { 331 | removeViewBox: false 332 | }, 333 | { 334 | cleanupIDs: false 335 | } 336 | ] 337 | }) 338 | ]) 339 | ) 340 | .pipe( 341 | gulp.dest(!isProduction ? `${dist.images}/sample` : `${dist.images}`) 342 | ); 343 | } else { 344 | stream = gulp 345 | .src(`${src.images}/**/*`) 346 | .pipe($.newer(`${dist.images}`)) 347 | .pipe( 348 | $.imagemin([ 349 | $.imagemin.gifsicle({ 350 | interlaced: true 351 | }), 352 | $.imagemin.jpegtran({ 353 | progressive: true 354 | }), 355 | $.imagemin.optipng({ 356 | optimizationLevel: 5 357 | }), 358 | $.imagemin.svgo({ 359 | plugins: [ 360 | { 361 | removeViewBox: false 362 | }, 363 | { 364 | cleanupIDs: false 365 | } 366 | ] 367 | }) 368 | ]) 369 | ) 370 | .pipe(gulp.dest(`${dist.images}`)); 371 | } 372 | stream = stream.pipe(reloadStream({ stream: true })); 373 | return stream; 374 | }); 375 | 376 | /** 377 | * Clean 378 | * ================================================================ 379 | */ 380 | 381 | gulp.task("clean", () => 382 | del(`${distRoot}`, { 383 | force: true 384 | }) 385 | ); 386 | 387 | /** 388 | * Build Theme 389 | * ================================================================ 390 | */ 391 | 392 | gulp.task("zip", () => 393 | gulp 394 | .src(`${distRoot}/*`) 395 | .pipe($.zip(`${distRoot}.zip`)) 396 | .pipe(gulp.dest("./")) 397 | ); 398 | 399 | if (isThemeforestTheme && isProduction) { 400 | gulp.task( 401 | "build", 402 | gulp.series("clean", "views", "styles", "scripts", "images", "zip") 403 | ); 404 | } else { 405 | gulp.task( 406 | "build", 407 | gulp.series("clean", "views", "styles", "scripts", "images") 408 | ); 409 | } 410 | 411 | /** 412 | * Serve 413 | * ================================================================ 414 | */ 415 | 416 | // 'gulp serve' - open up theme in your browser and watch for changes 417 | gulp.task("serve", done => { 418 | browserSync.init({ 419 | notify: false, 420 | ui: false, 421 | port: 3000, 422 | server: dist.views 423 | }); 424 | 425 | done(); 426 | 427 | gulp.watch(`${src.views}/**/*.pug`, gulp.series("views", reload)); 428 | gulp.watch( 429 | [`${src.styles}/**/*.scss`, `!${src.stylesColors}/**/*.scss`, `!${src.stylesVendors}/**/*.scss`], 430 | gulp.series("style", reload) 431 | ); 432 | gulp.watch(`${src.stylesColors}/**/*.scss`, gulp.series("style:theme", reload)); 433 | gulp.watch(`${src.stylesVendors}/**/*.scss`, gulp.series("style:vendors", reload)); 434 | gulp.watch([`${src.scripts}/**/*.js`, `!${src.scriptsVendors}/**/*.js`], gulp.series("script", reload)); 435 | gulp.watch(`${src.scriptsVendors}/**/*.js`, gulp.series("script:vendors", reload)); 436 | gulp.watch(`${src.images}/**/*`, gulp.series("images", reload)); 437 | }); 438 | 439 | // 'gulp' - build and serves the theme 440 | gulp.task("default", gulp.series("build", "serve")); 441 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-starter-kit-with-gulp", 3 | "version": "2.0.0", 4 | "description": "Frontend Starter Kit with Gulp for either Themeforest Projects or customizable projects.", 5 | "homepage": "https://www.yasinates.com", 6 | "main": "gulpfile.js", 7 | "scripts": { 8 | "start": "gulp" 9 | }, 10 | "bugs": { 11 | "email": "yasinatesim@gmail.com", 12 | "url": "https://github.com/yasinatesim/Front-End-Starter-Kit-with-Gulp/issues" 13 | }, 14 | "keywords": [ 15 | "gulp", 16 | "pug", 17 | "sass", 18 | "scss", 19 | "babel", 20 | "es6", 21 | "ecmascript6", 22 | "es6-javascript", 23 | "preprocessor", 24 | "frontend", 25 | "front-end", 26 | "front-end-development", 27 | "front-end-webdevelopment", 28 | "optimize", 29 | "minify", 30 | "theme", 31 | "theme-development", 32 | "theme", 33 | "themeforest", 34 | "starter-kit" 35 | ], 36 | "repository": { 37 | "type": "git", 38 | "url": "https://github.com/yasinatesim/Front-End-Starter-Kit-with-Gulp" 39 | }, 40 | "author": { 41 | "name": "Yasin ATEŞ", 42 | "email": "yasinatesim@gmail.com", 43 | "url": "https://www.yasinates.com" 44 | }, 45 | "license": "MIT", 46 | "browserslist": [ 47 | "last 2 version" 48 | ], 49 | "documentation": "http://onlinedocs.com/themename", 50 | "purchase": "theme-themeforest-url", 51 | "devDependencies": { 52 | "browser-sync": "^2.26.5", 53 | "del": "^4.1.0", 54 | "gulp": "^4.0.1", 55 | "gulp-autoprefixer": "^6.1.0", 56 | "gulp-clean-css": "^4.2.0", 57 | "gulp-if": "^2.0.2", 58 | "gulp-load-plugins": "^1.5.0", 59 | "gulp-plumber": "^1.2.1", 60 | "gulp-rename": "^1.4.0", 61 | "gulp-sass": "^4.0.2", 62 | "gulp-size": "^3.0.0", 63 | "gulp-util": "^3.0.8", 64 | "gulp-newer": "^1.4.0", 65 | "gulp-imagemin": "^5.0.3", 66 | "gulp-pug": "^4.0.1", 67 | "gulp-prettier": "^2.1.0", 68 | "gulp-babel": "^7.0.0", 69 | "gulp-uglify": "^3.0.2", 70 | "gulp-include": "^2.4.1", 71 | "babel-core": "^6.26.3", 72 | "babel-preset-env": "^1.7.0", 73 | "gulp-zip": "^4.2.0" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/img/prod/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/img/prod/.gitkeep -------------------------------------------------------------------------------- /src/img/sample/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/img/sample/.gitkeep -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 'use strict'; 3 | 4 | //=require pages/_index.js 5 | 6 | }); 7 | 8 | -------------------------------------------------------------------------------- /src/js/base/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/js/base/.gitkeep -------------------------------------------------------------------------------- /src/js/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/js/components/.gitkeep -------------------------------------------------------------------------------- /src/js/layout/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/js/layout/.gitkeep -------------------------------------------------------------------------------- /src/js/pages/_index.js: -------------------------------------------------------------------------------- 1 | const arr = [1,2,3]; 2 | const arr2 = [...arr,4,5]; 3 | 4 | 5 | const test = () => { 6 | console.log(arr2) 7 | } 8 | 9 | test(); -------------------------------------------------------------------------------- /src/js/vendors/color-switcher.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var ColorSwitcher = (function() { 4 | 5 | function initColorSwitcher(colorSheets) { 6 | var tempCon, colorSwitcher, controlBtn, colorSwitchs, linkHolderHtml, linkHolder; 7 | 8 | if (Object.prototype.toString.call(colorSheets) !== "[object Array]") { 9 | return; 10 | } 11 | 12 | tempCon = document.createDocumentFragment(); 13 | 14 | colorSwitcher = document.createElement("div"); 15 | colorSwitcher.classList.add("ColorSwitcher"); 16 | 17 | controlBtn = document.createElement("button"); 18 | controlBtn.classList.add("ColorSwitcher__control"); 19 | 20 | colorSwitchs = document.createElement("div"); 21 | colorSwitchs.classList.add("ColorSwitcher__switchs"); 22 | 23 | linkHolder = document.getElementById("color-switcher"); 24 | 25 | colorSheets.forEach(function(colorSheet, index) { 26 | var colorSwitch; 27 | 28 | if (colorSheet.color && colorSheet.title && colorSheet.href) { 29 | colorSwitch = document.createElement("button"); 30 | 31 | colorSwitch.classList.add("ColorSwitcher__switch") 32 | colorSwitch.title = colorSheet.title; 33 | colorSwitch.dataset.index = index; 34 | colorSwitch.style.backgroundColor = colorSheet.color; 35 | 36 | colorSwitchs.appendChild(colorSwitch); 37 | } 38 | }); 39 | 40 | colorSwitchs.addEventListener("click", function(event) { 41 | var index; 42 | 43 | if (event.target.nodeName !== "BUTTON") { 44 | return; 45 | } 46 | 47 | index = event.target.dataset.index; 48 | linkHolder.href = colorSheets[index].href 49 | 50 | return false; 51 | }); 52 | 53 | controlBtn.addEventListener("click", function(event) { 54 | event.target.parentElement.classList.toggle("ColorSwitcher--open"); 55 | 56 | return false; 57 | }); 58 | 59 | colorSwitcher.appendChild(controlBtn); 60 | colorSwitcher.appendChild(colorSwitchs); 61 | tempCon.appendChild(colorSwitcher); 62 | document.body.appendChild(tempCon); 63 | } 64 | 65 | return { 66 | init: initColorSwitcher 67 | }; 68 | })(); 69 | -------------------------------------------------------------------------------- /src/pug/base/_mixins.pug: -------------------------------------------------------------------------------- 1 | include mixins/_space 2 | include mixins/_suffix 3 | include mixins/_comment 4 | include mixins/_image -------------------------------------------------------------------------------- /src/pug/base/_variables.pug: -------------------------------------------------------------------------------- 1 | include variables/_global 2 | include variables/_page -------------------------------------------------------------------------------- /src/pug/base/mixins/_comment.pug: -------------------------------------------------------------------------------- 1 | //- Comment Line Mixin 2 | mixin c (comment) 3 | - if (isThemeforestTheme) { 4 | - if (isProduction) { 5 | 6 | - } 7 | - } else { 8 | 9 | - } 10 | 11 | -------------------------------------------------------------------------------- /src/pug/base/mixins/_image.pug: -------------------------------------------------------------------------------- 1 | //- Displaceable Image Mixin with Placeholder 2 | mixin img(photo,alt) 3 | if isThemeforestTheme 4 | img(src=(demo ? "assets/img/sample/" + photo : "assets/img/" + photo) alt=alt) 5 | else 6 | img(src="assets/img/" + photo alt=alt) 7 | -------------------------------------------------------------------------------- /src/pug/base/mixins/_space.pug: -------------------------------------------------------------------------------- 1 | //- Line Mixin 2 | mixin line 3 | - if (isThemeforestTheme) { 4 | - if (isProduction) { 5 | ="\n" 6 | - } 7 | - } else { 8 | ="\n" 9 | - } 10 | 11 | //- Tab Mixin 12 | mixin tab 13 | - if (isThemeforestTheme) { 14 | - if (isProduction) { 15 | ="\t" 16 | - } 17 | - } else { 18 | ="\t" 19 | - } 20 | 21 | //- LineTab Mixin 22 | mixin lineTab 23 | +line 24 | +tab 25 | -------------------------------------------------------------------------------- /src/pug/base/mixins/_suffix.pug: -------------------------------------------------------------------------------- 1 | //- Add .min suffix Mixins 2 | mixin link(source,vendors) 3 | - vendors = vendors || false 4 | link(rel="stylesheet" href="assets/css/" + (vendors ? 'vendors/' + source: source) + (!isProduction ? ".min" : "") + ".css") 5 | 6 | mixin script(source,vendors) 7 | - vendors = vendors || false 8 | script(src="assets/js/" + (vendors ? 'vendors/' + source: source) + (!isProduction ? ".min" : "") + ".js") 9 | -------------------------------------------------------------------------------- /src/pug/base/variables/_global.pug: -------------------------------------------------------------------------------- 1 | //- Theme Color Options 2 | - const Theme = 'red'; 3 | 4 | //- For SEO Optimization required 5 | - const siteTitle = 'Site Başlığı'; 6 | - const siteDescription = 'Site Açıklaması'; 7 | - const siteKeywords = 'site,kelimeleri,virgülle,ayrılmalıdır'; 8 | - const siteAuthor = 'site Authoru'; 9 | - const siteRobots = 'noindex,nofollow'; 10 | - const siteUrl = 'https://website.com'; 11 | - const siteLanguage = 'tr-TR' 12 | 13 | //- Copyright 14 | - const siteCopyright = '1 Ocak 2019 autohorsiteurl.com.tr'; 15 | 16 | //- Logo Url 17 | - const siteLogoUrl = 'assets/img/og-img.jpg'; 18 | 19 | //- Favicons 20 | - const siteFavicon = 'assets/img/favicon.png'; 21 | 22 | //- Address Bar Color 23 | - const siteThemeColor = '#ffffff'; 24 | -------------------------------------------------------------------------------- /src/pug/base/variables/_page.pug: -------------------------------------------------------------------------------- 1 | block pageVars -------------------------------------------------------------------------------- /src/pug/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/pug/components/.gitkeep -------------------------------------------------------------------------------- /src/pug/index.pug: -------------------------------------------------------------------------------- 1 | extends layouts/default 2 | block pageVars 3 | - var page = "index" 4 | //- - var pageTitle = "Homepage" 5 | block content 6 | h1 test 7 | -------------------------------------------------------------------------------- /src/pug/layouts/default.pug: -------------------------------------------------------------------------------- 1 | include ../base/_variables 2 | include ../base/_mixins 3 | 4 | - if(isThemeforestTheme) { 5 | - if (!isProduction) { 6 | // 7 | ============================================================================= 8 | 9 | * This is a premium product available exclusively at sitename.net 10 | * The demo files are minified/crypted for copyright reasons, 11 | * you will find them, expanded, well commented and 12 | * coded accurately in your download pack. 13 | 14 | ============================================================================= 15 | ="\n" 16 | - } else { 17 | // 18 | Template; 19 | * Name : themeName 20 | * Created Date : themeDate 21 | * Version : themeVersion 22 | Author; 23 | * Gmail : mail@email.com 24 | * Web Site : https://www.website.com 25 | ============================================================================================ 26 | Copyright (c) 2019 - username - https://themeforest.net/user/username 27 | ============================================================================================ 28 | - } 29 | - } 30 | 31 | 32 | html(lang=siteLanguage) 33 | head 34 | meta(charset="UTF-8") 35 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 36 | meta(http-equiv="X-UA-Compatible", content="ie=edge") 37 | 38 | +line 39 | +line 40 | 41 | title=(pageTitle ? pageTitle + ' - ' + siteTitle:siteTitle) 42 | 43 | include ../partials/includes/_meta-tags 44 | include ../partials/includes/_styles 45 | body 46 | 47 | include ../partials/includes/_icons 48 | 49 | //- - if (page !== 'login' && page !== 'register' && page !== 'forgot-password' && page !== '404') { 50 | //- include header 51 | //- include sidebar 52 | //- - } 53 | 54 | include ../partials/_header 55 | 56 | +line 57 | +line 58 | 59 | include ../partials/_sidebar 60 | 61 | +line 62 | +line 63 | 64 | block content 65 | 66 | +line 67 | +line 68 | 69 | include ../partials/_footer 70 | 71 | +line 72 | +line 73 | 74 | //- - if (page !== 'login' && page !== 'register' && page !== 'forgot-password' && page !== '404') { 75 | //- include footer 76 | //- - } 77 | 78 | include ../partials/includes/_scripts 79 | -------------------------------------------------------------------------------- /src/pug/partials/_footer.pug: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/pug/partials/_footer.pug -------------------------------------------------------------------------------- /src/pug/partials/_header.pug: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/pug/partials/_header.pug -------------------------------------------------------------------------------- /src/pug/partials/_sidebar.pug: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/pug/partials/_sidebar.pug -------------------------------------------------------------------------------- /src/pug/partials/includes/_icons.pug: -------------------------------------------------------------------------------- 1 | svg(style='position: absolute; width: 0; height: 0; overflow: hidden', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink') 2 | defs 3 | symbol#icon-timer(viewBox='0 0 24 24') 4 | title timer 5 | path(d='M16.219 16.219l0.797-1.313-4.5-2.719v-5.203h-1.5v6zM12 2.016c5.484 0 9.984 4.5 9.984 9.984s-4.5 9.984-9.984 9.984-9.984-4.5-9.984-9.984 4.5-9.984 9.984-9.984z') 6 | symbol#icon-heart(viewBox='0 0 32 32') 7 | title heart 8 | path(d='M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z') 9 | symbol#icon-dashboard(viewBox='0 0 24 24') 10 | title dashboard 11 | path(d='M19 3h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2zM9 17h-2v-7h2v7zM13 17h-2v-10h2v10zM17 17h-2v-4h2v4z') 12 | symbol#icon-task(viewBox='0 0 24 24') 13 | title task 14 | path(d='M19 3h-4.18c-0.42-1.16-1.52-2-2.82-2s-2.4 0.84-2.82 2h-4.18c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2zM12 3c0.55 0 1 0.45 1 1s-0.45 1-1 1-1-0.45-1-1 0.45-1 1-1zM14 17h-7v-2h7v2zM17 13h-10v-2h10v2zM17 9h-10v-2h10v2z') 15 | symbol#icon-search(viewBox='0 0 32 32') 16 | title search 17 | path(d='M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z') 18 | symbol#icon-facebook(viewBox='0 0 32 32') 19 | title Facebook 20 | path(d='M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z') -------------------------------------------------------------------------------- /src/pug/partials/includes/_meta-tags.pug: -------------------------------------------------------------------------------- 1 | +line 2 | +line 3 | meta(name='description', content=siteDescription) 4 | meta(name='author', content=siteAuthor) 5 | meta(name='classification', content=siteKeywords) 6 | meta(name='copyright', content=siteCopyright) 7 | meta(property='og:url', content=siteUrl) 8 | meta(property='og:type', content='website') 9 | meta(property='og:title', content=siteTitle) 10 | meta(property='og:description', content=siteDescription) 11 | meta(property='og:image', content=siteLogoUrl) 12 | meta(property='og:site_name', content=siteTitle) 13 | meta(property='og:locale', content=siteLanguage) 14 | meta(property='article:author', content=siteTitle) 15 | 16 | +line 17 | +line 18 | +c('Address Bar Color') 19 | meta(name='theme-color', content=siteThemeColor) 20 | 21 | +line 22 | +line 23 | +c('Robots') 24 | meta(name='robots', content=siteRobots) 25 | meta(name='googlebot', content=siteRobots) 26 | 27 | +line 28 | +line 29 | +c('Favicons') 30 | 31 | link(rel='shortcut icon', href=siteFavicon, type='image/x-icon') 32 | link(rel='icon', href=siteFavicon, type='image/x-icon') 33 | link(rel='apple-touch-icon', href=siteFavicon) 34 | link(rel='mask-icon', href=siteFavicon, color=siteThemeColor) 35 | 36 | +line 37 | link(rel='canonical', href=siteUrl) 38 | link(type='text/plain', rel='author', href=`${siteUrl}/humans.txt`) 39 | 40 | +line 41 | +line 42 | -------------------------------------------------------------------------------- /src/pug/partials/includes/_scripts.pug: -------------------------------------------------------------------------------- 1 | +line 2 | +c('Scripts') 3 | +script('jquery',true) 4 | +script('bootstrap',true) 5 | +script('app') 6 | - if (isThemeforestTheme) { 7 | +c('Color Switcher -- For Demo') 8 | +script('color-switcher',true) 9 | script. 10 | var colorSheets = [ 11 | {color: "#f00",title: "Switch to Red",href: "assets/css/colors/red.min.css"}, 12 | {color: "#0f0",title: "Switch to Green",href: "assets/css/colors/green.min.css"}, 13 | {color: "#00f",title: "Switch to Blue",href: "assets/css/colors/blue.min.css"} 14 | ]; 15 | ColorSwitcher.init(colorSheets); 16 | - } 17 | -------------------------------------------------------------------------------- /src/pug/partials/includes/_styles.pug: -------------------------------------------------------------------------------- 1 | +c('Styles') 2 | +link('bootstrap',true) 3 | +link('app') 4 | if (isThemeforestTheme) 5 | +line 6 | +line 7 | +c('Color Options') 8 | +c('Note: if you delete the Color Switcher plugin, remove this element ~ id=color-switcher ~ attribute') 9 | link#color-switcher(rel="stylesheet" href="assets/css/colors/" + Theme + ".min" + ".css")/ 10 | 11 | +line 12 | +line 13 | 14 | +c('Color Switcher -- For Demo') 15 | +link('color-switcher',true) 16 | -------------------------------------------------------------------------------- /src/sass/_base.scss: -------------------------------------------------------------------------------- 1 | @import 'base/variables'; 2 | @import 'base/mixins'; 3 | 4 | /* =============== 1_1 Global Settings =============== */ 5 | @import 'base/global'; -------------------------------------------------------------------------------- /src/sass/_components.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/_components.scss -------------------------------------------------------------------------------- /src/sass/_layouts.scss: -------------------------------------------------------------------------------- 1 | @import "layouts/default"; 2 | @import "partials/header"; 3 | @import "partials/sidebar"; 4 | @import "partials/footer"; 5 | -------------------------------------------------------------------------------- /src/sass/_pages.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/_pages.scss -------------------------------------------------------------------------------- /src/sass/app.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Template; 3 | * Name : ThemeName 4 | * Created Date : date 5 | * Version : 1.0.0 6 | Author; 7 | * Email : yasinatesim@gmail.com 8 | * Web Site : http://www.yasinates.com 9 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 10 | Copyright (c) 2019 - yasinatesim - https://themeforest.net/user/yasinatesim 11 | ============================================================================================ 12 | */ 13 | 14 | /* 15 | ==================================== 16 | [ CSS TABLE CONTENT ] 17 | ------------------------------------ 18 | 1_0 - BASE 19 | ➢ -- 1_1 Global Settings 20 | 2_0 - COMPONENTS 21 | 3_0 - LAYOUT 22 | ➢ -- 3_1 General Settings 23 | 4_0 - PAGES 24 | ------------------------------------- 25 | [ END CSS TABLE CONTENT ] 26 | ===================================== 27 | */ 28 | 29 | .example { 30 | display: grid; 31 | transition: all 0.5s; 32 | transition: all 0.5s; 33 | user-select: none; 34 | background: linear-gradient(to bottom, white, black); 35 | } 36 | 37 | /*-------------------------------------------------------------------------- 38 | | 1_0 - BASE 39 | --------------------------------------------------------------------------*/ 40 | 41 | @import "base"; 42 | 43 | /*-------------------------------------------------------------------------- 44 | | 2_0 - COMPONENTS 45 | --------------------------------------------------------------------------*/ 46 | 47 | @import "components"; 48 | 49 | /*-------------------------------------------------------------------------- 50 | | 2_0 - LAYOUT 51 | --------------------------------------------------------------------------*/ 52 | 53 | @import "layouts"; 54 | 55 | /*-------------------------------------------------------------------------- 56 | | 4_0 - PAGES 57 | --------------------------------------------------------------------------*/ 58 | 59 | @import "pages"; 60 | -------------------------------------------------------------------------------- /src/sass/base/_global.scss: -------------------------------------------------------------------------------- 1 | @import 'global/reset'; 2 | @import 'global/normalize'; 3 | @import 'global/fonts'; -------------------------------------------------------------------------------- /src/sass/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/colors'; 2 | @import 'mixins/bem'; 3 | @import 'mixins/media-queries'; 4 | @import 'mixins/fonts'; -------------------------------------------------------------------------------- /src/sass/base/_variables.scss: -------------------------------------------------------------------------------- 1 | @import 'variables/colors'; -------------------------------------------------------------------------------- /src/sass/base/global/_fonts.scss: -------------------------------------------------------------------------------- 1 | h2, h3, h4, h5, 2 | h6 { 3 | font: { 4 | weight: 600; 5 | } 6 | } 7 | h2 { 8 | font: { 9 | size: 26px; 10 | } 11 | } 12 | h3 { 13 | font: { 14 | size: 24px; 15 | } 16 | } 17 | h4 { 18 | font: { 19 | size: 22px; 20 | } 21 | } 22 | h5 { 23 | font: { 24 | size: 20px; 25 | } 26 | } 27 | h6 { 28 | font: { 29 | size: 18px; 30 | } 31 | } 32 | p { 33 | font: { 34 | size: 14px; 35 | weight: 400; 36 | } 37 | 38 | line-height: 1.7; 39 | letter-spacing: 0.7px; 40 | } 41 | -------------------------------------------------------------------------------- /src/sass/base/global/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | html { 4 | line-height: 1.15; 5 | -webkit-text-size-adjust: 100%; 6 | } 7 | body { 8 | margin: 0; 9 | } 10 | main { 11 | display: block; 12 | } 13 | h1 { 14 | font-size: 2em; 15 | margin: 0.67em 0; 16 | } 17 | hr { 18 | box-sizing: content-box; 19 | height: 0; 20 | overflow: visible; 21 | } 22 | pre { 23 | font-family: monospace, monospace; 24 | font-size: 1em; 25 | } 26 | a { 27 | background-color: transparent; 28 | } 29 | abbr[title] { 30 | border-bottom: none; 31 | text-decoration: underline; 32 | text-decoration: underline dotted; 33 | } 34 | b, strong { 35 | font-weight: bolder; 36 | } 37 | code, kbd, samp { 38 | font-family: monospace, monospace; 39 | font-size: 1em; 40 | } 41 | small { 42 | font-size: 80%; 43 | } 44 | sub, sup { 45 | font-size: 75%; 46 | line-height: 0; 47 | position: relative; 48 | vertical-align: baseline; 49 | } 50 | sub { 51 | bottom: -0.25em; 52 | } 53 | sup { 54 | top: -0.5em; 55 | } 56 | img { 57 | border-style: none; 58 | } 59 | button, input, optgroup, select, 60 | textarea { 61 | font-family: inherit; 62 | font-size: 100%; 63 | line-height: 1.15; 64 | margin: 0; 65 | } 66 | button, input { 67 | overflow: visible; 68 | } 69 | button, select { 70 | text-transform: none; 71 | } 72 | button, [type="button"], [type="reset"], [type="submit"] { 73 | -webkit-appearance: button; 74 | } 75 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, 76 | [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 77 | border-style: none; 78 | padding: 0; 79 | } 80 | button:-moz-focusring, [type="button"]:-moz-focusring, 81 | [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { 82 | outline: 1px dotted ButtonText; 83 | } 84 | fieldset { 85 | padding: 0.35em 0.75em 0.625em; 86 | } 87 | legend { 88 | box-sizing: border-box; 89 | color: inherit; 90 | display: table; 91 | max-width: 100%; 92 | padding: 0; 93 | white-space: normal; 94 | } 95 | progress { 96 | vertical-align: baseline; 97 | } 98 | textarea { 99 | overflow: auto; 100 | } 101 | [type="checkbox"], [type="radio"] { 102 | box-sizing: border-box; 103 | padding: 0; 104 | } 105 | [type="number"]::-webkit-inner-spin-button, 106 | [type="number"]::-webkit-outer-spin-button { 107 | height: auto; 108 | } 109 | [type="search"] { 110 | -webkit-appearance: textfield; 111 | outline-offset: -2px; 112 | } 113 | [type="search"]::-webkit-search-decoration { 114 | -webkit-appearance: none; 115 | } 116 | ::-webkit-file-upload-button { 117 | -webkit-appearance: button; 118 | font: inherit; 119 | } 120 | details { 121 | display: block; 122 | } 123 | summary { 124 | display: list-item; 125 | } 126 | template { 127 | display: none; 128 | } 129 | [hidden] { 130 | display: none; 131 | } 132 | -------------------------------------------------------------------------------- /src/sass/base/global/_reset.scss: -------------------------------------------------------------------------------- 1 | /*! formalize.css | MIT License | github.com/interacthings/formalize */ 2 | 3 | * { 4 | &, &:before, &:after { 5 | box-sizing: inherit; 6 | } 7 | } 8 | html { 9 | box-sizing: border-box; 10 | text-rendering: optimizeLegibility; 11 | } 12 | body { 13 | overflow-x: hidden; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | a { 18 | text-decoration: none; 19 | } 20 | img { 21 | vertical-align: middle; 22 | } 23 | blockquote, dl, dd, h1, 24 | h2, h3, h4, h5, 25 | h6, figure, p, pre, 26 | fieldset, ul, ol, menu, 27 | form { 28 | margin: 0; 29 | } 30 | button, fieldset, iframe { 31 | border: 0; 32 | } 33 | fieldset, ul, ol, button, 34 | menu { 35 | padding: 0; 36 | } 37 | ol, ul { 38 | list-style: none; 39 | } 40 | textarea { 41 | resize: vertical; 42 | } 43 | table { 44 | width: 100%; 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | td { 49 | padding: 0; 50 | } 51 | -------------------------------------------------------------------------------- /src/sass/base/mixins/_bem.scss: -------------------------------------------------------------------------------- 1 | @mixin element($element) { 2 | &__#{$element} { 3 | @content; 4 | } 5 | } 6 | @mixin modifier($modifier) { 7 | &--#{$modifier} { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/sass/base/mixins/_colors.scss: -------------------------------------------------------------------------------- 1 | @mixin backgroundColor($bgColor, $lightText: #fff, $darkText:#000) { 2 | background-color: $bgColor; 3 | 4 | @if (lightness($bgColor) > 50) { 5 | // lightness($bgColor) > lightness(#999) 6 | color: $darkText; 7 | } 8 | @else { 9 | color: $lightText; 10 | } 11 | } -------------------------------------------------------------------------------- /src/sass/base/mixins/_fonts.scss: -------------------------------------------------------------------------------- 1 | @mixin changeFontSize($fontSize, $width: "xlarge") { 2 | font-size: #{$fontSize / 2}px; 3 | 4 | @include mq($width) { 5 | font-size: #{$fontSize}px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/sass/base/mixins/_media-queries.scss: -------------------------------------------------------------------------------- 1 | @mixin mq($width: "desktop") { 2 | @if($width=="mobile") { 3 | @media (min-width: 576px) { 4 | @content 5 | } 6 | } 7 | @else if ($width=="tablet") { 8 | @media (min-width: 768px) { 9 | @content 10 | } 11 | } 12 | @else if ($width=="desktop") { 13 | @media (min-width: 992px) { 14 | @content 15 | } 16 | } 17 | @else if ($width=="large") { 18 | @media (min-width: 1200px) { 19 | @content 20 | } 21 | } 22 | @else if ($width=="xlarge") { 23 | @media (min-width: 1600px) { 24 | @content 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/sass/base/variables/_colors.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/base/variables/_colors.scss -------------------------------------------------------------------------------- /src/sass/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/components/.gitkeep -------------------------------------------------------------------------------- /src/sass/layouts/_default.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | display: inline-block; 3 | width: 1em; 4 | height: 1em; 5 | stroke-width: 0; 6 | stroke: currentColor; 7 | fill: currentColor; 8 | } 9 | -------------------------------------------------------------------------------- /src/sass/pages/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/pages/.gitkeep -------------------------------------------------------------------------------- /src/sass/partials/_footer.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/partials/_footer.scss -------------------------------------------------------------------------------- /src/sass/partials/_header.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/partials/_header.scss -------------------------------------------------------------------------------- /src/sass/partials/_sidebar.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yasinatesim/frontend-starter-kit-with-gulp/b593ae21f12069baf11e25d745bc2c9ca50d3f06/src/sass/partials/_sidebar.scss -------------------------------------------------------------------------------- /src/sass/themes/blue.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } -------------------------------------------------------------------------------- /src/sass/themes/green.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /src/sass/themes/red.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /src/sass/vendors/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v4.2.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | 8 | html { 9 | box-sizing: border-box; 10 | -ms-overflow-style: scrollbar; 11 | } 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: inherit; 17 | } 18 | 19 | @import "bootstrap/functions"; 20 | @import "bootstrap/variables"; 21 | 22 | @import "bootstrap/mixins/breakpoints"; 23 | @import "bootstrap/mixins/grid-framework"; 24 | @import "bootstrap/mixins/grid"; 25 | 26 | @import "bootstrap/grid"; 27 | @import "bootstrap/utilities/display"; 28 | @import "bootstrap/utilities/flex"; 29 | @import "bootstrap/utilities/spacing"; -------------------------------------------------------------------------------- /src/sass/vendors/bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v4.2.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2018 The Bootstrap Authors 4 | * Copyright 2011-2018 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | 8 | @import "bootstrap/functions"; 9 | @import "bootstrap/variables"; 10 | @import "bootstrap/mixins"; 11 | @import "bootstrap/root"; 12 | @import "bootstrap/reboot"; 13 | @import "bootstrap/type"; 14 | @import "bootstrap/images"; 15 | @import "bootstrap/code"; 16 | @import "bootstrap/grid"; 17 | @import "bootstrap/tables"; 18 | @import "bootstrap/forms"; 19 | @import "bootstrap/buttons"; 20 | @import "bootstrap/transitions"; 21 | @import "bootstrap/dropdown"; 22 | @import "bootstrap/button-group"; 23 | @import "bootstrap/input-group"; 24 | @import "bootstrap/custom-forms"; 25 | @import "bootstrap/nav"; 26 | @import "bootstrap/navbar"; 27 | @import "bootstrap/card"; 28 | @import "bootstrap/breadcrumb"; 29 | @import "bootstrap/pagination"; 30 | @import "bootstrap/badge"; 31 | @import "bootstrap/jumbotron"; 32 | @import "bootstrap/alert"; 33 | @import "bootstrap/progress"; 34 | @import "bootstrap/media"; 35 | @import "bootstrap/list-group"; 36 | @import "bootstrap/close"; 37 | @import "bootstrap/toasts"; 38 | @import "bootstrap/modal"; 39 | @import "bootstrap/tooltip"; 40 | @import "bootstrap/popover"; 41 | @import "bootstrap/carousel"; 42 | @import "bootstrap/spinners"; 43 | @import "bootstrap/utilities"; 44 | @import "bootstrap/print"; 45 | -------------------------------------------------------------------------------- /src/sass/vendors/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: $close-font-size + $alert-padding-x * 2; 31 | 32 | // Adjust close link position 33 | .close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | padding: $alert-padding-y $alert-padding-x; 38 | color: inherit; 39 | } 40 | } 41 | 42 | 43 | // Alternate styles 44 | // 45 | // Generate contextual modifier classes for colorizing the alert. 46 | 47 | @each $color, $value in $theme-colors { 48 | .alert-#{$color} { 49 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/sass/vendors/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | @include border-radius($badge-border-radius); 16 | 17 | @at-root a#{&} { 18 | @include hover-focus { 19 | text-decoration: none; 20 | } 21 | } 22 | 23 | // Empty badges collapse automatically 24 | &:empty { 25 | display: none; 26 | } 27 | } 28 | 29 | // Quick fix for badges in buttons 30 | .btn .badge { 31 | position: relative; 32 | top: -1px; 33 | } 34 | 35 | // Pill badges 36 | // 37 | // Make them extra rounded with a modifier to replace v3's badges. 38 | 39 | .badge-pill { 40 | padding-right: $badge-pill-padding-x; 41 | padding-left: $badge-pill-padding-x; 42 | @include border-radius($badge-pill-border-radius); 43 | } 44 | 45 | // Colors 46 | // 47 | // Contextual variations (linked badges get darker on :hover). 48 | 49 | @each $color, $value in $theme-colors { 50 | .badge-#{$color} { 51 | @include badge-variant($value); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/sass/vendors/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | list-style: none; 7 | background-color: $breadcrumb-bg; 8 | @include border-radius($breadcrumb-border-radius); 9 | } 10 | 11 | .breadcrumb-item { 12 | // The separator between breadcrumbs (by default, a forward-slash: "/") 13 | + .breadcrumb-item { 14 | padding-left: $breadcrumb-item-padding; 15 | 16 | &::before { 17 | display: inline-block; // Suppress underlining of the separator in modern browsers 18 | padding-right: $breadcrumb-item-padding; 19 | color: $breadcrumb-divider-color; 20 | content: $breadcrumb-divider; 21 | } 22 | } 23 | 24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 25 | // without `