DEV Community: bekdev

Gulp + Nunjucks Automation: Modern Frontend Build Workflow

bekdev — Sat, 18 Oct 2025 17:19:43 +0000

I’ve always loved clean, maintainable workflows — the kind where everything just works.

But after years of trying modern bundlers, frameworks, and endless plugins, I kept coming back to Gulp — simple, flexible, and surprisingly future-proof. Especially for smaller vanilla javascript projects.

So I decided to build my own starter:

A fully automated frontend workflow using Gulp 5 , Nunjucks , and SCSS , designed for developers who want control and clarity — not a black box.

To install and use, go to repo.

You can find the full documentation here.

🚀 Why I Built This

Modern frontend tools can feel heavy and fragile.

You install 50 dependencies, and suddenly your build breaks because one library changed its syntax.

I wanted something lightweight , modular , and predictable — a workflow you can understand at a glance and maintain for years.

That’s what this setup gives you:

Simple folder structure
Task-based build pipeline
Clear file injection logic
And no mysterious magic — just code you can actually read.

✨ Features at a Glance

✅ Gulp 5 task runner (modernized & async-ready)
✅ Nunjucks templating with partials and data files
✅ SCSS + PostCSS for clean, autoprefixed CSS
✅ Babel to transpile modern JavaScript
✅ BrowserSync for instant live reload
✅ SVG to icon font generator — no manual Unicode naming
✅ Readable, modular task files — perfect for learning Gulp

Tested on Node.js 22.20.0 — use this version (via .nvmrc) for maximum compatibility.

📁 Folder Structure

Here’s a quick overview of how everything is organized:

src/
┣ data/
┣ icons/
┣ js/
┣ scss/
┃ ┣ base/
┃ ┣ components/
┃ ┣ pages/
┃ ┣ vendors/
┃ ┗ main.scss
┣ tasks/
┗ templates/
  ┣ includes/
  ┃ ┣ components/
  ┃ ┗ layout/
  ┗ pages/
    ┗ index.njk

dist/
┣ assets/
┃ ┣ css/
┃ ┣ fonts/
┃ ┃ ┗ icons/
┃ ┣ images/
┃ ┗ js/
┗ index.html

🖼️ Important:

You’ll need to manually add your images and fonts into dist/assets/images and dist/assets/fonts.

🧩 Getting Started

Clone the repository:

git clone https://github.com/serhatbek/gulp-nunjucks-template.git ./my-project
cd my-project

⚡ Install and use node.js v22.20.0 to ensure long-term stability. If nvm is installed and you already have v22.20.0, you can:

nvm use

The .nvmrc file in the project specifies the correct Node.js version.

✏️ Change the project name in the package.json file to your project name. This is important because later Gulp will inject JS and CSS files automatically using your project name.

From this:

{
  "name": "gulp-nunjucks-template",
  "version": "1.0.0",
  "main": "gulpfile.js",
}

To whatever your project name is:

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "gulpfile.js",
}

📦 Install dependencies

npm install

🏃 Start development server

npm run dev

This will:

🧹 Clean the build folders (except 'dist/assets/images' and 'dist/assets/fonts')
💅 Compile SCSS and JS
🔤 Generate font icons from SVG files
🖼️ Render Nunjucks templates
🌐 Start live-reloading browser

💡 Best Practices

Use Node.js 22.20.0 for maximum compatibility
Run npm run icons whenever you add, remove, or rename an SVG icon
Structure your SCSS and templates modularly (base/, components/, layouts/)
Use nvm or .nvmrc to lock Node version across systems

🧩 Troubleshooting

Problem	Solution
Build fails or icons missing	Check for invalid or corrupted SVGs in`src/icons/`
Icons not displaying	Run`npm run icons` again after changing icons
Live reload not working	Ensure`npm run dev` is running and not blocked by firewall
Styles not updating	Confirm your SCSS files are saved and inside`src/scss/`

Made with ❤️ for reusability.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you're on a generous day, you can even buy me a coffee. 🙃

Productivity Adventure with Notion

bekdev — Wed, 19 Feb 2025 14:25:55 +0000

In our daily lives, staying productive, mindful, and disciplined can sometimes feel like a chore. We set goals 🎯, track habits 📊, and try to stay consistent, but without the right system, it’s easy to lose motivation. That’s exactly why I created this Notion template—a gamified approach to daily productivity and self-improvement. 🎮

🎨 The Idea Behind This Template

I’ve always believed that structure and creativity can go hand in hand. The best systems are the ones that don’t feel like systems at all—they just naturally fit into your life. This template is designed to help you stay on track while making daily tasks engaging, rewarding, and fun. Whether you want to cultivate mindfulness 🧘, improve productivity ⚡, or develop long-term habits 🔄, this template provides a framework that feels less like a checklist and more like an adventure. 🏆

