Merge branch 'landing-page'

app/assets/js/App.js

@@ -0,0 +1,3 @@
+import MobileMenu from './modules/MobileMenu';
+
+var mobileMenu = new MobileMenu();

app/assets/js/Vendor.js

@@ -0,0 +1 @@
+import '../temp/modernizr';  

app/assets/js/modules/MobileMenu.js

@@ -0,0 +1,26 @@
+import $ from 'jquery';
+
+class MobileMenu{
+
+	constructor(){
+		this.siteHeader = $(".site-header");
+		this.menuIcon = $(".site-header__menu-icon");
+		this.menuContent = $(".site-header__menu-content");
+		this.siteHeaderLogo= $(".site-header__logo");
+		this.events();
+	}
+
+	events(){
+		this.menuIcon.click(this.toggleTheMenu.bind(this)); 
+	}
+
+	toggleTheMenu(){
+		this.menuContent.toggleClass("site-header__menu-content--is-visible");
+		this.siteHeader.toggleClass("site-header--is-expanded");
+		this.menuIcon.toggleClass("site-header__menu-icon--close-x");
+		this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg");
+
+	}
+}
+ 
+export default MobileMenu;

app/assets/scss/base/_fonts.scss

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
+}

app/assets/scss/base/_mixins.scss

@@ -9,3 +9,11 @@
 @mixin atLarge {
 	@media (min-width: 1200px) { @content };
 }
+
+@mixin clearfix {
+	&::after{
+		content: "";
+		clear: both;
+		display: table;
+	}
+}

app/assets/scss/modules/_btn.scss

@@ -0,0 +1,18 @@
+.btn{
+	background-color: #00ab00;;
+	color: #fff;
+	text-decoration: none;
+	padding: .75rem 1.2rem;
+	display: inline-block;
+	border-radius: 30px;
+
+	&--large {
+		padding: 1.1rem 1.9rem;
+
+		@include atSmall(){
+			font-size: 1.25rem;
+		}
+	}
+
+
+} 

app/assets/scss/modules/_large-hero.scss

@@ -0,0 +1,74 @@
+.large-hero {
+	border-bottom: 10px solid white;
+	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+	position: relative;
+
+	&__image{
+		display: block;
+	}
+
+	&__text-content {
+		padding-top: 88px;
+		position: absolute;
+		top: 50%;
+		left: 0px;
+		width: 100%;
+		transform: translateY(-50%);
+		text-align: center;
+
+		@include atMedium(){
+			padding-top: 60px;
+		}
+	}
+
+	&__title {
+		font-family: "CocogooseBold";
+		color: white;
+		font-size: 2.8rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 3.2rem;
+		} 
+
+		@include atMedium(){
+			font-size: 4.8rem;
+		} 
+
+	}
+
+	&__subtitle {
+		// font-family: "CocogooseNormal";
+		font-weight: 400;
+		color: white;
+		font-size: 1.5rem;
+		margin: 0;
+
+		@include atSmall(){
+			font-size: 1.8rem;
+		}
+
+		@include atMedium(){
+			font-size: 2.4rem;
+		} 
+	}
+
+	&__description {
+		color: #FFF;
+		font-weight: 00;
+		font-size: 1.1rem; 
+		max-width: 50rem;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include atSmall(){
+			font-size: 1.3rem;
+		}
+
+		@include atMedium(){
+			font-size: 1.875rem;
+		} 
+	}
+
+
+}

app/assets/scss/modules/_primary-nav.scss

@@ -0,0 +1,62 @@
+.primary-nav{
+	padding-top: 10px;
+	
+	@include atMedium(){
+		padding: 31px 0px;
+	}
+
+	&--pull-right{
+		@include atMedium(){
+			float: right;
+		}
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+
+		@include clearfix();
+	}
+
+	li{
+		list-style: none;
+		display: inline-block;
+		padding-right: 7px;
+
+		@include atMedium(){
+			float: left;
+			display: block;
+			padding-right: 20px;
+
+		}
+	}
+
+	li:last-child {
+		padding-right: 0;
+
+		@include atMedium(){
+			padding-right: 20px;
+		}
+	}
+
+	a{
+		color:  #fff;
+		font-weight: 400;
+		text-decoration: none;
+		display: block;
+		padding: 5px 8px;
+		font-size: .8rem;
+		background:rgba(black, .5);
+		border-radius: 30px;
+
+		@include atMedium(){
+			background:transparent;
+			font-size: 1.10rem;
+			padding: 12px 0;
+
+			&.is-current-link {
+				color: #fabb69;
+			}
+		}
+	}
+}

