VB Starter kit Gulp + Webpack + Babel

© by Vlad Beletsky

About this starter kit

This is my desktop starter kit for developing front-end components of sites and front-end interfaces created to simlify my development workflow. The main feature is that the kit uses both in one – we use Webpack with Babel inside Gulp via webpack-stream plugin. You can clone the starter kit from this repository:

https://github.com/vladikslavus/vbstarterkit

Requirements

First you need to install the following tools on your computer:

If you do not have these tools, you need to install them.

Project dependencies installation

To install the project's dependencies, enter the command `npm install` at the command line.

How to use the starter kit

Normal mode: enter `gulp` at the command line. Selective build: enter the task you need at the command line. For example, enter `gulp css_build` to build CSS or `gulp js_build` to build JS. A list of all available tasks can be found in `gulpfile.js`.

A bit of what can be done using this starter kit

Here is almost all we need to build complete modern projects. First I'll show you my custom scripts and vendor plugins that don't need jQuery or Bootsprap libs to use and then I'll show the blocks that use these ones. As for vendor plugins let's check out Simplebar | Swiperjs | Swiped-events | Fullscreen Lightbox | Fontawesome | wow.js plugins installed in our project via npm. Now I'm gonna try to make a humble attempt to create the demo not too boring.

As my Starter kit also builds php files that run on the server side, then I will show you how to create a Single Page Application (SPA) that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest or Fetch when different content is to be shown.

Parallax

Now hurry up, guys, and first let's create a parallax effect on scroll event by using HTML5, CSS3 and vanila JS to meet unidentified flying object that brining us VB Starter kit:

VB Starter kit

In this example сreating this animation we didn't use any library. The behavior of animation objects depends on many factors and must be adjusted manually by using, eg:

  • window.scrollY,
  • window.innerHeight,
  • wrapper.getBoundingClientRect().top,
  • etc.

By manipulating and mixing them with different numbers, you can achieve the desired result.

By the way, I implemented some parallax effects on the header of my site using the same way.

GreenSock Animation Platform (GSAP)

Now you should've got coloured circles to be appeared below when you did first scroll

Now click a circle to transition out

Of course it would be much better to start another Gulp project but I'm so lazy to do it and as my starter kit allows to specify multify entry points to make the current page easier to load for users I'm gonna show you an example of a GSAP website draft as part of the current project in a new window (tab).

Click to open my GSAP website draft

Do you want to use a slider in your app?

No problem. It's simple. Look at these beautiful wild cats:

I use Swiperjs package here. Go to its API Documentation to learn more about all Swiper API and how to control it.

Swiperjs plugin is really cool, however, it has a minor flaw. The fact is that it doesn't have its own popup window support built in. Maybe unfortunately, maybe fortunately. So we need to implement some other third-party library for this purposes. We use Fullscreen Lightbox in this case.

Creating a Chart

Just like humans, tigers can be happy and unhappy. Maybe it depends on the mustache or tail length, or maybe their life quality is probably influenced by some other factors, but we won't talk about that today. We may possibly take some other opportunity of commenting upon this.

Suppose we want to graph the number of happy tigers inhabiting different countries. So the next step's gonna be creating a simple flexible diagram in JavaScript using Chartjs.

Perhaps not all tigers inhabiting these countries got the statistics. I guess that the ones that didn't are probably unhappy. I really hope they will soon be happy too

Numbers growing when scrolling

And now let's take a look at the tigers population growth in the above-mentioned countries increasing from zero to its current point when scrolling. When window.scrollY reaches the block with count-up elements below, the population will begin to grow. If it won't, press F5 button.

If you want to know the most popular tiger name in a particular country, click on a card below

0 India
Aadesh
0 Indonesia
Arief
0 Russia
Arseny
0 Malaysia
Hafiz
0 Cambodia
Arun
0 Nepal
Bibek
0 Bangladesh
Barsha
0 Bhutan
Tshering
0 Myanmar
Htay
0 China
Bao
0 Vietnam
Chung
0 Laos
Khamla

Flip Clock Style Countdown

Lots of landing webpages generally run sale promotions with placing a countdown timer script on their sites to show visitors the end of discount period. Let's imagine that we have a big tiger food store, and now we give our customers a deep discount up to a certain date.

Sidebars and dropdown-menu

Oops! I should have started with that. Anyway, let me show the examples now. Click to view:

Left sidebar
Right sidebar
Dropdown menu

Modal window(s) with custom srollbar