📦 What’s Inside the Template?

This template is built to help you optimize your day with features that bring balance to productivity and self-reflection. Here’s a breakdown of what’s included:

🎯 Gamified Daily Tasks & Rewards: Your tasks come with a built-in reward system to keep you engaged and motivated.
📖 Daily Journal & Reflection: Capture your thoughts, track progress, and gain insights into your journey.
📅 Events Calendar: Never miss an important event or deadline—stay organized with ease.
💡 Mindful Moments Section: Includes daily gratitude 🙏, affirmations 💬, self-checks for discipline 🎭, and vision tracking 🌟.
📚 Habit Tracker & Book Tracker: Build consistency and keep track of the books you’re reading.
⏳ Pomodoro Timer & Learning Tracker: Stay focused and track your learning progress efficiently.
🎯 Goal Tracker: Set meaningful goals and track your progress toward achieving them.

🎮 Why Gamification Works

Gamification taps into our intrinsic motivation by turning tasks into challenges, progress into achievements, and consistency into streaks. Instead of seeing your to-do list as just another obligation, you begin to see it as a personal journey toward self-improvement. 🔥

For example, in this template, when you complete tasks, you earn small rewards 🏅. These rewards serve as positive reinforcement, making it easier to maintain momentum and build strong habits over time. 💪

🎯 Who Is This Template For?

This template is for anyone who:

✅ Struggles with staying motivated in daily tasks
✅ Wants to track progress in a fun and engaging way
✅ Enjoys self-improvement, mindfulness, and productivity systems
✅ Needs a structured yet flexible approach to managing life

Whether you're a student 🎓, freelancer 💻, entrepreneur 🚀, or someone looking to enhance your daily routine, this template will help you bring focus, motivation and balance to your life. 🌈

🏁 Get Started Today

If you’re looking for a way to make daily productivity more enjoyable, this template is for you. It’s time to stop feeling overwhelmed and start making progress—one rewarding step at a time. 🎉

I’d love to hear your thoughts and experiences using this template! Feel free to reach out, share feedback, or let me know how it’s working for you. 💬

Let’s level up our daily lives together! 🚀

Click here to get my Productivity Adventure Notion template, it's FREE.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you’re on a generous day, you can even buy me a coffee. 🙃

Maximize Your Workflow with These SASS Mixins and Functions

bekdev — Thu, 10 Oct 2024 14:55:05 +0000

Hey there! If you’ve ever found yourself writing the same CSS over and over, or if you’ve struggled with making your design responsive across different screen sizes, you’re in the right place. In this article, I’m going to share some really useful SASS mixins and functions that have made my workflow much smoother. These little tools have saved me so much time and effort by keeping my code DRY (Don’t Repeat Yourself) and making things like responsive design, layering, and cache busting a breeze.

Whether it’s converting pixels to rems, handling z-index for cleaner layouts, or creating reusable helper classes, I’ve got something here for you. Let me walk you through these mixins and functions that you can easily drop into your project and start using right away.

The examples I’ll show can be improved or expanded upon, and you can find even more diverse examples online. But these are the ones I personally use the most. Let’s dive in!

Pixel To Rem Function
Media Queries Mixin For Responsive Design
Z-Index Function For Hierarchical Layering
Cache Busting Single or Multiple Background Images
Cache Busting Fonts
Absolute Positioning
Text Ellipsis
Item Hover
Helper Classes For Reusability

Pixel To Rem Function

Convert pixel values to rem.

@function rem($pixel) {
  $convertedValue: ($pixel / 16) + rem;
  @return $convertedValue;
}

// Usage
div {
  font-size: rem(32);
  width: rem(600);
}

Media Queries Mixin For Responsive Design

A simple, easy to read mixin usage for responsive design with media queries.

@mixin small {
  @media only screen and (max-width: 768px) {
    @content;
  }
}

@mixin medium {
  @media only screen and (max-width: 992px) {
    @content;
  }
}

@mixin large {
  @media only screen and (max-width: 1200px) {
    @content;
  }
}

// Usage
.title {
  font-size: 16px;

  @include small {
    font-size: 14px;
  }
  @include medium {
    font-size: 18px;
  }

  @include large {
    font-size: 20px;
  }
}

Z-Index Function For Hierarchical Layering

This setup ensures your layout has a clean hierarchy of visual layers while keeping it flexible and scalable.

$z-index: (
  dropdown: 6,
  mobileMenu: 7,
  stickyHeader: 8,
  tooltip: 10,
  modalBackdrop: 11,
  modal: 12,
  header: 15,
  notificationToast: 18,
  spinner: 20,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

.header {
  z-index: z-index(header);
}

Cache Busting Single or Multiple Background Images

Cache background images using an id

$imageId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url("#{$url}?v=#{$imageId}"),
      comma
    );
  }
  background-image: $backgroundImages;
}

