biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2024-12-26 13:05:24 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into master

Browse Source
This commit is contained in:
Dotlinesqr 2020-11-24 18:05:24 +01:00 committed by GitHub
commit 2b67aeb040
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 648 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -1,14 +1,12 @@
## TO START # biobulkbende.org
* make sure you have installed git, node.js and npm > https://biobulkbende.org
* clone this repo
$ git clone https://github.com/biobulkbende/biobulkbende.org Our public website made by members!
* from within the folder install all packages ## Hacking
$ npm install - Make sure you have installed git, node.js and npm
- Clone this repo: `git clone https://github.com/biobulkbende/biobulkbende.org`
* run gulp for automation - From within the folder install all packages: `npm install`
- Run gulp for automation: `gulp watch`
$ gulp watch

729
app/index.html
View File

@ -1,246 +1,521 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bio Bulk Bende</title> <title>Biobulkbende</title>
<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative"> <meta
<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative ."> name="keywords"
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'> content="Biobulkbende, Organic, Autonomous, Food, Cooperative"
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css"> />
<meta
name="description"
content="The first organic autonomous foodcoop in Rotterdam."
/>
<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 --> <!-- build:js assets/scripts/Vendor.js -->
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script> <script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body> <body>
<!-- HEADER -->
<header class="site-header">
<div class="wrapper">
<div class="site-header__logo">
<!-- <span clss="icon icon--logo_white"></span> -->
<img
src="./assets/media/images/logo_white.png"
alt="Biobulkbende logo with an almond"
/>
</div>
<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="https://foodsoft.biobulkbende.org" 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" id="about-us-link">About us</a></li>
<li>
<a href="#how-it-works" id="how-it-works-link">How it works</a>
</li>
<!-- <li><a href="#agenda">Agenda</a></li> -->
<li>
<a href="https://foodsoft.biobulkbende.org">Members area</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- HEADER --> <!-- STARTING SECTION -->
<header class="site-header"> <div class="large-hero">
<div class="wrapper"> <picture>
<div class="site-header__logo"> <source
<!-- <span clss="icon icon--logo_white"></span> --> srcset="./assets/media/images/our_vegetables_large.png 1920w"
<img src="./assets/media/images/logo_white.png" alt="Bio Bulk Bende logo with an almond"> media="(min-width: 1380px)"
</div> />
<div class="site-header__menu-icon"> <source
<div class="site-header__menu-icon__middle"></div> srcset="./assets/media/images/our_vegetables_medium.png 1380w"
</div> media="(min-width: 990px)"
<div class="site-header__menu-content"> />
<div class="site-header__btn-container"> <source
<a href="https://foodsoft.biobulkbende.org" class="btn">Place your Order</a> srcset="./assets/media/images/our_vegetables_small.png 990w"
</div> media="(min-width: 640px)"
<div class="site-header__language"> />
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a> <img
</div> srcset="./assets/media/images/our_vegetables_smaller.png 640w"
<nav class="primary-nav primary-nav--pull-right"> alt="Our fresh vegetables"
<ul> class="large-hero__image"
<li><a href="#about-us" id="about-us-link">About us</a></li> />
<li><a href="#how-it-works" id="how-it-works-link">How it works</a></li> </picture>
<!-- <li><a href="#agenda">Agenda</a></li> --> <div class="large-hero__text-content">
<li><a href="https://foodsoft.biobulkbende.org">Members area</a> <h1 class="large-hero__title">Biobulkbende</h1>
</ul> <h2 class="large-hero__subtitle">
</nav> The first organic autonomous<br />foodcoop in Rotterdam
</div> </h2>
</div> <!-- <p class="large-hero__description">Local and organic food produced by farmers in the Rijnmond region for an affordable price
</header>
<!-- STARTING SECTION -->
<div class="large-hero">
<picture>
<source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)">
<source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)">
<source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)">
<img srcset="./assets/media/images/our_vegetables_smaller.png 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 first organic autonomous<br>foodcoop in Rotterdam</h2>
<!-- <p class="large-hero__description">Local and organic food produced by farmers in the Rijnmond region for an affordable price
Through cooperation, members gain access to high-quality organic products from transparent sources and for fair prices.</p> --> Through cooperation, members gain access to high-quality organic products from transparent sources and for fair prices.</p> -->
<p><a href="#" class="btn btn--large open-modal">Join us!</a></p> <p><a href="#" class="btn btn--large open-modal">Join us!</a></p>
</div> </div>
</div> </div>
<!-- ABOUT US --> <!-- ABOUT US -->
<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding" data-matching-link="#about-us-link"> <div
<div class="wrapper"> id="about-us"
<div class="headline headline--s-width headline--centered headline--b-margin"> class="page-section page-section--red page-section--b-margin page-section--tb-padding"
<h2 class="headline__title ">Biobulkbende is an association completely run by the members. Together we collectively purchase organic food from local producers and distributors.</h2> data-matching-link="#about-us-link"
<h2 class="headline__subtitle">In the context of the current food system, with all its flaws and vulnerabilities, we believe it is important to have more control over the food we buy and consume. Food doesnt have to be treated strictly as a commodity, access to food doesn't have to rely on impenetrable logistics systems, and overwhelming packaging does not have to be the norm. Access to high quality, organic and affordable food is very important for us, and we think that it should be available to everyone.</h2> >
<picture> <div class="wrapper">
<source data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w" media="(min-width: 1380px)"> <div
<source data-srcset="./assets/media/images/about-2_large.jpg 1380w" media="(min-width: 990px)"> class="headline headline--s-width headline--centered headline--b-margin"
<source data-srcset="./assets/media/images/about-2_medium.jpg 990w" media="(min-width: 640px)"> >
<source data-srcset="./assets/media/images/about-2_small.jpg 640w" media="(min-width: 390px)"> <h2 class="headline__title">
<img class="lazyload headline__img" data-srcset="./assets/media/images/about-2_smaller.jpg 390w" alt="The pick up day is arrived!"> Biobulkbende is an association completely run by its members.
</picture> Together we collectively purchase organic food from local producers
<h2 class="headline__title">In 2019, we took matters into our own hands and started the first organic food co-op in Rotterdam. </h2> and distributors.
<h2 class="headline__subtitle">Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op and many others, our co-op is run on a volunteer-basis by all members. As members of this co-op, we all conribute a small part of our time in order to keep our co-op running according to our values: building a community, sharing organic food, sourcing ingredients that is are not produced through any exploitation of labour and are environmentally friendly. We source our fresh food from local farmers and suppliers from the Rijnmond region, while our dry goods and cans come from the organic food supplier De Nieuwe Band / Odin.</h2> </h2>
<picture> <h2 class="headline__subtitle">
<source data-srcset="./assets/media/images/about_1_large.jpg 1380w" media="(min-width: 1380px)"> In the context of the current food system, with all its flaws and
<source data-srcset="./assets/media/images/about_1_medium.jpg 990w" media="(min-width: 990px)"> vulnerabilities, we believe it is important to have more control
<source data-srcset="./assets/media/images/about_1_small.jpg 640w" media="(min-width: 640px)"> over the food we buy and consume. Food does not have to be treated
<img class="lazyload headline__img" data-srcset="./assets/media/images/about_1_smaller.jpg 390w" alt="The pick up day is arrived!"> strictly as a commodity, access to food doesn't have to rely on
</picture> impenetrable logistics systems, and overwhelming packaging does not
<h2 class="headline__subtitle">We come together every first monday of the month from 18:00 to 20:00 at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>. People who are interested to become a member can join the introduction at 19:00.</h2> have to be the norm. Access to high quality, organic and affordable
</div> food is very important for us, and we think that it should be
<div class="row row--gutters"> available to everyone.
<div class="row__medium-8"> </h2>
<div class="video-container"> <picture>
<video class="content--video--right" width="560" height="315" controls> <source
<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4"> data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w"
Your browser does not support the video tag. media="(min-width: 1380px)"
</video> />
</div> <source
</div> data-srcset="./assets/media/images/about-2_large.jpg 1380w"
<div class="row__medium-4"> media="(min-width: 990px)"
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center"> />
<a href="#" class="btn btn--medium open-modal">Join us!</a> <source
<p>We are happy to have new members at the moment. Send us an <a href="mailto: info@biobulkbende.org">email</a> or simply drop by on our next pickup day and say hello! </p> data-srcset="./assets/media/images/about-2_medium.jpg 990w"
<div class="arrow arrow--about arrow--red"></div> media="(min-width: 640px)"
</div> />
</div> <source
</div> data-srcset="./assets/media/images/about-2_small.jpg 640w"
</div> media="(min-width: 390px)"
</div> />
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about-2_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
</picture>
<h2 class="headline__title">
In 2019, we took matters into our own hands and started the first
organic food co-op in Rotterdam.
</h2>
<h2 class="headline__subtitle">
Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op
and many others, our co-op is run on a volunteer-basis by all
members. As members of this co-op, we all contribute a small part of
our time in order to keep our co-op running according to our values:
building a community, sharing organic food, sourcing ingredients
that is are not produced through any exploitation of labour and are
environmentally friendly. We source our fresh food from local
farmers and suppliers from the Rijnmond region, while our dry goods
and cans come from the organic food supplier De Nieuwe Band / Odin.
</h2>
<picture>
<source
data-srcset="./assets/media/images/about_1_large.jpg 1380w"
media="(min-width: 1380px)"
/>
<source
data-srcset="./assets/media/images/about_1_medium.jpg 990w"
media="(min-width: 990px)"
/>
<source
data-srcset="./assets/media/images/about_1_small.jpg 640w"
media="(min-width: 640px)"
/>
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about_1_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
</picture>
<h2 class="headline__subtitle">
We come together every first Monday of the month from 18:00 to 20:00
at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>.
People who are interested to become a member can join the
introduction at 19:00.
</h2>
</div>
<div class="row row--gutters">
<div class="row__medium-8">
<div class="video-container">
<video
class="content--video--right"
width="560"
height="315"
controls
>
<source
src="./assets/media/videos/bbb_video.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row__medium-4">
<div
class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center"
>
<a href="#" class="btn btn--medium open-modal">Join us!</a>
<p>
We are happy to have new members at the moment. Send us an
<a href="mailto: info@biobulkbende.org">email</a> or simply drop
by on our next pick-up day and say hello!
</p>
<div class="arrow arrow--about arrow--red"></div>
</div>
</div>
</div>
</div>
</div>
<!-- HOW IT WORKS -->
<div
id="how-it-works"
class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external"
data-matching-link="#how-it-works-link"
>
<div class="wrapper">
<div
class="how-it-works how-it-works-1 how-it-works--atSmall-t-margin how-it-works--atSmall-centered"
>
<div class="row row--gutters">
<div class="row__medium-3--larger">
<img
class="how-it-works__icon how-it-works__icon--1 lazyload"
data-src="./assets/media/images/foodcoop.png"
/>
</div>
<div class="row__medium-9--smaller">
<div class="headline headline--lt-margin">
<h2 class="headline__title">
What is a <strong>foodcoop?</strong>
</h2>
<h2 class="headline__subtitle">
A co-op is a collective where everyone shares the workload for
the benefit of the whole. A food co-op is a group of people
that buy food from (local) suppliers of their own choosing. A
collective do-it-with-others supermarket.<br /><br />
<b>Biobulkbende</b> members order collectively from local
suppliers and distributors. This means we get as close to the
wholesale prices as possible by cutting out middle men and
ordering in bulk. Biobulkbende exists only through the
cooperation of the members involved. There is no profit and
everyone in the community contributes to the co-op on a
volunteer basis.
</h2>
</div>
</div>
</div>
</div>
<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
</div>
</div>
<!-- HOW IT WORKS --> <div
<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external" data-matching-link="#how-it-works-link"> id="how-it-works-2"
<div class="wrapper"> class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external"
<div class="how-it-works how-it-works-1 how-it-works--atSmall-t-margin how-it-works--atSmall-centered"> data-matching-link="#how-it-works-link"
<div class="row row--gutters"> >
<div class="row__medium-3--larger"> <div class="wrapper">
<img class="how-it-works__icon how-it-works__icon--1 lazyload" data-src="./assets/media/images/foodcoop.png"> <div
</div> class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works"
<div class="row__medium-9--smaller"> >
<div class="headline headline--lt-margin"> <div class="row row--gutters">
<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2> <div class="row__medium-6 row--large-only">
<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from (local) suppliers of their own choosing. A collective do-it-with-others supermarket.<br><br> <img
<b>BioBulkBende</b> members order collectively from local suppliers and distributors. This means we get as close to the wholesale prices as possible by cutting out middle men and ordering in bulk. BioBulkBende exists only through the cooperation of the members involved. There is no profit and everyone in the community contributes to the co-op on a volunteer basis. </h2> class="how-it-works__img lazyload"
</div> data-src="./assets/media/images/member_large.JPG"
</div> alt="Once you are member you are part of our community!"
</div> />
</div> </div>
<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div> <div class="row__medium-6">
</div> <h2 class="how-it-works__title-small">
</div> <span
class="icon icon--membership how-it-works__icon--membership"
></span>
Being a <strong>Member</strong>
</h2>
<p>
As a member of Biobulkbende, you have access to high-quality
organic food, straight from the producers and / or distributors,
at much lower prices than in the supermarket. In return, you pay
a membership fee of €15 and contribute a bit of your time and
energy each month (3h±) to keep our co-op running. As a member
of the co-op you have a say in how the co-op works, how
decisions are made and what direction we take together.
</p>
</div>
</div>
</div>
</div>
<picture>
<source
data-srcset="./assets/media/images/member_medium.JPG 800w"
media="(min-width: 650px)"
/>
<img
data-srcset="./assets/media/images/member_small.JPG 650w"
alt="Once you are member you are part of our community!"
class="how-it-works__img--small-only lazyload"
/>
</picture>
<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external" data-matching-link="#how-it-works-link"> <div class="wrapper">
<div class="wrapper"> <div
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works"> class="how-it-works how-it-works-2 how-it-works--atSmall-centered"
<div class="row row--gutters"> data-matching-link="#how-it-works-link"
<div class="row__medium-6 row--large-only"> >
<img class="how-it-works__img lazyload" data-src="./assets/media/images/member_large.JPG" alt="Once you are member you are part of our community!"> <div class="row row--gutters">
</div> <div class="row__medium-6">
<div class="row__medium-6"> <h2 class="how-it-works__title-small">
<h2 class="how-it-works__title-small"><span class="icon icon--membership how-it-works__icon--membership"></span> Being a <strong>Member</strong> </h2> <span
<p>As a member of Biobulkbende, you have access to high-quality organic food, straight from the producers and / or distributors, at much lower prices than in the supermarket. In return, you pay a membership fee of 15 euros and contribute a bit of your time and energy each month (3h ±) to keep our co-op running. As a member of the co-op you have a say in how the co-op works, how decisions are made and what direction we take together.</p> class="icon icon--workgroup how-it-works__icon--workgroup-order"
</div> ></span>
</div> <strong>Workgroups</strong>
</div> </h2>
</div> <p>
<picture> A work group is a group of members who work together and are
<source data-srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)"> responsible for a specific need of our food co-op. Some examples
<img data-srcset="./assets/media/images/member_small.JPG 650w" alt="Once you are member you are part of our community!" class="how-it-works__img--small-only lazyload"> of work groups are cooking, set-up, membership, orders, finance,
</picture> etc. As a member of our food co-op, joining a work group is a
requirement. When you join, we help you pick what work group
matches your interests, as well as what matches the needs of the
co-op. Members can change work groups when their interests
change.
</p>
</div>
<div class="row__medium-6 row--large-only">
<img
class="how-it-works__img lazyload"
data-src="./assets/media/images/workgroup_large.JPG"
alt="Working togheter is part of being a foocoop!"
/>
</div>
</div>
</div>
</div>
<picture>
<source
data-srcset="./assets/media/images/workgroup_medium.JPG 800w"
media="(min-width: 650px)"
/>
<img
data-srcset="./assets/media/images/workgroup_small.JPG 650w"
alt="The pick up day is arrived!"
class="how-it-works__img--small-only lazyload"
/>
</picture>
<div class="wrapper"> <div class="wrapper">
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered" data-matching-link="#how-it-works-link"> <div class="how-it-works how-it-works-2 how-it-works--atSmall-centered">
<div class="row row--gutters"> <div class="row row--gutters">
<div class="row__medium-6"> <div class="row__medium-6 row--large-only">
<h2 class="how-it-works__title-small"><span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span> <strong>Workgroups</strong> </h2> <img
<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are cooking, set-up, membership, orders, finance, etc. As a member of our food co-op, joining a work group is a requirement. When you join, we help you pick what work group matches your interests, as well as what matches the needs of the co-op. Members can change work groups when their interests change.</p> class="how-it-works__img lazyload"
</div> data-src="./assets/media/images/order_food_large.JPG"
<div class="row__medium-6 row--large-only"> alt="To order your food is easy!"
<img class="how-it-works__img lazyload" data-src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!"> />
</div> </div>
</div> <div class="row__medium-6">
</div> <h2 class="how-it-works__title-small">
</div> <span
<picture> class="icon icon--order how-it-works__icon--workgroup-order"
<source data-srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)"> ></span>
<img data-srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only lazyload"> Ordering <strong>food</strong>
</picture> </h2>
<p>
As soon as you become a member you can place your first order,
yay! Together we order in dry-food (from toothpaste to pasta) in
bulk packaging. Fresh food doesn't have to be in bulk. We also
have items that are popular, like oats, in stock to save costs
and plastic! Payment is done during pick-up day through
bank transfer or pin. For ordering, we use a free software called
<a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. You can
learn more about how to order by joining us at any upcoming
pick-up day.
</p>
</div>
</div>
</div>
</div>
<picture>
<source
data-srcset="./assets/media/images/order_food_medium.JPG 800w"
media="(min-width: 650px)"
/>
<img
data-srcset="./assets/media/images/order_food_small.JPG 650w"
alt="To order your food is easy!"
class="how-it-works__img--small-only lazyload"
/>
</picture>
<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
</div>
<div class="wrapper"> <div id="how-it-works-3" class="page-section">
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered"> <picture>
<div class="row row--gutters"> <source
<div class="row__medium-6 row--large-only"> data-srcset="./assets/media/images/pickup_day_large.jpg 1920w"
<img class="how-it-works__img lazyload" data-src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!"> media="(min-width: 1600px)"
</div> />
<div class="row__medium-6"> <source
<h2 class="how-it-works__title-small"><span class="icon icon--order how-it-works__icon--workgroup-order"></span> Ordering <strong>food</strong> </h2> data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w"
<p>As soon as you become a member you can place your first order, yay! Together we order in dry-food (from toothpaste to pasta) in bulk packaging. Fresh food doesn't have to be in bulk. We also have items that are popular, like oats, in stock to save costs and plastic! Payment is done during pick-up day through banktransfer or pin. For ordering, we use a free software called <a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. You can learn more about how to order by joining us at any upcoming pickup day. </p> media="(min-width: 1050px)"
</div> />
</div> <source
</div> data-srcset="./assets/media/images/pickup_day_small.jpg 990w"
</div> media="(min-width: 700px)"
<picture> />
<source data-srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)"> <source
<img data-srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only lazyload"> data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w"
</picture> media="(min-width: 515px)"
<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div> />
</div> <img
class="lazyload"
data-srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w"
alt="The pick up day is arrived!"
class="large-hero__image"
/>
</picture>
<div class="how-it-works">
<div
class="how-it-works--centered how-it-works--t-margin page-section--tb-padding"
>
<div class="wrapper wrapper--white wrapper--medium">
<div class="how-it-works__last-section how-it-works-3">
<div class="wrapper wrapper--small">
<h2 class="how-it-works__title">
<span
class="icon icon--pickup how-it-works__icon--pickup"
></span
><strong>Pick-up day</strong>
</h2>
<p>
Every 1st Monday of the month, from 18:00 - 20:00 our co-op
comes together to pick up our fresh, local and bulky orders.
The pick-up day is more then just picking up your order. It's
also a chance to meet other members and have an affordable
vegan dinner cooked by our members. During the pick-up day we
have an introduction for people interested to join the co-op.
This takes place at 7pm sharp.
</p>
<p>
<a href="#" class="btn btn--pickupday open-modal"
><b>Join us!</b></a
>
</p>
<p>
Attending the introduction is mandatory so that you learn all
the ins and outs of the co-op right from the start. After you
have joined the introduction you can become a member!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="how-it-works-3" class="page-section"> <!-- AGENDA -->
<picture>
<source data-srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1600px)">
<source data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 1050px)">
<source data-srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 700px)">
<source data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 515px)">
<img class="lazyload" data-srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w" alt="The pick up day is arrived!" class="large-hero__image">
</picture>
<div class="how-it-works ">
<div class="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
<div class="wrapper wrapper--white wrapper--medium">
<div class="how-it-works__last-section how-it-works-3">
<div class="wrapper wrapper--small">
<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Pick-up day</strong></h2>
<p>Every 1st Monday of the month, from 18:00 - 20:00 our co-op comes together to pick up our fresh, local and bulky orders. The pick-up day is more then just picking up your order. It's also a chance to meet other members and have an affordable vegan dinner cooked by our members. During the pick-up day we have an introduction for people interested to join the co-op. This takes place at 7pm sharp. </p>
<p><a href="#" class="btn btn--pickupday open-modal"><b>Join us!</b></a></p>
<p> Attending the introduction is mandatory so that you learn all the ins and outs of the co-op right from the start. After you have joined the introduction you can become a member! </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AGENDA --> <!-- MEMBERS -->
<!-- MEMBERS --> <!-- FOOTER -->
<footer class="footer">
<p>
<span class="site-footer__text"
>Copyright &copy; 2020 Biobulkbende. All rights reserved.</span
>
<a href="#" class="btn btn--l-margin open-modal">Join us!</a>
</p>
</footer>
<!-- FOOTER --> <!-- MODAL -->
<footer class="footer">
<p>
<span class="site-footer__text">Copyright &copy; 2020 Bio Bulk Bende. All rights reserved.</span>
<a href="#" class="btn btn--l-margin open-modal">Join us!</a>
</p>
</footer>
<!-- MODAL --> <div class="modal">
<div class="modal__inner">
<h2 class="modal__title">Join <strong>Biobulkbende</strong></h2>
<div class="wrapper">
<p class="modal__description">
Shoot us an email at
<a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if
you want to join the introduction.
</p>
</div>
<div class="modal"> <div class="social-icons">
<div class="modal__inner"> <a href="#" class="social-icons__icon"
<h2 class="modal__title">Join <strong>Bio Bulk Bende</strong></h2> ><span class="icon icon--facebook"></span
<div class="wrapper"> ></a>
<p class="modal__description">Shoot us an email at <a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if you want to join the introduction.</p> <a href="#" class="social-icons__icon"
</div> ><span class="icon icon--twitter"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--instagram"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--youtube"></span
></a>
</div>
</div>
<div class="modal__close">X</div>
</div>
<div class="social-icons"> <!-- build:js assets/scripts/App.js -->
<a href="#" class="social-icons__icon"><span class="icon icon--facebook"></span></a> <script type="text/javascript" src="./temp/scripts/App.js"></script>
<a href="#" class="social-icons__icon"><span class="icon icon--twitter"></span></a> <!-- endbuild -->
<a href="#" class="social-icons__icon"><span class="icon icon--instagram"></span></a> </body>
<a href="#" class="social-icons__icon"><span class="icon icon--youtube"></span></a>
</div>
</div>
<div class="modal__close">X</div>
</div>
<!-- build:js assets/scripts/App.js -->
<script type="text/javascript" src="./temp/scripts/App.js"></script>
<!-- endbuild -->
</body>
</html> </html>