app/assets/scss/modules/_site-header.scss

@@ -0,0 +1,152 @@
+.site-header{
+	position: fixed;
+	width: 100%;
+	z-index: 2;
+	transition: background-color .3s ease-out;
+
+	&--is-expanded {
+		background-color: orange;
+		padding-bottom: 18px;
+	}
+	
+	@include atMedium(){
+		position: absolute;
+		position: fixed;
+		background-color: rgba(#000, 0.4);
+	}
+
+	&__btn-container{
+		@include atMedium(){
+			padding: 32px 0px 32px 0px;
+			float: right;
+		}
+	}
+
+	&__language{
+		margin: 13px auto 5px auto;
+		border-radius: 15px;
+		overflow: hidden;
+		width: 25px;
+		height: 25px;
+
+		@include atMedium(){
+			margin: 40px 20px 0px 0px;
+			float: right;
+		}
+	}
+
+
+	&__menu-icon{
+		width: 20px;
+		height: 19px;
+		position: absolute;
+		z-index: 10;
+		top: 10px;
+		right: 10px;
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 20px;
+			height: 3px;
+			background: #FFF;
+			transform-origin: 0 0;
+			transition: transform .3s ease-out;
+		}
+
+		&__middle {
+			position: absolute;
+			top: 8px;
+			left: 0;
+			width: 20px;
+			height: 3px;
+			background: #FFF;
+			transition: all .3s ease-out;
+			transform-origin: 0 50%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 20px;
+			height: 3px;
+			background: #FFF;
+			transform-origin: 0 100%;
+			transition: transform .3s ease-out;
+		}
+
+		@include atMedium {
+			display: none;
+		}
+	}
+
+	&__menu-icon--close-x {
+		&::before {
+			transform: rotate(45deg) scaleX(1.25);
+		}
+
+		.site-header__menu-icon__middle{
+			transform: scaleX(0);
+			opacity: 0;
+		}
+
+		&::after {
+			transform: rotate(-45deg) scaleX(1.25) translateY(1px);
+
+		}
+	}
+
+	&__menu-content{
+		opacity: 0;
+		transform: scale(1.2);
+		transtion: all .3s ease-out;
+		position: relative;
+		z-index: -10;
+		padding-top: 90px;
+		text-align: center;
+
+		&--is-visible{
+			transform: scale(1);
+			opacity: 1;
+			z-index: 1;
+		}
+
+		@include atMedium(){
+			opacity: 1;
+			z-index: 1;
+			padding-top: 0;
+			transform: scale(1); 
+		}
+	}
+
+	&__logo{
+		position: absolute;
+		top: 0px;
+		padding: 5px 15px;
+		left: 50%;
+		transform-origin: 50% 0%;
+		transform: translateX(-50%) scale(.8);
+		transition: transform .3s ease-out;
+		background-color: rgba(black, 0.5);
+
+		&--orange-bg {
+			transition: background-color .3s ease-out;
+			background-color: orange;
+		}
+
+		@include atMedium(){
+			padding: 0;
+			top: 3px;
+			position: relative;
+			float: left;
+			left: auto;
+			transform: translateX(0);
+			background-color: rgba(black, 0);
+		}
+	}
+
+}

app/assets/scss/modules/_wrapper.scss

@@ -0,0 +1,12 @@
+.wrapper{
+	overflow: hidden;
+	padding-left: 18px;
+	padding-right: 18px;
+	max-width: 1300px;
+	margin-left: auto;
+	margin-right: auto;
+
+	&--medium{
+		max-width: 976px;
+	}
+}

app/assets/scss/style.scss