//   Single Image Usage

.hero {
  @include cacheBustBgImages("asset/images/image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// Multiple Image Usage

.hero {
  @include cacheBustBgImages(
    "asset/images/image.png",
    "asset/images/other-image.png"
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Cache Busting Fonts

Cache app fonts using an id.

$fontId: unique_id();

@font-face {
  font-family: "Custom Fonts";
  src: url("asset/images/custom-font.eot?v=#{$fontId}");
  src: url("asset/images/custom-font.eot?v=#{$fontId}#iefix") format("embedded-opentype"),
    url("asset/images/custom-font.woff2?v=#{$fontId}") format("woff2"),
    url("asset/images/custom-font.woff?v=#{$fontId}") format("woff"), url("asset/images/custom-font.ttf?v=#{$fontId}")
      format("truetype"),
    url("asset/images/custom-font.svg?v=#{$fontId}#svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Absolute Positioning

A mixin for absolute positioning elements. Top, right, bottom and left order is is important.

@mixin absolute($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Usage

div {
  @include absolute(100px, 100px, auto, auto);
}

Text Ellipsis

Truncate overflowing text with an ellipsis.

@mixin text-ellipsis($max-width: 100%) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: $max-width;
}

// Usage
.element {
  @include text-ellipsis(200px);
}

Item Hover

For hover states, allowing you to pass in specific properties.

@mixin item-hover($color, $bg-color) {
  &:hover {
    color: $color;
    background-color: $bg-color;
  }
}

// Usage
.button {
  @include item-hover(white, black);
}

Helper Classes For Reusability

// Center child elements both vertically and horizontally
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Center element both horizontally and vertically
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center text
.text-center {
  text-align: center;
}

// Hide element
.hidden {
  display: none;
}

// Hide element on desktop view
.d-none-desktop {
  @media screen and (min-width: 680px) {
    display: none;
  }
}

// Hide element on mobile view
.d-none-mobile {
  @media screen and (max-width: 680px) {
    display: none;
  }
}

// Add border radius to element
.border-radius {
  border-radius: 10px;
}

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it too. If you’re on a generous day, you can even buy me a coffee. 🙃

Node.js Management With NVM

bekdev — Wed, 25 Sep 2024 16:46:02 +0000

If you ever find yourself juggling different versions of Node.js for various projects, I highly recommend using NVM (Node Version Manager). It's a simple tool that makes switching between Node.js versions super easy. Whether you're working on older projects or testing new features, NVM lets you manage multiple versions without any hassle. It’s been a real lifesaver for me. For installation and more detail check nvm repo.

With just a few commands, you can install, switch, or list Node.js versions. For example:

Check current version
List installed node versions
Install LTS version
Install specific version
Switch between installed node versions
Uninstall specific version
Create .nvmrc file with current node version

Check current version.

nvm version

List installed node versions.

nvm ls

nvm list

Install LTS version.

nvm install lts

Install specific version.

nvm install <version>

Like:

nvm install 18.05.0

Switch between installed node versions.

nvm use <version>

Like:

nvm use 18.05.0

Uninstall specific version (after switching to another version).

nvm uninstall <version>

Create .nvmrc file with current node version in your project so you won't forget project's node version.

node --version > .nvmrc

We've just made a simple introduction to NVM. Don't forget to check NVM repo for more detail.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you’re on a generous day, you can even buy me a coffee. 🙃

Vanilla JavaScript - Modal

bekdev — Fri, 31 May 2024 14:31:19 +0000

In this article, we'll build a modal using vanilla JavaScript, HTML, and SCSS that will include features like opening and closing with a button, and closing when clicking outside of the modal content.

Before we start I'd like mention that I used:

Boxicons for icons.
Google Fonts Roboto.
SCSS (SASS) for styling.
BEM methodology for reusability of css for tooltip.

Modal HTML Structure

The HTML structure of the modal includes a button to trigger the modal and the modal itself with an overlay and content area.

<!-- Add Boxicons to html head tag -->
<link
  href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
  rel="stylesheet"
/>

<body class="container">
  <button class="btn js-show-modal">
    Show Modal
    <i class="bx bx-right-arrow-alt"></i>
  </button>

  <div class="modal js-modal">
    <div class="modal__overlay"></div>
    <div class="modal__content">
      <button class="modal__close js-close-modal">
        <i class="bx bx-x-circle"></i>
      </button>

      <h4>Lorem ipsum dolor sit amet consectetur adipisicing!</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo hic
        earum possimus itaque, aperiam tenetur quo ducimus doloremque maxime
        voluptas natus laudantium nemo maiores ex ipsam quis. Nobis atque
        incidunt esse architecto cupiditate quis neque ipsa animi deserunt
        commodi perspiciatis aperiam nemo dignissimos libero, fugit dolorum
        similique quas, ducimus ad?
      </p>
      <div class="modal__action">
        <button class="btn js-close-modal">Close</button>
      </div>
    </div>
  </div>
</body>

SCSS Styling

The SCSS for the modal ensures it is visually appealing and functions correctly when opened and closed.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

// COLORS
// $black: #202b2f;
$black2: #1e1e1e;
$white: aliceblue;
$grayish-blue: #003249;
$blue: #4983cf;
$pink: #be5064;

// RESET
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: $grayish-blue;
  color: $white;

  &.overflowHidden {
    overflow: hidden;
  }
}

// STYLES
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  font-size: 14px;
  color: $white;
  padding: 8px 16px;
  background-color: $blue;
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  > i {
    font-size: 18px;
  }
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  z-index: -22;
  transition: all 200ms ease-in-out;

  &--opened {
    opacity: 1;
    user-select: auto;
    pointer-events: all;
    z-index: 1;
  }

  &__overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: $black2, $alpha: 0.8);
    z-index: 11;
  }

  &__close {
    border: 0;
    outline: 0;
    background-color: transparent;
    font-size: 24px;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;

    > i {
      font-size: 34px;
      color: $pink;
    }
  }

  &__content {
    background-color: $white;
    color: $black2;
    max-width: 600px;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    z-index: 22;
    position: relative;

    > h4 {
      font-size: 18px;
      margin: 30px 0;
    }

    > p {
      margin-bottom: 20px;
    }
  }

  &__action {
    text-align: right;
  }
}

Adding JavaScript Functionality

The JavaScript code handles the opening and closing of the modal, including the feature to close the modal when clicking outside of it. We add an event listener to the button with the class js-show-modal. When this button is clicked, the modal--opened class is added to the modal, making it visible.Then we add event listeners to all elements with the class js-close-modal. When any of these elements are clicked, the modal--opened class is removed, hiding the modal. Lastly, We add an event listener to the document. If the modal is open and the user clicks outside the modal content (but not on the trigger button), the modal will close.

document.addEventListener('DOMContentLoaded', () => {
  const modal = document.querySelector('.js-modal'),
    openModalBtn = document.querySelector('.js-show-modal'),
    closeModalBtns = document.querySelectorAll('.js-close-modal'),
    body = document.querySelector('body');

  const closeModal = () => {
    modal.classList.remove('modal--opened');
    body.classList.remove('overflowHidden');
    document.removeEventListener('keydown', handleEscClose);
  };

  const openModal = () => {
    modal.classList.add('modal--opened');
    body.classList.add('overflowHidden');
    document.addEventListener('keydown', handleEscClose);
  };

  const handleEscClose = (e) => {
    if (e.key === 'Escape') {
      closeModal();
    }
  };

  if (modal) {
    openModalBtn.addEventListener('click', openModal);
    closeModalBtns.forEach((btn) => btn.addEventListener('click', closeModal));
  }

  document.addEventListener('click', (event) => {
    if (
      modal.classList.contains('modal--opened') &&
      !event.target.closest('.modal__content') &&
      !event.target.closest('.js-show-modal')
    ) {
      closeModal();
    }
  });
});

We've just created a simple modal component using vanilla JavaScript. You can customize it for your project's needs. To see the detailed code check project's Github repo and Codepen for live demo.

Thank you for reading. If you find the article useful, please do not forget to give a star so that others can access it. Happy Coding! 🙃

Vanilla JavaScript - Tooltip

bekdev — Fri, 31 May 2024 14:23:58 +0000

Tooltips are a great way to provide additional information to users without cluttering the interface. In this article, we'll create a simple and effective tooltip using vanilla JavaScript, HTML, and CSS.

Before we start I'd like mention that I used:

Google Fonts Roboto.
SCSS (SASS) for styling.
BEM methodology for reusability of css for tooltip.

Tooltip HTML Structure

Let's start by defining the HTML structure for our tooltip component. We'll start with a basic HTML structure containing three buttons. Each button has a data-tooltip attribute containing the tooltip text.

<body class="container">
  <button class="trigger" data-tooltip="Alice In Wonderland">Show More</button>

  <button class="trigger trigger--primary" data-tooltip="Wizard Of Ozz">
    Show More
  </button>

  <button
    class="trigger trigger--secondary"
    data-tooltip="Lorem ipsum, dolor sit amet consectetur adipisicing elit."
  >
    Show More
  </button>
</body>

SCSS Styling

Next, we'll style our tooltips and buttons using SCSS. Tooltips are initially hidden and positioned above the buttons. The .active class makes them visible. We'll also include some general styling for the body and container.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

// COLORS
$black2: #1e1e1e;
$white: aliceblue;
$grayish-blue: #003249;
$blue: #4983cf;
$pink: #be5064;

// RESET
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: $black2;
  color: $white;
}

// STYLES
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  h1 {
    text-align: center;
    margin-bottom: 30px;
  }

  .trigger {
    font-size: 14px;
    color: $white;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 10px;
    position: relative;

    &--primary {
      background-color: $blue;
    }

    &--secondary {
      background-color: $pink;
    }
  }

  [role='tooltip'] {
    width: calc(100% + 40px);
    height: auto;
    padding: 8px;
    line-height: 1.5;
    border-radius: 4px;
    background-color: $grayish-blue;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 15px);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
  }

  [role='tooltip'].active {
    opacity: 1;
    visibility: visible;
  }

  [role='tooltip']::before {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid $grayish-blue;
  }
}