I made a simple modal window below without using any library because I think it's pretty easy to do (you'll find my `magicModals class` in assets/src/j/vblib folder). Then I saw that the browser default scrollbar seemed to be a bit boring. So I made a custom scroll using Simplebar plugin. Let's check it out:

You can create as many buttons (links) to modal windows as you want. All you have to do is import magicmodals.js into your entry point file and instantiate a new magicModals class and apply the launch() method to it:


			import {magicModals} from "./vblib/magicmodals";
			new magicModals({
			  container: '.modal-window', // overlay on the whole window, must have ID
			  openBtn: '.modal-btn',      // tags must have `data-modal-id='*'` custom attribute with modal window ID
			  closeBtn: '.modal-window__close', // tags must also have `data-modal-id='*'` custom attribute with modal window ID
			  scrollbarWidth: scrollbarWidth,   // better get real scrollbar width for our code with getscrollbarwidth.js
			  speed: 300,
			  smartNavbarInstance: mySmartNavbar // if you need to hide/show navbar when open a modal window you have to pass mySmartNavbar instance
			}).launch();

Need fontawesome?

I plugged it in as an npm plugin to our project.

<i class="fab fa-react"></i>
<i class="fab fa-js-square"></i>
<i class="fab fa-sass"></i>
<i class="fab fa-css3-alt></i>

Single Page Application with php build in Gulp

The Single Page Application is a site that doesn't require page refreshing because all the data is loaded by client-side scripts. We will click on the links below, which will trigger AJAX requests (async backend calls), then fetch data from the server and return it to the client side appending to DOM.

As you can see when you make AJAX requests to the server by clicking the links below, the URL of your web application changes even though the page itself is not reloaded, and the title of the document changes too.

Main

Article 1 Article 2 Article 3 Article 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

If you are used to using Bootstrap 5

I use Bootstrap version 5 here because now Jquery is finaly removed from the lib in this version and the lib fully switched to vanilla JS.

Ok, first let's check out its twelve column system:

The fisrt one of five columns
class="col-sm"
The second one of five columns
class="col-sm"
The third one of five columns
class="col-sm"
The fourth one of five columns
class="col-sm-6"
The fifth one of five columns
class="col-sm-6"

Then check out predefined Bootstrap 5 button styles:

Now we are going to build vertically collapsing accordion:

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Tabs:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil odio debitis quaerat quos quam. Id neque quo dolore nostrum inventore amet nobis explicabo accusantium dicta culpa aliquid, officia esse? Doloribus. Totam voluptatem temporibus amet veniam cumque ut soluta? Incidunt officia fuga nesciunt rerum praesentium
Ut beatae, corrupti tempora quia id voluptatem! Odio non beatae laudantium repellat. Voluptatem debitis error consequatur voluptas modi possimus est illum repudiandae? Reiciendis rerum delectus saepe distinctio, similique numquam magnam accusamus deleniti a quam in, iure ducimus magni eveniet quos voluptates tempore esse? Totam voluptatem temporibus amet veniam cumque ut soluta? Incidunt officia fuga nesciunt rerum praesentium delectus autem necessitatibus aut sunt, eaque dolores, aliquid temporibus, at quam ratione doloribus expedita ea reiciendis fugit eius. Quae vel optio, tempore ipsum deserunt dolor fuga et qui, ut porro corrupti?
Amet consectetur adipisicing elit. Placeat cumque nihil repellendus tenetur in voluptate ullam molestiae recusandae illo laudantium quis numquam, blanditiis officiis dolore expedita eligendi sunt consectetur officia. Ex quasi illum officia ullam cumque exercitationem eius neque, voluptates quia modi aut accusantium temporibus ut. Enim aspernatur esse, vero perferendis, delectus, dolore provident voluptatum doloremque nam nihil illo nemo.

Do you whant to use tooltips?

No problem. Just hover your cursor over this link and try to do the same here. Popperjs will do it itself for you. You have to initialize all tooltips by selecting them by their data-bs-toggle attribute:


			[...document.querySelectorAll('[data-bs-toggle="tooltip"]')].map((tooltipTriggerEl)  => {
			  return new bootstrap.Tooltip(tooltipTriggerEl);
			});

Awesome!

That's all concerning this framework here. For more information please visit Bootstrap official site.

By the way, what about highlighting your code on your website?

The npm package called highlight.js is installed here and it makes this problem very simple. Just embed your code inside <pre><code> tags and specify the language in the class of <code> tag. For more information read the highlight.js docs.


			

			  // Paste your JavaScript code in here...

Feel free to contact me