@@ -1,6 +1,12 @@
 @import './base/_normalize';
 @import './base/variables';
+@import './base/fonts';
 @import './base/global';
 @import './base/mixins';
+@import './modules/site-header';
+@import './modules/primary-nav';
+@import './modules/wrapper';
+@import './modules/large-hero';
+@import './modules/btn';
 
 

app/index.html

@@ -4,45 +4,65 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Bio Bulk Bende</title>
-	<meta name="keywords" content="Bio, Bulk, Bende, Food, Cooperative">
-	<meta name="description" content="Bio Bulk Bende is a food cooperative.">
+	<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
+	<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
+
+	  <!-- build:js assets/scripts/Vendor.js -->
+	  <script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
+	  <!-- endbuild -->
 </head>
 <body>
 
 	<!-- HEADER -->
-	<header>
-		<div>
-			<img src="#" alt="BBB logo">
-		</div>
-
-		<div>
-			<div>
-				<a href="#" class="btn">Join us!</a>
+	<header class="site-header">
+		<div class="wrapper">
+			<div class="site-header__logo">
+				<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">			
 			</div>
 
-			<nav>
-				<ul>
-					<li><a href="#about-us">About us</a></li>
-					<li><a href="#how-it-works">How it works</a></li>
-					<li><a href="#agenda">Agenda</a></li>
-					<li><a href="#members-area">Members area</a></li>
-				</ul>
-			</nav>
+			<div class="site-header__menu-icon">
+				<div class="site-header__menu-icon__middle"></div>
+			</div>
+
+			<div class="site-header__menu-content">
+				<div class="site-header__btn-container">
+					<a href="#" class="btn ">Place your Order</a>
+				</div>
+
+				<div class="site-header__language">
+					<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
+				</div>
+
+				<nav class="primary-nav primary-nav--pull-right">
+					<ul>
+						<li><a href="#about-us">About us</a></li>
+						<li><a href="#how-it-works">How it works</a></li>
+						<li><a href="#agenda">Agenda</a></li>
+						<li><a href="#members-area">Members area</a>
+					</ul>
+				</nav>
+			</div>
 		</div>
 	</header>
 
 
 	<!-- STARTING SECTION -->
-	<div>
-		<img src="#" alt="A cool hero image">
+	<div class="large-hero">
 
-		<div>
-			<h1 class="large-hero__title">Bio Bulke Bende</h1>
-			<h2 class="large-hero__subtitle">Organic autonomous foodcoop, every 1<sup>st</sup> Monday of the month.</h2>
-			<p class="large-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.n</p>
-			<p><a href="#" class="btn">Join us!</a></p>
+		<picture>
+			<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
+			<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
+			<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
+			<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
+		</picture>
+		
+		<div class="large-hero__text-content">
+			<h1 class="large-hero__title">bio bulke bende</h1>
+			<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
+			<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
+			<p><a href="#" class="btn btn--large">Join us!</a></p>
 		</div>
 	</div>
 
@@ -75,6 +95,8 @@
 	</footer>
 
 		<!-- MODAL -->
-
+	<!-- build:js assets/scripts/App.js -->
+	<script type="text/javascript" src="./temp/scripts/App.js"></script>
+	<!-- endbuild -->
 </body>
 </html>

app/temp/scripts/Vendor.js

@@ -0,0 +1 @@
+!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);

app/temp/styles/style.css