Adding JavaScript Functionality

Finally, we'll add the JavaScript code to make our tooltips interactive. This involves creating tooltip elements dynamically and attaching event listeners to show and hide the tooltips. We select all elements with the .trigger class and for each trigger, we create a tooltip element, set its role to tooltip, and append it to the trigger button. We'll also add mouseenter and mouseleave event listeners that will call openTooltip and closeTooltip functions to show and hide the tooltip by adding and removing the .active class.

const triggers = document.querySelectorAll('.trigger');

const openTooltip = (e) => {
  const tooltip = e.target.querySelector('[role=tooltip]');
  tooltip.classList.add('active');
};

const closeTooltip = (e) => {
  const tooltip = e.target.querySelector('[role=tooltip]');
  tooltip.classList.remove('active');
};

if (triggers) {
  triggers.forEach((trigger) => {
    let tooltip = document.createElement('span');

    tooltip.setAttribute('role', 'tooltip');
    tooltip.setAttribute('inert', true);
    tooltip.textContent = trigger.dataset.tooltip;

    trigger.appendChild(tooltip);

    trigger.addEventListener('mouseenter', openTooltip);
    trigger.addEventListener('mouseleave', closeTooltip);
  });
}

We've just created a simple tooltip component using vanilla JavaScript. You can customize it for your project's needs. To see the detailed code check project's Github repo and Codepen for live demo.