5
docs/index.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -26,6 +27,7 @@
</div> </div>
<div class="site-header__menu-content"> <div class="site-header__menu-content">
<div class="site-header__btn-container"> <div class="site-header__btn-container">
<a href="https://foodsoft.biobulkbende.org" class="btn">Plaats je bestelling</a> <a href="https://foodsoft.biobulkbende.org" class="btn">Plaats je bestelling</a>
</div> </div>
<div class="site-header__language"> <div class="site-header__language">
@ -46,6 +48,7 @@
<!-- STARTING SECTION --> <!-- STARTING SECTION -->
<div class="large-hero"> <div class="large-hero">
<picture> <picture>
<source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)" /> <source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)" />
<source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)" /> <source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)" />
<source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)" /> <source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)" />
@ -64,6 +67,7 @@
</div> </div>
<!-- ABOUT US --> <!-- ABOUT US -->
<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding" data-matching-link="#about-us-link"> <div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding" data-matching-link="#about-us-link">
<div class="wrapper"> <div class="wrapper">
<div class="headline headline--s-width headline--centered headline--b-margin"> <div class="headline headline--s-width headline--centered headline--b-margin">
@ -129,6 +133,7 @@
</div> </div>
</div> </div>
<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external" data-matching-link="#how-it-works-link"> <div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external" data-matching-link="#how-it-works-link">
<div class="wrapper"> <div class="wrapper">
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works"> <div class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works">