@@ -304,6 +304,22 @@ template {
 [hidden] {
   display: none; }
 
+@font-face {
+  font-family: "CocogooseNormal";
+  src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseLight";
+  src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseBold";
+  src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: "CocogooseExtra";
+  src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
+
 body {
   font-family: 'Roboto', sans-serif;
   color: #333; }
@@ -312,4 +328,239 @@ img {
   max-width: 100%;
   height: auto; }
 
+.site-header {
+  position: fixed;
+  width: 100%;
+  z-index: 2;
+  transition: background-color .3s ease-out; }
+  .site-header--is-expanded {
+    background-color: orange;
+    padding-bottom: 18px; }
+  @media (min-width: 800px) {
+    .site-header {
+      position: absolute;
+      position: fixed;
+      background-color: rgba(0, 0, 0, 0.4); } }
+  @media (min-width: 800px) {
+    .site-header__btn-container {
+      padding: 32px 0px 32px 0px;
+      float: right; } }
+  .site-header__language {
+    margin: 13px auto 5px auto;
+    border-radius: 15px;
+    overflow: hidden;
+    width: 25px;
+    height: 25px; }
+    @media (min-width: 800px) {
+      .site-header__language {
+        margin: 40px 20px 0px 0px;
+        float: right; } }
+  .site-header__menu-icon {
+    width: 20px;
+    height: 19px;
+    position: absolute;
+    z-index: 10;
+    top: 10px;
+    right: 10px; }
+    .site-header__menu-icon::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transform-origin: 0 0;
+      transition: transform .3s ease-out; }
+    .site-header__menu-icon__middle {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transition: all .3s ease-out;
+      transform-origin: 0 50%; }
+    .site-header__menu-icon::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 20px;
+      height: 3px;
+      background: #FFF;
+      transform-origin: 0 100%;
+      transition: transform .3s ease-out; }
+    @media (min-width: 800px) {
+      .site-header__menu-icon {
+        display: none; } }
+  .site-header__menu-icon--close-x::before {
+    transform: rotate(45deg) scaleX(1.25); }
+  .site-header__menu-icon--close-x .site-header__menu-icon__middle {
+    transform: scaleX(0);
+    opacity: 0; }
+  .site-header__menu-icon--close-x::after {
+    transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
+  .site-header__menu-content {
+    opacity: 0;
+    transform: scale(1.2);
+    transtion: all .3s ease-out;
+    position: relative;
+    z-index: -10;
+    padding-top: 90px;
+    text-align: center; }
+    .site-header__menu-content--is-visible {
+      transform: scale(1);
+      opacity: 1;
+      z-index: 1; }
+    @media (min-width: 800px) {
+      .site-header__menu-content {
+        opacity: 1;
+        z-index: 1;
+        padding-top: 0;
+        transform: scale(1); } }
+  .site-header__logo {
+    position: absolute;
+    top: 0px;
+    padding: 5px 15px;
+    left: 50%;
+    transform-origin: 50% 0%;
+    transform: translateX(-50%) scale(0.8);
+    transition: transform .3s ease-out;
+    background-color: rgba(0, 0, 0, 0.5); }
+    .site-header__logo--orange-bg {
+      transition: background-color .3s ease-out;
+      background-color: orange; }
+    @media (min-width: 800px) {
+      .site-header__logo {
+        padding: 0;
+        top: 3px;
+        position: relative;
+        float: left;
+        left: auto;
+        transform: translateX(0);
+        background-color: rgba(0, 0, 0, 0); } }
+
+.primary-nav {
+  padding-top: 10px; }
+  @media (min-width: 800px) {
+    .primary-nav {
+      padding: 31px 0px; } }
+  @media (min-width: 800px) {
+    .primary-nav--pull-right {
+      float: right; } }
+  .primary-nav ul {
+    margin: 0;
+    padding: 0; }
+    .primary-nav ul::after {
+      content: "";
+      clear: both;
+      display: table; }
+  .primary-nav li {
+    list-style: none;
+    display: inline-block;
+    padding-right: 7px; }
+    @media (min-width: 800px) {
+      .primary-nav li {
+        float: left;
+        display: block;
+        padding-right: 20px; } }
+  .primary-nav li:last-child {
+    padding-right: 0; }
+    @media (min-width: 800px) {
+      .primary-nav li:last-child {
+        padding-right: 20px; } }
+  .primary-nav a {
+    color: #fff;
+    font-weight: 400;
+    text-decoration: none;
+    display: block;
+    padding: 5px 8px;
+    font-size: .8rem;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 30px; }
+    @media (min-width: 800px) {
+      .primary-nav a {
+        background: transparent;
+        font-size: 1.10rem;
+        padding: 12px 0; }
+        .primary-nav a.is-current-link {
+          color: #fabb69; } }
+
+.wrapper {
+  overflow: hidden;
+  padding-left: 18px;
+  padding-right: 18px;
+  max-width: 1300px;
+  margin-left: auto;
+  margin-right: auto; }
+  .wrapper--medium {
+    max-width: 976px; }
+
+.large-hero {
+  border-bottom: 10px solid white;
+  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
+  position: relative; }
+  .large-hero__image {
+    display: block; }
+  .large-hero__text-content {
+    padding-top: 88px;
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center; }
+    @media (min-width: 800px) {
+      .large-hero__text-content {
+        padding-top: 60px; } }
+  .large-hero__title {
+    font-family: "CocogooseBold";
+    color: white;
+    font-size: 2.8rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__title {
+        font-size: 3.2rem; } }
+    @media (min-width: 800px) {
+      .large-hero__title {
+        font-size: 4.8rem; } }
+  .large-hero__subtitle {
+    font-weight: 400;
+    color: white;
+    font-size: 1.5rem;
+    margin: 0; }
+    @media (min-width: 530px) {
+      .large-hero__subtitle {
+        font-size: 1.8rem; } }
+    @media (min-width: 800px) {
+      .large-hero__subtitle {
+        font-size: 2.4rem; } }
+  .large-hero__description {
+    color: #FFF;
+    font-weight: 00;
+    font-size: 1.1rem;
+    max-width: 50rem;
+    margin-left: auto;
+    margin-right: auto; }
+    @media (min-width: 530px) {
+      .large-hero__description {
+        font-size: 1.3rem; } }
+    @media (min-width: 800px) {
+      .large-hero__description {
+        font-size: 1.875rem; } }
+
+.btn {
+  background-color: #00ab00;
+  color: #fff;
+  text-decoration: none;
+  padding: .75rem 1.2rem;
+  display: inline-block;
+  border-radius: 30px; }
+  .btn--large {
+    padding: 1.1rem 1.9rem; }
+    @media (min-width: 530px) {
+      .btn--large {
+        font-size: 1.25rem; } }
+
 /*# sourceMappingURL=style.css.map */

gulpfile.js

@@ -4,6 +4,10 @@ const autoprefixer = require('autoprefixer'),
 postcss = require('gulp-postcss'),
 sass = require('gulp-sass'),
 sourcemaps = require('gulp-sourcemaps'),
+del = require('del'),
+webpack = require('webpack-stream'),
+webpackConfig = require('./webpack.config.js'),
+modernizr = require('gulp-modernizr'),
 browserSync = require('browser-sync').create();
 
 
@@ -58,8 +62,8 @@ const watch = function() {
     		baseDir: './app'
     	}
     });
-    gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask));
-    gulp.watch("./app/assets/js/**/*.js").on('change', browserSync.reload);
+    gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload);
+    gulp.watch("./app/assets/js/**/*.js", {usePolling : true}, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr));
     // gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
     gulp.watch("./app/*.html").on('change', browserSync.reload);
 };

package.json

@@ -9,11 +9,20 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
     "autoprefixer": "^9.8.6",
+    "babel-loader": "^8.1.0",
     "browser-sync": "^2.26.12",
+    "del": "^5.1.0",
     "gulp": "^4.0.2",
+    "gulp-modernizr": "^4.0.1",
     "gulp-postcss": "^8.0.0",
     "gulp-sass": "^4.1.0",
-    "gulp-sourcemaps": "^2.6.5"
+    "gulp-sourcemaps": "^2.6.5",
+    "webpack-stream": "^6.1.0"
+  },
+  "dependencies": {
+    "jquery": "^3.5.1"
   }
 }

webpack.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+
+module.exports = {
+  mode: "production",
+  entry: {
+    App: "./app/assets/js/App.js", 
+    Vendor: "./app/assets/js/Vendor.js"
+  },
+  output: {
+		path: path.resolve(__dirname, "dist/scripts"),
+		filename: "[name].js"
+	},
+	module: {
+    	rules: [
+      		{
+        		test: /\.(js)$/,
+        		exclude: /node_modules/,
+        		use: ['babel-loader']
+      		}
+    	]
+    },
+	resolve: {
+    extensions: ['*', '.js']
+  }
+}