Thank you for reading. If you find the article useful, please do not forget to give a star so that others can access it. Happy Coding! 🙃

Vanilla JavaScript - Hamburger Menu Button

bekdev — Fri, 31 May 2024 13:47:43 +0000

Creating a hamburger menu is a common task for modern web development, especially for responsive designs. In this tutorial, we'll walk through how to create a hamburger menu component using plain JavaScript, HTML, and SCSS.

Burger Menu HTML Structure

Let's first set up the HTML for our hamburger menu button. This button will have a span element to represent the menu lines. The hamburger-menu class is the main container for our button. The js-menu-toggle-btn class is used for targeting the button in our JavaScript. The hamburger-menu__line class is for the line inside the button.

<body class="container">
  <button
    class="hamburger-menu js-menu-toggle-btn"
    aria-label="Open mobile menu"
  >
    <span class="hamburger-menu__line"></span>
  </button>
</body>

SCSS Styling

Next, we define the styles for our hamburger menu button. The styles include positioning, sizing, and the transitions for the lines. We define the main styles for the hamburger-menu and its lines. The &:before and &:after pseudo-elements create the top and bottom lines of the hamburger. The &--active class defines the transformation for when the menu is active, rotating the lines and hiding the middle line.

// COLORS
$white: aliceblue;
$grayish-blue: #003249;
$burgerTransition: all 300ms ease-in-out;

// RESET
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: $grayish-blue;
  color: $white;
}

// STYLES
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-menu {
  $self: &;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;

  &__line {
    height: 3px;
    background-color: $white;
    width: 100%;
    display: block;
    transition: $burgerTransition;
  }

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: $white;
    top: 5px;
    left: 0;
    transition: $burgerTransition;
  }

  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: $white;
    left: 0;
    bottom: 5px;
    transition: $burgerTransition;
  }

  &--active {
    &:after {
      transform: rotate(-320deg);
      bottom: 13px;
    }

    &:before {
      transform: rotate(320deg);
      top: 15px;
    }

    #{$self}__line {
      opacity: 0;
      width: 0;
    }
  }
}

Adding JavaScript Functionality

Finally, we add the JavaScript to handle the toggle functionality. The script will add or remove the hamburger-menu--active class on button click. The DOMContentLoaded event ensures that the script runs after the DOM is fully loaded. We select the button with the class js-menu-toggle-btn and add a click event listener to it. The toggleMobileMenu function toggles the hamburger-menu--active class, triggering the CSS transitions.