194
gulpfile.js
View File

@ -1,122 +1,152 @@
const gulp = require('gulp'); const gulp = require("gulp");
const { src, dest, series, parallel } = require('gulp'); const { src, dest, series, parallel } = require("gulp");
const autoprefixer = require('autoprefixer'), const autoprefixer = require("autoprefixer"),
postcss = require('gulp-postcss'), postcss = require("gulp-postcss"),
sass = require('gulp-sass'), sass = require("gulp-sass"),
sourcemaps = require('gulp-sourcemaps'), sourcemaps = require("gulp-sourcemaps"),
del = require('del'), del = require("del"),
webpack = require('webpack-stream'), webpack = require("webpack-stream"),
webpackConfig = require('./webpack.config.js'), webpackConfig = require("./webpack.config.js"),
modernizr = require('gulp-modernizr'), modernizr = require("gulp-modernizr"),
svgSprite = require('gulp-svg-sprite'), svgSprite = require("gulp-svg-sprite"),
rename = require('gulp-rename'), rename = require("gulp-rename"),
imagemin = require('gulp-imagemin'), imagemin = require("gulp-imagemin"),
browserSync = require('browser-sync').create(); browserSync = require("browser-sync").create();
// JS TASKS // JS TASKS
function cleanScripts(){ function cleanScripts() {
return del('./app/temp/scripts/App.js'); return del("./app/temp/scripts/App.js");
} }
function modernizrTask(){ function modernizrTask() {
return src(['./app/assets/scss/**/*.scss','./app/assets/js/**/*.js']) return src(["./app/assets/scss/**/*.scss", "./app/assets/js/**/*.js"])
.pipe(modernizr({ .pipe(
"options": [ modernizr({
"setClasses" options: ["setClasses"],
] })
})) )
.pipe(dest('./app/assets/temp')); .pipe(dest("./app/assets/temp"));
} }
function scriptsTask(){ function scriptsTask() {
return src('./app/assets/js/App.js') return (
.pipe(webpack(webpackConfig, null, function(err, stats) { src("./app/assets/js/App.js")
if (err) { console.log(err); }; .pipe(
})) webpack(webpackConfig, null, function (err, stats) {
// .on('error', function (err) { if(err){ console.log(err.message);} }) if (err) {
.pipe(dest('./app/temp/scripts')) console.log(err);
.pipe(browserSync.stream()); }
})
)
// .on('error', function (err) { if(err){ console.log(err.message);} })
.pipe(dest("./app/temp/scripts"))
.pipe(browserSync.stream())
);
} }
function endCleanModernizr(){ function endCleanModernizr() {
return del(['./app/assets/temp']); return del(["./app/assets/temp"]);
} }
// SCSS TASKS // SCSS TASKS
function scssTask() { function scssTask() {
return src('./app/assets/scss/**/*.scss') return src("./app/assets/scss/**/*.scss")
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError)) .pipe(sass().on("error", sass.logError))
.pipe(postcss([ autoprefixer()])) .pipe(postcss([autoprefixer()]))
.pipe(sourcemaps.write('.')) .pipe(sourcemaps.write("."))
.pipe(dest('app/temp/styles')) .pipe(dest("app/temp/styles"))
.pipe(browserSync.stream()); .pipe(browserSync.stream());
} }
// ICONS TASK // ICONS TASK
var config = { var config = {
mode: { mode: {
css: { css: {
sprite: 'sprite.svg', sprite: "sprite.svg",
render: { render: {
css: { css: {
template: './gulp/templates/sprite.css' template: "./gulp/templates/sprite.css",
} },
} },
} },
} },
} };
function beginClean() { function beginClean() {
return del(['./app/temp/sprite', '-/app/assets/media/images/sprites']); return del(["./app/temp/sprite", "-/app/assets/media/images/sprites"]);
} }
function createSprite() { function createSprite() {
return src('./app/assets/media/images/icons/**/*.svg') return src("./app/assets/media/images/icons/**/*.svg")
.pipe(svgSprite(config)) .pipe(svgSprite(config))
.pipe(dest('./app/temp/sprite/')); .pipe(dest("./app/temp/sprite/"));
} }
function copySpriteGraphic() { function copySpriteGraphic() {
return src('./app/temp/sprite/css/**/*.svg') return src("./app/temp/sprite/css/**/*.svg").pipe(
.pipe(dest('./app/assets/media/images/sprites')); dest("./app/assets/media/images/sprites")
);
} }
function copySpriteCSS() { function copySpriteCSS() {
return src('./app/temp/sprite/css/*.css') return src("./app/temp/sprite/css/*.css")
.pipe(rename('_sprite.scss')) .pipe(rename("_sprite.scss"))
.pipe(dest('./app/assets/scss/modules')); .pipe(dest("./app/assets/scss/modules"));
} }
function endClean() { function endClean() {
return del('./app/temp/sprite'); return del("./app/temp/sprite");
} }
// WATCH TASK // WATCH TASK
const watch = function() { const watch = function () {
browserSync.init({ browserSync.init({
notify: false, notify: false,
server: { server: {
baseDir: './app' baseDir: "./app",
} },
}); });
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload); gulp
gulp.watch("./app/assets/js/**/*.js", {usePolling : true}, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr)); .watch(
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask)); "./app/assets/scss/**/*.scss",
gulp.watch("./app/*.html").on('change', browserSync.reload); { 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);
}; };
// IMAGE TASK // IMAGE TASK
function imagesTask(){ function imagesTask() {
return src(['./app/assets/media/images/**/*','./app/temp/media/images/**/*', '!./app/assets/media/images/icons', '!./app/assets/media/images/icons/**/*']) return src([
.pipe(imagemin({ "./app/assets/media/images/**/*",
progressive: true, "./app/temp/media/images/**/*",
interlaced: true, "!./app/assets/media/images/icons",
multipass: true "!./app/assets/media/images/icons/**/*",
})) ])
.pipe(dest('./docs/assets/media/images')); .pipe(
imagemin({
progressive: true,
interlaced: true,
multipass: true,
})
)
.pipe(dest("./docs/assets/media/images"));
} }
exports.watch = watch; exports.watch = watch;
exports.icons = series(beginClean, createSprite, copySpriteGraphic, copySpriteCSS, endClean); exports.icons = series(
beginClean,
createSprite,
copySpriteGraphic,
copySpriteCSS,
endClean
);
exports.images = imagesTask; exports.images = imagesTask;

37
webpack.config.js
View File

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