📦 NEW: Improved codebase

config.js

@@ -0,0 +1,19 @@
+/**
+ * Configuration.
+ *
+ * Project Configuration for gulp tasks.
+ *
+ * In paths you can add <<glob or array of globs>>. Edit the variables as per your project requirements.
+ */
+
+module.exports = {
+	viewSrc: './views/**/*.pug',
+	viewDst: './',
+	styleSrc: './css/style.scss',
+	styleDst: './',
+	outputStyle: 'compressed',
+	viewWatchFiles: './views/**/*.pug',
+	styleWatchFiles: './css/**/*.scss',
+	browserAutoOpen: false,
+	injectChanges: true
+};

css/mixins/display.scss

@@ -0,0 +1,11 @@
+@mixin disp {
+	display: table;
+	width: 100%;
+	margin: 0 auto;
+}
+
+// @mixin disp_prpty {
+// 	display: table;
+// 	width: 100%;
+// 	margin: 0 auto;
+// }

css/partial/base.scss

@@ -29,3 +29,21 @@ h3 {
 .gist .gist-file {
 	border: 0 !important;
 }
+
+/* MAIN CSS */
+
+.main {
+	display: table;
+	width: 100%;
+}
+
+h2 {
+	font-size: 2.5rem;
+}
+
+p {
+	font-size: 1.8rem;
+	max-width: 60rem;
+	margin: 0 auto;
+	line-height: 1.4;
+}

css/partial/footer.scss

@@ -0,0 +1,12 @@
+footer.mb {
+	@include disp; // scss mixin
+	padding: 5rem 5rem 5rem 0;
+	background: #f3edec;
+	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
+}
+
+.mb p {
+	font-size: 1.5rem;
+	max-width: 120rem;
+	/* text-align: left; */
+}

css/partial/steps.scss

@@ -0,0 +1,10 @@
+.steps {
+	margin: 2.5rem 0;
+}
+.step {
+	display: table;
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
+	padding: 2rem;
+}

css/partial/todo.scss

@@ -0,0 +1,15 @@
+.todo {
+	display: table;
+	width: 100%;
+	/* background: #f3edec; */
+	margin: 3rem auto 0;
+	padding: 1rem;
+	max-width: 75rem;
+	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
+}
+
+code {
+	font-size: 1.5rem;
+	line-height: 1.45;
+	text-align: center;
+}

css/partial/top.scss

@@ -1,44 +1,35 @@
 .top {
-	display: table;
-	width: 100%;
-	margin: 0 auto;
+	@include disp; // scss mixin for display properties
+
 	background: tomato;
 	padding: 5rem;
 	text-align: center;
 	min-height: 60vh;
-	background: #ff416c; /* fallback for old browsers */
-	background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c); /* Chrome 10-25, Safari 5.1-6 */
-	background: linear-gradient(
-		to right,
-		#ff4b2b,
-		#ff416c
-	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
+	background: #ff416c;
+	background: linear-gradient(to right, #ff4b2b, #ff416c);
 
-.top_inner {
-	display: table-cell;
-	vertical-align: middle;
-}
+	&_inner {
+		display: table-cell;
+		vertical-align: middle;
+	}
 
-.top h1 {
-	display: table;
-	width: 100%;
-	vertical-align: middle;
-	font-size: 4rem;
-	color: white;
-}
+	h1 {
+		@include disp; // scss mixin for display
+		vertical-align: middle;
+		color: white;
+		font-size: 4rem;
 
-.top h1 > span {
-	display: table;
-	width: 100%;
-	margin: 0 auto 0.5rem;
-}
+		.emoji {
+			@include disp;
+			margin: 0 auto 0.5rem;
+		}
+	}
 
-.top p {
-	display: table;
-	width: 100%;
-	vertical-align: middle;
-	font-size: 1.6rem;
-	color: white;
-	line-height: 1.4;
+	p {
+		@include disp;
+		vertical-align: middle;
+		color: white;
+		font-size: 1.6rem;
+		line-height: 1.4;
+	}
 }

css/style.scss

@@ -7,8 +7,13 @@
 // — VENDORS.
 @import 'vendors/normalize';
 
+// Mixins
+@import 'mixins/display';
+
 // // — PARTIALS.
 @import 'partial/variables'; // Variables file
 @import 'partial/base'; // CSS styles for entire web-page
-@import 'partial/body'; // CSS styles basics
+@import 'partial/steps'; // CSS styles basics
 @import 'partial/top';
+@import 'partial/todo';
+@import 'partial/footer';

gulpfile.js

@@ -4,26 +4,20 @@
  * @author Maedah Batool (https://github.com/maedahbatool)
  */
 
-// Configure.
-const config = {
-	viewSrc: './views/**/*.pug',
-	viewDst: './',
-	styleSrc: './css/style.scss',
-	styleDst: './',
-	outputStyle: 'compressed',
-	viewWatchFiles: './views/**/*.pug',
-	styleWatchFiles: './css/**/*.scss',
-	browserAutoOpen: true,
-	injectChanges: true
-};
+/**
+ * Load Config.
+ *
+ * Customize your project in the config.js file
+ */
+const config = require('./config.js');
 
 const gulp = require('gulp');
 const pug = require('gulp-pug');
 const sass = require('gulp-sass');
 const browserSync = require('browser-sync').create();
 const reload = browserSync.reload;
 var notify = require('gulp-notify'); // Sends message notification to you.
-var plumber = require('gulp-plumber'); // Prevent pipe breaking caused by errors from gulp plugins.
+var plumber = require('gulp-plumber'); // Prevent pipe breaking caused by errors.
 
 /**
  * view
@@ -44,7 +38,8 @@ gulp.task('view', function() {
 				pretty: true
 			})
 		)
-		.pipe(gulp.dest(config.viewDst));
+		.pipe(gulp.dest(config.viewDst))
+		.pipe(notify({ message: '\n\n✅   ===> VIEWS completed!\n\n', onLast: true }));
 });
 
 /**
@@ -63,7 +58,8 @@ gulp.task('style', function() {
 		)
 		.pipe(sass({ outputStyle: config.outputStyle }).on('error', sass.logError))
 		.pipe(gulp.dest(config.styleDst))
-		.pipe(browserSync.stream({ match: '**/*.css' }));
+		.pipe(browserSync.stream({ match: '**/*.css' }))
+		.pipe(notify({ message: '\n\n✅  ===> STYLES completed!\n\n', onLast: true }));
 });
 
 /**
@@ -90,7 +86,7 @@ gulp.task('bSync', function() {
 		// Serve files from the current directory.
 		server: true
 	});
-});
+});˙
 
 /**
  * Default

tip1.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Tip 1</title>
+    <meta name="description" content="This is description.">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Quando" rel="stylesheet">
+  </head>
+  <body>
+    <div class="main"></div>
+  </body>
+</html>
+<div class="top">
+  <div class="top_inner">
+    <h1><span class="emoji">🎯</span><span>Tip 1</span></h1>
+    <p>This is description.</p>
+  </div>
+</div>
+<div class="steps">
+  <div class="step">
+    <h2>#1: Install NodeJS & NPM</h2>
+    <p>
+      BrowserSync is an NPM package, and it needs Node.js to be installed. If you’ve already installed it earlier, just check through
+      the following commands or download and install it from<a href="https://nodejs.org/en/download/">here</a>.
+    </p>
+    <div class="todo">
+      <script src="https://gist.github.com/MaedahBatool/913b0ef676873c1598ad3fd08e27567b.js?file=1.sh"></script>
+    </div>
+  </div>
+  <div class="step">
+    <h2>#2: Install BrowserSync</h2>
+    <p>Next, you’ll install BrowserSync globally by typing the following commands in your terminal.</p>
+    <div class="todo">
+      <script src="https://gist.github.com/MaedahBatool/913b0ef676873c1598ad3fd08e27567b.js?file=2.sh"></script>
+    </div>
+  </div>
+  <div class="step">
+    <h2>#3: Start Running BrowserSync</h2>
+    <p>
+      BrowserSync creates a server for static websites and can be used as a proxy for dynamic sites. Therefore, it defines separate
+      commands for each of these.
+    </p>
+    <div class="todo">
+      <script src="https://gist.github.com/MaedahBatool/913b0ef676873c1598ad3fd08e27567b.js?file=3.sh"></script>
+    </div>
+  </div>
+  <div class="step">
+    <h2>#4: Tunneling</h2>
+    <p>
+      One of the best things which I like about BrowserSync is that you can share a local development site with your teammates
+      over the internet right from your own computer. This is its tunnel option comes into play. Each time you start BrowserSync,
+      just enter the following command:
+    </p>
+    <div class="todo">
+      <script src="https://gist.github.com/MaedahBatool/913b0ef676873c1598ad3fd08e27567b.js?file=4.sh"></script>
+    </div>
+  </div>
+</div>
+<footer class="mb">
+  <p>© 2018 — A project by<a href="https://maedahbatool.com/">Maedah Batool</a> | Say 👋on<a href="https://twitter.com/MaedahBatool">Twitter</a></p>
+</footer>