document.addEventListener('DOMContentLoaded', () => {
  const burgerBtn = document.querySelector('.js-menu-toggle-btn');

  const toggleMobileMenu = () => {
    burgerBtn.classList.toggle('hamburger-menu--active');
    /* you can add your mobile menu functionality here */
  };

  if (burgerBtn) {
    burgerBtn.addEventListener('click', toggleMobileMenu);
  }
});

We've just created a simple hamburger menu component using vanilla JavaScript. You can customize it for your project's needs. To see the detailed code check project's Github repo and Codepen for live demo.

Thank you for reading. If you find the article useful, please do not forget to give a star so that others can access it. Happy Coding! 🙃

Vanilla JavaScript - Tabs

bekdev — Thu, 16 May 2024 16:54:59 +0000

Tabs allow users to navigate between different sections of content within the same page. In this tutorial, we'll walk through how to create a basic tabs component using plain JavaScript, HTML, and CSS.

Before we start I'd like mention that I used:

Boxicons for icons.
Google Fonts Roboto.
SCSS (SASS) for styling.

Tabs HTML Structure

Let's start by defining the HTML structure for our tabs component. We'll use semantic HTML elements to represent the tabs and their content.

<div class="tabs">
  <div class="tabs__pills">
    <button class="btn active" data-id="summer">Summer</button>
    <button class="btn" data-id="autumn">Autumn</button>
    <button class="btn" data-id="winter">Winter</button>
    <button class="btn" data-id="spring">Spring</button>
  </div>

  <div class="tabs__panels">
    <!-- Content panels for each tab -->
    <!-- Summer tab -->
    <div id="summer" class="active">
      <figure>
        <img src="https://picsum.photos/id/34/400/270" alt="summer" />
      </figure>
      <div>
        <h4>Summer</h4>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam
          tempore consectetur animi sequi dolore deserunt error nulla officia
          amet! Autem unde voluptas modi ipsa ullam ex facere cupiditate harum
          excepturi? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          Ipsam tempore consectetur animi sequi dolore deserunt error nulla
          officia amet! Autem unde voluptas modi ipsa ullam ex facere cupiditate
          harum excepturi?
        </p>
      </div>
    </div>
    <!-- Autumn tab -->
    <!-- Winter tab -->
    <!-- Spring tab -->
  </div>
</div>

CSS Styling

Now, let's add some CSS to style our tabs component. We'll use SCSS for layout and styling to enhance the visual appearance and user interaction. First, we'll add the font, reset our css and assign color variables.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

// COLORS

$text: #101927;
$white: #f7f7f7;
$blue: #2955ac;

// RESET
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #3ca8c8;
}

Now, we can style our tabs using scss.

// STYLING
.container {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 16px 30px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  background: transparent;
  outline: transparent;
  border: transparent;
  color: $text;
  transition: 300ms all ease-in-out;
  @media only screen and (max-width: 576px) {
    padding: 10px 8px;
  }

  &.active {
    color: $blue;
    position: relative;

    &::after {
      content: '';
      width: 100%;
      height: 2px;
      background-color: #2955ac;
      position: absolute;
      bottom: -2px;
      left: 0;
    }
  }
}

.tabs {
  background-color: $white;
  border-radius: 8px;
  padding: 32px 32px 10px 32px;

  &__pills {
    width: fit-content;
    border-bottom: 2px solid rgba($color: $text, $alpha: 0.2);
  }

  &__panels {
    padding: 20px 0;
    > div {
      width: 100%;
      display: none;
      //   display: flex;
      gap: 20px;

      > figure {
        max-width: 400px;
        width: 100%;
        flex-shrink: 0;

        @media only screen and (max-width: 992px) {
          margin: 0 auto;
        }

        img {
          width: 100%;
          display: block;
        }
      }

      > div {
        > h4 {
          font-size: 24px;
          margin: 10px 0;
        }

        > p {
          line-height: 1.8;
        }
      }
    }

    > div.active {
      display: flex;

      @media only screen and (max-width: 978px) {
        flex-direction: column;
      }
    }
  }
}

Adding JavaScript Functionality

Lastly, we'll add JavaScript code to handle tab navigation and toggle the active state class of tab buttons and content panels. By using the data-id attribute, we establish a relationship between tab buttons and content panels, allowing us to easily toggle their visibility and active states based on user interaction.

const tabButtons = document.querySelectorAll('.tabs__pills .btn');
const tabContents = document.querySelectorAll('.tabs__panels > div');

if (tabButtons && tabContents) {
  tabButtons.forEach((tabBtn) => {
    tabBtn.addEventListener('click', () => {
      const tabId = tabBtn.getAttribute('data-id');

      tabButtons.forEach((btn) => btn.classList.remove('active'));
      tabBtn.classList.add('active');

      tabContents.forEach((content) => {
        content.classList.remove('active');

        if (content.id === tabId) {
          content.classList.add('active');
        }
      });
    });
  });
}

We've just created a simple tabs component using vanilla JavaScript. You can customize it for your project's needs. To see the detailed code check project's Github repo and Codepen for live demo.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you’re on a generous day, you can even buy me a coffee. 🙃

Vanilla JavaScript - Accordion

bekdev — Sun, 12 May 2024 16:27:44 +0000

Accordions are a popular UI pattern for presenting collapsible content sections.
In this tutorial, we'll walk through how to create a basic accordion component using plain JavaScript, HTML, and CSS.

Before we start I'd like mention that I used:

Boxicons for icons.
BEM methodology for reusability of css for accordion.
Google Fonts Roboto.
SCSS (SASS) for styling.
$self: &; and #{ $self } logic in scss to prevent any selector scope issues. If you want to read more about this, you can check my Solving SCSS Parent Selector Scope Issue article on topic.

Accordion HTML Structure

First, let's create the HTML structure for our accordion. We'll have an accordion-wrapper classed div for the accordion items, each consisting of a header and a body.

<div class="accordion-wrapper">
  <div class="accordion">
    <div class="accordion__header">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <i class="bx bx-chevron-down"></i>
    </div>
    <p class="accordion__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem
      quisquam, laborum velit similique perferendis, ipsum nemo tempore ab,
      consectetur sint omnis dolore temporibus porro voluptates accusantium
      libero accusamus quod. Expedita.
    </p>
  </div>

  <div class="accordion">
    <div class="accordion__header">
      <h4>Lorem ipsum dolor sit amet.</h4>
      <i class="bx bx-chevron-down"></i>
    </div>
    <p class="accordion__body">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem
      quisquam, laborum velit similique perferendis, ipsum nemo tempore ab,
      consectetur sint omnis dolore temporibus porro voluptates accusantium
      libero accusamus quod. Expedita.
    </p>
  </div>

  <!-- You can add more accordion items here -->
</div>

Styling

First we'll add the font, reset our css and assign color variables.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

// COLORS
$black: #202b2f;
$black2: #141111;
$white: aliceblue;
$grayish-blue: #003249;
$blue: #2971af;

// RESET
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: $black2;
  color: $white;
}

.accordion-wrapper {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

Now, we can style our accordion using scss.

.accordion {
  $self: &;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &:not(:last-child) {
    border-bottom: 1px solid $black2;
  }

  &:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  &:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  #{ $self }__header {
    background-color: $grayish-blue;
    padding: 1.2rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-out;

    > h4 {
      font-weight: normal;
    }

    .bx {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: $white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $black2;
      font-size: 32px;
      transition: 400ms all ease-in-out;
    }
  }

  &--expand #{ $self }__header {
    background-color: $blue;
  }

  &--expand #{ $self }__header .bx {
    transform: rotate(180deg);
  }

  #{ $self }__body {
    overflow: hidden;
    background-color: $black;
    max-height: 0px;
    padding: 0 16px;
    opacity: 0;
    transition: 400ms all ease-in-out;
  }

  &--expand #{ $self }__body {
    opacity: 1;
    max-height: 500px;
    padding: 16px;
  }
}

Adding JavaScript Functionality

Now, let's add the JavaScript code to make our accordion interactive. First, we'll check if the accordion items are in the DOM and then toggle the accordion--expand class on the accordion items when clicked to expand or collapse them.

const accordionItems = document.querySelectorAll('.js-accordion');

if (accordionItems) {
  accordionItems.forEach((accordion) => {
    accordion.addEventListener('click', (e) => toggleAccordion(e));
  });
}

const toggleAccordion = (e) => {
  let target = e.currentTarget;

  if (!target.classList.contains('accordion--expand')) {
    accordionItems.forEach((item) => {
      item.classList.remove('accordion--expand');
    });
    target.classList.add('accordion--expand');
  } else {
    target.classList.remove('accordion--expand');
  }
};

We've just created a simple accordion component using vanilla JavaScript. You can customize it for your project's needs. Check here for Live Demo and detailed code.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you’re on a generous day, you can even buy me a coffee. 🙃

Solving SCSS Parent Selector Scope Issue

bekdev — Thu, 29 Feb 2024 18:30:10 +0000

Have you ever encountered issues with SCSS where the scope of the parent element gets lost within multiple nested selectors? This is a common problem, especially when you're dealing with complex stylesheets. However, fear not! There's a simple and elegant solution to this issue using SCSS variables.

Let's first examine this problem on an example code using BEM methodology.

<section class="hero-section">
  <div class="container">
    <div class="hero-section__left">
      <p>Content 1</p>
    </div>
    <div class="hero-section__left">
      <p>Content 2</p>
    </div>
  </div>
</section>

We created a selector named .hero-section and this selector has two child elements named .hero-section__left and .hero-section__left.

.hero-section {
  background: blue;
  padding: 20px;

  .container {
    display: flex;
    justify-content: space-evenly;

    &__left {
      background: yellow;
    }

    &__right {
      background: pink;
    }
  }
}

It doesn't seem like there's a problem but when we compile the code, it becomes clear what the error is:

.hero-section {
  background: blue;
  padding: 20px;
}
.hero-section .container {
  display: flex;
  justify-content: space-evenly;
}
.hero-section .container__left {
  background: yellow;
}
.hero-section .container__right {
  background: pink;
}

Our main goal was to style the .hero-section .hero-section__left and .hero-section .hero-section__right selectors. As you see, since the & selector has block scope, the nested selectors &__left and &__right may lose their parent scope, leading to unexpected styling behavior. In other words, the value of the & parent selection changes in each new block.

To solve this problem, let's review our code again by assigning our .hero-section scope to a variable called $self.

.hero-section {
  $self: &;
  background: blue;
  padding: 20px;

  .container {
    display: flex;
    justify-content: space-evenly;

    #{ $self }__left {
      background: yellow;
    }

    #{ $self }__right {
      background: pink;
    }
  }
}

Now let's look at the current compiled version of our code.

.hero-section {
  background: blue;
  padding: 20px;
}
.hero-section .container {
  display: flex;
  justify-content: space-evenly;
}
.hero-section .container .hero-section__left {
  background: yellow;
}
.hero-section .container .hero-section__right {
  background: pink;
}

Finally, we achieved the effect we wanted. By assigning the parent scope to a variable (let's call it $self), we can keep everything in check. So when you're styling those nested elements, just use #{$self} to refer back to the parent selector. It's like telling SCSS, "Hey, remember where we came from!".

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you're on a generous day, you can even buy me a coffee. 🙃

Cache-Busting Background Images in SCSS

bekdev — Thu, 29 Feb 2024 16:04:07 +0000

Caching is a common practice browsers use to store resources locally, enhancing load times. However, it can become problematic when developers make updates to images. Without cache-busting, users might continue to view outdated images from their local cache. This is where cache-busting comes into play. Cache-busting is a technique employed to overcome browser caching and guarantee that users always receive the most recent version of assets. In this article, we'll explore the significance of cache-busting for background images and introduce a handy SCSS mixin for implementing it effectively.

Introducing the SCSS Mixin

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
  background-image: $backgroundImages;
}

We can cache-bust our single or multiple background images with this mixin. Let's go over it in detail and explore the implementation of this SCSS mixin in 7 steps:

Unique Identifier
Mixin Definition
Variable Initialization
Loop through URLs
Cache Busting
Final Property
Implementing Cache-Busting

Unique Identifier

$verId: unique_id();

Adds a unique identifier ($verId) generated by the unique_id() function. This identifier is appended to each background image URL as a query parameter, ensuring that the browser recognizes the updated versions of the images.

Mixin Definition

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
}

Defines a mixin named cacheBustBgImages that accepts a variable number of arguments representing background image URLs.

Variable Initialization

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();
}

Initializes an empty list ($backgroundImages) to store processed background image URLs.

Loop through URLs

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
  }
}

Initiates a loop to iterate through each URL passed to the mixin.

Cache Busting

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
}

Appends each URL to the $backgroundImages list, adding a cache-busting query parameter (?v=#{$verId}) to ensure browser retrieval of the latest image version. The comma argument specifies that each URL should be separated by a comma.

Final Property

$verId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url('#{$url}?v=#{$verId}'),
      comma
    );
  }
  background-image: $backgroundImages;
}

Sets the background-image property using the list of processed background images.

Implementing Cache-Busting

To utilize this mixin, include it in your SCSS and use it wherever background images need cache-busting:

.hero {
  @include cacheBustBgImages(
    'asset/images/hero__banner-lines.png',
    'asset/images/hero__banner-filter.jpg'
  );
}

Conclusion

Cache-busting is a critical technique in frontend development, ensuring that users always experience the latest version of background images. The provided SCSS mixin simplifies the implementation of cache-busting, appending a version parameter to each image URL. By grasping the importance of cache-busting and employing the mixin in your projects, you can guarantee a seamless and up-to-date user experience.

Thank you for reading. If you find the article useful, please do not forget to like and comment so that others can access it. If you're on a generous day, you can even buy me a coffee. 🙃