DEV Community: joachim kliemann

Creating Custom Scrollbars with CSS: A Short Guide

joachim kliemann — Tue, 29 Oct 2024 19:34:55 +0000

Modern web browsers allow developers to customize the appearance of scrollbars using CSS, enhancing the visual appeal of web applications while maintaining functionality. This guide explores how to implement custom scrollbars with cross-browser compatibility.

Basic Setup

First, let's establish the container that will feature our custom scrollbar:

<div class="scrollbar-container">
  <h3>Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

Container Styling

The scrollable container needs specific dimensions and overflow properties:

.scrollbar-container {
  height: 50%;           /* Fixed height to enable scrolling */
  width: 50%;           /* Container width */
  margin: 0 auto;       /* Center the container */
  overflow: auto;       /* Enable scrolling */
  padding: 1rem;        /* Internal spacing */
}

Cross-Browser Implementation

WebKit Browsers (Chrome, Safari, Edge)

For WebKit-based browsers, we use the ::-webkit-scrollbar pseudo-elements:

.scrollbar-container::-webkit-scrollbar {
  width: 4px;                    /* Width of the scrollbar */
  background-color: white;       /* Background color */
  border-radius: 100vw;         /* Rounded corners */
}

.scrollbar-container::-webkit-scrollbar-track {
  background: white;            /* Track color */
  border-radius: 100vw;        /* Rounded corners for track */
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: plum;            /* Scrollbar thumb color */
  border-radius: 100vw;       /* Rounded corners for thumb */
}

Firefox

Firefox requires a different approach using the scrollbar-width and scrollbar-color properties:

@-moz-document url-prefix() {
  .scrollbar-container {
    scrollbar-width: thin;           /* Width of the scrollbar */
    scrollbar-color: fuchsia white;  /* thumb and track colors */
  }  
}

Design Considerations

The implementation includes several thoughtful design choices:

Border Radius: The 100vw value creates perfectly rounded corners for both the track and thumb.
Minimal Width: A 4px width keeps the scrollbar visible but unobtrusive.
Color Scheme: The white track with plum/fuchsia thumb provides good contrast while maintaining visual appeal.
Consistent Typography: The design uses the Rubik font family for better readability:

@import url(https://fonts.googleapis.com/css2?family=Rubik);

CSS Variables

The example uses CSS variables for consistent theming:

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

Browser Compatibility

WebKit browsers (Chrome, Safari, Edge): Full support for detailed customization
Firefox: Simplified customization with scrollbar-width and scrollbar-color
Internet Explorer: No support for custom scrollbars
Legacy Edge: Limited support

Best Practices

Maintain Usability: Keep the scrollbar visible and functional
Consistent Styling: Match scrollbar colors with your site's theme
Testing: Verify appearance across different browsers
Responsive Design: Consider how the scrollbar appears at different viewport sizes

Final result

Conclusion

Custom scrollbars can enhance the visual appeal of your web application while maintaining functionality. By following these patterns and considering cross-browser compatibility, you can create a consistent and attractive scrolling experience for your users.

Creating an Accordion with JavaScript Classes: A Real-World Example

joachim kliemann — Sun, 26 Nov 2023 16:14:46 +0000

As a frontend developer, you’re likely familiar with the myriad of ways JavaScript can enhance user experience on a website. One common component that can benefit from JavaScript’s capabilities is the accordion. In this article, we’ll delve into creating an accordion using JavaScript classes, focusing on ensuring only one item is open at a time while the rest remain closed. This approach not only streamlines the user experience but also showcases the power and organization offered by JavaScript classes.

Understanding JavaScript Classes

Before we dive into the accordion, let's briefly touch on JavaScript classes. Introduced in ECMAScript 2015, classes in JavaScript are a syntactical sugar over the existing prototype-based inheritance and provide a much cleaner and more modular way to create objects and handle inheritance.

Building the Accordion

HTML Structure

Start with a basic HTML structure for the accordion:

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 1</div>
        <div class="accordion-content">Content for item 1 goes here...</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 2</div>
        <div class="accordion-content">Content for item 2 goes here...</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Accordion Item 3</div>
        <div class="accordion-content">Content for item 1 goes here...</div>
    </div>
</div>

Styling the Accordion

Use CSS to style the accordion. Ensure the .accordion-content is hidden by default.

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: .5rem;
}

.accordion-header {
  background-color: #f5f5f5;
  cursor: pointer;
  padding: .5rem;
  font-weight: 500;
}

.accordion-content {
  display: none;
  padding: .5rem;
}

JavaScript Class for the Accordion

Now, let’s create a JavaScript class:

class Accordion {
    constructor(selector) {
        this.accordion = document.querySelector(selector);
        this.items = this.accordion.querySelectorAll('.accordion-item');
        this.bindEvents();
    }

    bindEvents() {
        this.items.forEach(item => {
            const header = item.querySelector('.accordion-header');
            header.addEventListener('click', () => {
                this.toggleItem(item);
            });
        });
    }

    toggleItem(item) {
        this.closeAll();
        const content = item.querySelector('.accordion-content');
        content.style.display = content.style.display === 'none' ? 'block' : 'none';
    }

    closeAll() {
        this.items.forEach(item => {
            item.querySelector('.accordion-content').style.display = 'none';
        });
    }
}

Initializing the Accordion

Initialize the accordion by creating an instance of the Accordion class:

document.addEventListener('DOMContentLoaded', () => {
    new Accordion('.accordion');
});

Benefits of Using JavaScript Classes

Readability and Maintenance: Classes make the code more readable and easier to maintain, especially in larger projects.
Encapsulation: Grouping related properties and methods into a class helps encapsulate functionality.
Reusability: Classes can be easily extended or reused across different parts of an application.
Improved Organization: By using classes, you can better organize your code, which is especially beneficial when working in teams.

Final result

Conclusion

Creating an accordion with JavaScript classes not only simplifies the development process but also enhances the maintainability and readability of your code. This approach allows you to encapsulate functionality, leading to cleaner, more organized, and reusable code. As a frontend developer, mastering such techniques is crucial for building interactive and user-friendly websites.

Simplifying SCSS Compilation with Parcel.js

joachim kliemann — Sun, 19 Nov 2023 20:24:35 +0000

Creating an efficient and manageable workflow is crucial for any front-end developer. One way to improve your workflow is by utilizing SCSS and Parcel.js. SCSS is a preprocessor scripting language that extends CSS, while Parcel.js is a high-speed web application bundler that requires no configuration. This article will guide you through setting up Parcel.js to compile SCSS into CSS, enhancing your web development process.

Understanding SCSS and Parcel.js

SCSS (Sassy CSS):

SCSS is an extension of CSS that allows you to use variables, nested rules, mixins, functions, and more, all within your CSS file.
It makes your CSS more maintainable, readable, and reusable.

Parcel.js:

A web application bundler that offers a simplified setup process.
Automatically transforms and bundles your assets without the need for extensive configuration.

Setting Up Your Project

1. Install Node.js:
Ensure Node.js is installed on your system. You can download it from Node.js official website.

2. Initialize Your Project:
Create a new directory for your project and initialize it with npm.

mkdir my-project
cd my-project
npm init -y

3. Install Parcel.js:
Install Parcel.js in your project directory.

npm install --save-dev parcel-bundler

4. Project Structure:
Create a basic project structure. For instance:

index.html: Your main HTML file.
styles/: Directory for SCSS files.
styles/main.scss: Your main SCSS file.

5. Link SCSS to HTML:
In your index.html, link to the SCSS file (Parcel will handle the compilation to CSS).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
    <link rel="stylesheet" href="./styles/main.scss">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Writing SCSS

In styles/main.scss, you can start writing your SCSS. For example:

$primary-color: #3498db;

body {
    font-family: 'Arial', sans-serif;
    color: $primary-color;
}

Running Parcel

1. Add a Start Script:
Modify your package.json to include a start script.

"scripts": {
    "start": "parcel index.html"
}

2. Run Your Project:
Start your project using npm.

npm start

Parcel will automatically compile your SCSS to CSS and open your project in the browser. Any changes you make in your SCSS file will be instantly compiled and updated in the browser.

Conclusion

Using SCSS with Parcel.js simplifies the development process, making it more efficient and manageable. With automatic compilation and a zero-configuration setup, Parcel.js allows you to focus more on writing code and less on configuring your build tools. This setup is ideal for developers looking to streamline their workflow and enhance their web development experience.

Crafting a Responsive Design: Creating a Media Queries Mixin in Sass

joachim kliemann — Sun, 12 Nov 2023 22:10:42 +0000

In web development, it's important to create a design that works well on different screen sizes. A robust method to achieve this is by employing media queries. But, writing many media queries can become tedious. Here's where a Sass Mixin for media queries comes to the rescue. In this article, we will make a Media Queries Mixin using the min-width technique. We will also create a Sass map to link names with screen widths, using em as the unit.

Setting up the Breakpoints

Before delving into the Mixin, let’s set up a Sass map for our breakpoints. A Sass map is a data type that holds key-value pairs. We will use the breakpoint names (xxs, xs, sm, md, lg, xl) as our keys. The corresponding min-width values will be in em units.

$breakpoints: (
  xxs: 20em,  // 320px
  xs: 30em,   // 480px
  sm: 48em,   // 768px
  md: 64em,   // 1024px
  lg: 80em,   // 1280px
  xl: 120em   // 1920px
);

Crafting the Media Queries Mixin

Now, let's create our media queries mixin. The mixin takes the breakpoint name as argument. Mixins let you make styles that you can use over and over again in your stylesheet. Mixins are defined using the @mixin at-rule, which is written @mixin { ... } or @mixin name() { ... }

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

Implementing the Mixin in our SCSS file

With our mixin crafted, we can now apply media queries in our SCSS file. Mixins are included into the current context using the @include at-rule, which is written @include or @include ()

@include mq(md, {
  .container {
    width: 80%;
  }
});

HTML & SCSS Example Files

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.scss">
<title>Responsive Design with Sass Mixin</title>
</head>
<body>
<div class="container">
  Responsive Content
</div>
</body>
</html>

SCSS (styles.scss)

$breakpoints: (
  xxs: 20em,
  xs: 30em,
  sm: 48em,
  md: 64em,
  lg: 80em,
  xl: 120em
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

$breakpoints: (
  xxs: 20em,
  xs: 30em,
  sm: 48em,
  md: 64em,
  lg: 80em,
  xl: 120em
);

@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

.container {
  background-color: #222;
  color: #fff;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  width: 100%;

  @include mq(md) {
    width: 80%;
  };
}

Final result

This setup helps us manage media queries easily, making our stylesheet easier to read and maintain. We made it easier to create responsive designs by using a Sass mixin and breakpoints map.

Creating an Organized SCSS File Structure Using Modern Practices

joachim kliemann — Sun, 05 Nov 2023 20:46:30 +0000

Understanding Modern SCSS
The Modern 7-1 Pattern
Modern File Structure
The Index Files
The Main File
Using Namespaces
Best Practices for Modern SCSS
Migration Tips
Performance Considerations
Conclusion

As a frontend developer, maintaining a clean and organized SCSS file structure is crucial for scalable and manageable styling. While SCSS (Sassy CSS) has evolved, so have the best practices for organizing your files. This guide focuses on modern SCSS practices using @use and @forward instead of the deprecated @import.

Understanding Modern SCSS

Before diving into structure, let's understand the key modern SCSS features:

@use loads mixins, functions, and variables from other stylesheets and provides an explicit namespace
@forward makes the public members of another module available to stylesheets that use your module
Members are private by default and must be marked with !default to be configurable

The Modern 7-1 Pattern

The 7-1 pattern remains a solid approach but needs adaptation for modern SCSS. It consists of seven folders plus one main file, with each folder containing an index file to manage its members.

Folder Structure

Abstracts: Global SCSS tools and helpers
- Variables
- Functions
- Mixins
- Placeholders
Components: Individual UI components
- Buttons
- Forms
- Cards
- Navigation
Layout: Major layout sections
- Header
- Footer
- Grid system
- Navigation layouts
Pages: Page-specific styles
- Home
- About
- Contact
Themes: Visual themes
- Light theme
- Dark theme
- Brand variations
Base: Global HTML element styles
- Reset/Normalize
- Typography
- Base elements
Vendors: Third-party styles
- Bootstrap
- Select2
- Datepicker

Optional:

States: State-specific styles
- Active states
- Loading states
- Error states

Modern File Structure

scss/
├── abstracts/
│   ├── _index.scss        // Forwards all abstract members
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── base/
│   ├── _index.scss
│   ├── _reset.scss
│   └── _typography.scss
// ... (other folders follow same pattern)
└── main.scss

The Index Files

Each folder should have an _index.scss file that forwards its members. Here's how they should look:

// abstracts/_index.scss
@forward 'variables';
@forward 'functions';
@forward 'mixins';

// components/_index.scss
@forward 'button';
@forward 'form';
@forward 'card';

The Main File

The main file now uses @use instead of @import:

// main.scss
@use 'abstracts' as *;         // Global access to variables/mixins
@use 'vendors' as vendors;     // Namespaced access
@use 'base' as base;
@use 'components' as comp;
@use 'layout' as layout;
@use 'pages' as pages;
@use 'themes' as themes;

Using Namespaces

Modern SCSS requires explicit namespacing. Here's how to use them:

// Using namespaced members
.button {
  // From abstracts (global)
  background-color: $primary-color;

  // From components
  @include comp.button-base;

  // From vendors
  @include vendors.bootstrap-spacing;
}

Best Practices for Modern SCSS

Use Index Files Effectively
- Keep index files clean and focused
- Use @forward with show or hide to control member visibility

   @forward 'variables' show $primary-color, $secondary-color;

Configure Defaults
- Mark configurable variables with !default
- Use configuration files when needed

   // _variables.scss
   $primary-color: blue !default;

Namespace Management
- Use as * sparingly (primarily for abstracts)
- Choose clear, consistent namespace aliases
- Document namespace conventions in your styleguide
Module Organization
- One component per file
- Use clear, consistent naming
- Keep dependencies explicit
Documentation
- Comment your configurations
- Document your module's public API
- Include usage examples

Migration Tips

When moving from @import to @use/@forward:

Start with your abstracts folder
Update one folder at a time
Test thoroughly between updates
Update dependent files as needed
Don't mix @import with @use/@forward in the same file

Performance Considerations

Modern SCSS module system provides several performance benefits:

Modules are only executed once
Dead code elimination is more effective
Better dependency tracking
Clearer dependency graph

Conclusion

Modern SCSS file structure emphasizes clarity, maintainability, and explicit dependencies. By using @use and @forward, you create a more robust and maintainable stylesheet architecture. This approach scales well with your project while providing better encapsulation and clearer dependencies.

Remember to:

Use explicit namespacing
Maintain clear folder structure
Keep your index files organized
Document your module system
Follow consistent naming conventions

With these modern practices in place, your SCSS will be more maintainable, scalable, and easier for teams to work with.

Setting Up a Modern Frontend Build Process with Rollup for SASS and JavaScript

joachim kliemann — Sun, 29 Oct 2023 19:03:06 +0000

Rollup is a strong module bundler that is great at tree shaking and making efficient code. I will show you how to use Rollup to bundle SASS and JavaScript in a frontend build process.

Prerequisites

You must install Node.js and npm on your computer.

Getting Started

Initialize a new project:

mkdir rollup-sass-js-setup
cd rollup-sass-js-setup
npm init -y

Install the necessary dependencies:

npm install rollup rollup-plugin-sass rollup-plugin-terser --save-dev

Setting up the Rollup Configuration

Create a rollup.config.js file in the root of your project and set up the configuration:

import sass from 'rollup-plugin-sass';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife', // Suitable for <script> tags in browsers
    },
    plugins: [
        sass({ output: 'dist/styles.css' }), // Output CSS to a file
        terser() // Minify JavaScript
    ]
};

Setting up the SASS

Let's create a simple SASS file. First, create a src directory:

mkdir src

Next, create a styles.scss file inside the src directory:

// src/styles.scss
$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

Setting up the JavaScript

Create an index.js file inside the src directory:

// src/index.js
import './styles.scss';

console.log('Hello, Rollup!');

Setting up the HTML

Create an index.html file in the root of your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rollup SASS/JS Setup</title>
    <link rel="stylesheet" href="dist/styles.css">
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>

Building the Project

Now that everything is set up, you can run Rollup to bundle your JavaScript and compile your SASS:

npx rollup -c

This will generate a bundle.js and styles.css in the dist directory.

Conclusion

Setting up a modern frontend build process with Rollup is straightforward. You can easily bundle your JavaScript and compile your SASS with a few settings. This setup ensures that you have a lean and optimized codebase, ready for deployment. As your project grows, you can add more tools and preprocessors using Rollup's plugin system.

Building a Tab Component with Pure CSS using Radio and Label Tags

joachim kliemann — Sun, 22 Oct 2023 19:33:56 +0000

Tabs are an essential UI component, often used to divide content into multiple sections on a single page. While JavaScript is commonly used to develop tabs, did you know you can create a fully functional tab component using just HTML and CSS? This article will guide you through the process of developing a tab component using only the <radio> and <label> tags.

Setting Up the HTML Structure

To begin with, we need to set up the HTML structure. We'll use radio inputs for each tab and labels to toggle between them. The content for each tab will be placed in a corresponding <div>.

<div class="tabs">
    <!-- Tab 1 -->
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div class="tab-content" id="content1">
        Content for Tab 1
    </div>

    <!-- Tab 2 -->
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Tab 2</label>
    <div class="tab-content" id="content2">
        Content for Tab 2
    </div>

    <!-- Add more tabs as needed... -->
</div>

Notice that all radio inputs have the same name attribute. This ensures that only one tab can be active at a time.

Styling with CSS

Now, let's add some styles:

/* Hide the radio inputs */
.tabs input[type="radio"] {
    display: none;
}

/* Style the labels (tabs) */
.tabs label {
    cursor: pointer;
    display: inline-block;
    margin-right: .2rem;
    padding: .5rem 1rem;
}

/* Style the content sections */
.tab-content {
    display: none;
    padding: 1rem;
}

/* Display content when a tab is selected */
.tabs input[type="radio"]:checked + label + .tab-content {
    display: block;
}

The key trick here is the :checked pseudo-class. When a radio input is checked, the adjacent label and .tab-content will be affected by the styles we define.

Enhancing the Active Tab

To give users a visual cue about which tab is active, let's highlight the active tab:

.tabs input[type="radio"]:checked + label {
    background-color: #ddd;
}

This will change the background color of the active tab and remove its bottom border, creating a seamless look with the content section.

Final Result

Conclusion

By leveraging the power of the <radio> and <label> tags, combined with the capabilities of CSS, we've created a functional and stylish tab component without any JavaScript. This approach is lightweight, accessible, and offers a great user experience. Feel free to enhance the styles further to fit the design needs of your project!

Toggling Mobile Navigation Visibility with CSS: The Checkbox Hack

joachim kliemann — Sun, 15 Oct 2023 21:33:30 +0000

In a mobile-first world, creating an intuitive and responsive navigation menu is crucial. The checkbox hack allows you to develop mobile flyout menus without JavaScript. This article will guide you through developing several styles of mobile navigation menus using the checkbox hack.

Basics of Checkbox Hack

The checkbox hack is based on three components:

A <label> element.
An associated <input type="checkbox">.
A CSS rule that targets the :checked state of the checkbox.

The idea is to toggle the checkbox state by clicking on the label, and then using the :checked CSS pseudo-class to style or reveal a sibling element.

Basic HTML Structure

<input type="checkbox" id="menuToggle">
<label for="menuToggle">☰ Menu</label>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Different Styles of Menus

Side Menu (Left to Right)

nav {
    position: absolute;
    top: 0;
    left: -300px; /* width of the menu */
    width: 300px;
    height: 100vh;
    transition: 0.3s;
}

#menuToggle:checked + label + nav {
    left: 0;
}

Sliding Menu (Top to Bottom)

nav {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: 0.3s;
}

#menuToggle:checked + label + nav {
    top: 0;
}

Splash Menu (Centered)

nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80vw;
    height: 80vh;
    transition: 0.3s;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 15px;
}

#menuToggle:checked + label + nav {
    transform: translate(-50%, -50%) scale(1);
}

Enhancements and Notes

You can further style the label as a hamburger icon, and change it to a close icon when the menu is open using CSS.
For better accessibility, ensure to provide fallbacks or alternatives for users who may not be able to interact with this kind of menu.
Although the checkbox hack is clever and works in most modern browsers, for more complex interactions or larger projects, JavaScript frameworks or libraries might be more suitable.

Conclusion

The checkbox hack offers a lightweight method to create interactive components without relying on JavaScript. Whether you choose a sidemenu, a top-down sliding menu, or a splash menu, you can achieve a smooth user experience on mobile devices. Experiment with styles and transitions to fit the look and feel of your website!

The Power of CSS Resets and Embracing the Modern Approach

joachim kliemann — Sun, 08 Oct 2023 19:43:21 +0000

Hello fellow Frontend enthusiasts! Let me dive into a topic I'm passionate about: CSS resets. If you've ever faced styling inconsistencies across different browsers (who hasn't?), you know the importance of a good CSS reset. In this article, I'll shed some light on the advantages of using a CSS reset and introduce you to what I believe is a gem in this domain: "A Modern CSS Reset" by Andy Bell.

Why Use a CSS Reset?

Uniformity Across Browsers: Different browsers have different default styling. A CSS reset brings all browsers to a common starting point, reducing discrepancies.
Predictability: With a reset in place, developers can be confident that the styles they define won't clash with browser defaults.
Clean Slate: A CSS reset provides a clean slate, making it easier to implement and maintain consistent designs.

What is 'A Modern CSS Reset'?

In the dynamic world of web design and development, what was effective yesterday might not be the best solution today. Enter "A Modern CSS Reset." As the web evolves, so do our tools, and this modern reset offers an updated approach to resetting styles. It doesn't just nullify styles but sets a few sensible defaults to help developers kickstart their projects.

Why I'm Loving Andy Bell's Modern CSS Reset

I stumbled upon Andy Bell's Modern CSS Reset a while ago, and it felt like a breath of fresh air. Here's why:

Minimalistic: Andy's approach is succinct. It's not about removing everything but about providing a useful foundation.
Focus on Modern Browsers: This reset acknowledges the fact that we are mostly developing for modern browsers. It reduces the noise from older, rarely-used styles.
Built for the Current Web: With features like custom properties and modern layout techniques, this reset is in tune with how we design and develop today.
Personal Touch: Andy isn't just sharing a tool; he's sharing his approach and reasoning, which resonates with my philosophy of understanding the 'why' behind our tools.

Other Noteworthy CSS Resets

While Andy Bell's reset is a fantastic tool, there are several others worth mentioning:

Eric Meyer’s Reset CSS: Perhaps the most well-known and widely adopted reset, this one is all about creating a level playing field across browsers.
Normalize.css: Instead of wiping all styles, Normalize.css fine-tunes default browser styles to create a consistent base.
HTML5 Reset: This one is geared towards ensuring that HTML5 elements render consistently across browsers.

Final Thoughts

Regardless of which reset you choose, the key is to ensure that you're starting your project with a consistent foundation. For me, Andy Bell's Modern CSS Reset strikes the right balance of simplicity and modernity. I encourage you to check it out and see if it fits your workflow. Happy styling!

Coding Clean Popups: The Power of the HTML Element

joachim kliemann — Sun, 01 Oct 2023 17:32:32 +0000

Developing a modal popup using the <dialog> HTML tag can offer a native and standardized way to create popups without relying heavily on JavaScript libraries. The <dialog> element represents a part of an application that the user interacts with to perform a task, such as a dialog box, inspector, or window.

Integrating HTML Element

The <dialog> tag is very simple to implement. Here’s a basic example of how you can integrate it into your HTML:

<dialog class="modal" id="modal">
  <h2>An awesome modal title</h2>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>Nam liber tempor cum soluta nobis eleifend</p>
  <button class="button close-button">close modal</button>
</dialog>

<button class="button open-button">open modal</button>

Using JavaScript to Handle the Modal

To open and close the dialog, you need to add some JavaScript code to toggle the open attribute of the <dialog> element.

document.addEventListener('DOMContentLoaded', function () {
  const modal = document.querySelector("#modal");
  const openModal = document.querySelector(".open-button");
  const closeModal = document.querySelector(".close-button");

  openModal.addEventListener("click", () => {
    modal.showModal();
  });

  closeModal.addEventListener("click", () => {
    modal.close();
  });
});

Styling with CSS

To style the <dialog>, you can use CSS as you would with any other HTML element. Here’s an example of how you might style the dialog:

.modal {
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / 30%);
  max-width: 60ch;
}

.modal::backdrop {
  background: rgb(0 0 0 / 40%);
}

.button {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
}

.button:hover {
  background-color: #555;
}

Codepen

Browser Compatibility and Fallback

The <dialog> element is supported in most of modern browsers, but you should always check the compatibility and implement a fallback for unsupported browsers, usually by utilizing JavaScript libraries or other modal implementation methods.

Conclusion

Integrating and using a <dialog> element is fairly simple. It's essential for developers to use the <dialog> element where suitable because it follows the standard web specifications and ensures better accessibility and cleaner code structure.

Developing a modal popup using <dialog> can greatly simplify the process of creating interactive and user-friendly web applications, reducing reliance on heavy libraries and frameworks while maintaining clean and semantic code.

Creating an Accordion with CSS and a sprinkle of JavaScript

joachim kliemann — Sun, 24 Sep 2023 17:43:59 +0000

Creating a simple, CSS-only accordion with the details and summary HTML elements is not only efficient but also makes for a clean, manageable, and accessible UI component. Below, I will outline how to create a CSS-only accordion and then how to enhance it using JavaScript to ensure only one accordion item is open at a time. But before I will give you some basic information about the <details> tag

Structure
Here is the typical structure for the <details> element:

<details>
  <summary>Summary or Label</summary>
  Hidden content or detailed information goes here.
</details>

Open Attribute
The open attribute is a boolean attribute that, when present, will make the <details> element start in the open state, meaning the hidden content is revealed by default. Here is an example:

<details open>
  <summary>Summary or Label</summary>
  This content is visible by default because of the open attribute.
</details>

Interactivity
If you want to toggle the open attribute dynamically, you can do so using JavaScript by selecting the <details> element and manipulating its open property.

Accessibility
When using the <details> and <summary> tags, it's essential to consider accessibility. These elements are natively accessible to keyboard and screen reader users, meaning they can be navigated and activated using keyboard controls, and screen reader users will be informed about the expandable/collapsible nature of the element. However, always ensure to test with actual devices and users to confirm accessibility in real-world usage.

Accordion

HTML:
Use the <details> tag to create the accordion, and the <summary> tag to define the clickable title.

<details class="accordion-item" open>
  <summary class="accordion-header">Accordion Item 1</summary>
  <div class="accordion-content">
    Content for item 1 goes here...
  </div>
</details>

<details class="accordion-item">
  <summary class="accordion-header">Accordion Item 2</summary>
  <div class="accordion-content">
    Content for item 2 goes here...
  </div>
</details>

<details class="accordion-item">
  <summary class="accordion-header">Accordion Item 3</summary>
  <div class="accordion-content">
    Content for item 3 goes here...
  </div>
</details>

<details class="accordion-item">
  <summary class="accordion-header">Accordion Item 4</summary>
  <div class="accordion-content">
    Content for item 4 goes here...
  </div>
</details>

CSS:
Define some basic styles for the accordion, using CSS.

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: .5rem;
}

.accordion-header {
  background-color: #f5f5f5;
  cursor: pointer;
  padding: .5rem;
  font-weight: 500;
}

.accordion-content {
  display: none;
  padding: .5rem;
}

.accordion-item[open] .accordion-content {
  display: block;
}

The cursor: pointer; style makes it clear that the title is clickable.

JavaScript:
To enhance the accordion functionality and allow only one item to be open at a time, you can use JavaScript. Here's an example of how to achieve this:

document.querySelectorAll('.accordion-item').forEach((accordion) => {
  accordion.addEventListener('toggle', function() {
    if (this.open) {
      document.querySelectorAll('.accordion-item').forEach((otherAccordion) => {
        if (otherAccordion !== this) otherAccordion.removeAttribute('open');
      });
    }
  });
});

Codepen:

Conclusion

By using the details and summary tags along with some basic CSS and JavaScript, you can create a simple and accessible accordion without relying on bulky libraries or frameworks. This method makes it easier to maintain and is more performant, leading to better user experiences. Have fun experimenting and enhancing your accordion with different styles and functionalities!

Toggling Mobile Navigation Visibility with CSS: 3 Ways

joachim kliemann — Sat, 16 Sep 2023 19:32:35 +0000

As a frontend developer, I sometimes need to change the visibility of mobile navigation or other ui elements without using JavaScript. Although it may seem hard at first, you can easily do this with CSS. In this article, I'll show you three easy ways to do it

1. Checkbox Hack

The checkbox hack is an ingenious way to use the :checked pseudo-class to manipulate other elements.

HTML:

<label for="menuToggle" class="menu-toggle">Menu</label>
<input type="checkbox" id="menuToggle" class="menu-checkbox">
<nav class="mobile-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.menu-toggle {
  cursor: pointer;
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
}

.menu-checkbox {
  display: none;
}

.mobile-nav {
  display: none;
}

.menu-checkbox:checked ~ .mobile-nav {
  display: block;
}

https://codepen.io/joxx/pen/QWzqbrE

2. Leveraging the :focus-within pseudo-class

Leveraging the :focus-within pseudo-class is another handy trick to toggle visibility.

HTML:

<a href="#" class="menu-toggle">Menu</a>
<nav class="mobile-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.menu-toggle {
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
  text-decoration: none;
}

.mobile-nav {
  display: none; 
}

.menu-toggle:focus-within + .mobile-nav {
  display: block; 
}

https://codepen.io/joxx/pen/MWZEYrg

3. Using the :target Pseudo-Class

This method revolves around the :target pseudo-class which gets triggered when an element with an ID matches the current URL's fragment.

<div id="mobileNav">
  <a href="#mobileNav" class="menu-toggle menu-open">Menu</a>
  <a href="#" class="menu-toggle menu-close">Close</a>
  <nav class="mobile-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS:

.menu-toggle {
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
  text-decoration: none;
}

#mobileNav:not(:target) .mobile-nav,
#mobileNav:not(:target) .menu-close {
  display: none;
}

#mobileNav:target .menu-open {
  display: none;
}

https://codepen.io/joxx/pen/oNJeROV

Conclusion

You can easily change the visibility of mobile navigation using only CSS. This way, frontend developers can create interactive features that are usually made with JavaScript. But, be sure to check if it suits your project's needs and is accessible. In certain situations, using JavaScript might still be a better choice, especially for complicated tasks or to help users using assistive technologies.

DEV Community: joachim kliemann

Creating Custom Scrollbars with CSS: A Short Guide

Basic Setup

Container Styling

Cross-Browser Implementation

WebKit Browsers (Chrome, Safari, Edge)

Firefox

Design Considerations

CSS Variables

Browser Compatibility

Best Practices

Final result

Conclusion

Creating an Accordion with JavaScript Classes: A Real-World Example

Understanding JavaScript Classes

Building the Accordion

HTML Structure

Styling the Accordion

JavaScript Class for the Accordion

Initializing the Accordion

Benefits of Using JavaScript Classes

Final result

Conclusion

Simplifying SCSS Compilation with Parcel.js

Understanding SCSS and Parcel.js

SCSS (Sassy CSS):

Parcel.js:

Setting Up Your Project

Writing SCSS

Running Parcel

Conclusion

Crafting a Responsive Design: Creating a Media Queries Mixin in Sass

Setting up the Breakpoints

Crafting the Media Queries Mixin

Implementing the Mixin in our SCSS file

HTML & SCSS Example Files

Final result

Creating an Organized SCSS File Structure Using Modern Practices

Table of Contents

Understanding Modern SCSS

The Modern 7-1 Pattern

Folder Structure

Modern File Structure

The Index Files

The Main File

Using Namespaces

Best Practices for Modern SCSS

Migration Tips

Performance Considerations

Conclusion

Setting Up a Modern Frontend Build Process with Rollup for SASS and JavaScript

Prerequisites

Getting Started

Setting up the Rollup Configuration

Setting up the SASS

Setting up the JavaScript

Setting up the HTML

Building the Project

Conclusion

Building a Tab Component with Pure CSS using Radio and Label Tags

Setting Up the HTML Structure

Styling with CSS

Enhancing the Active Tab

Final Result

Conclusion

Toggling Mobile Navigation Visibility with CSS: The Checkbox Hack

Basics of Checkbox Hack

Basic HTML Structure

Different Styles of Menus

Enhancements and Notes

Conclusion

The Power of CSS Resets and Embracing the Modern Approach

Why Use a CSS Reset?

What is 'A Modern CSS Reset'?

Why I'm Loving Andy Bell's Modern CSS Reset

Other Noteworthy CSS Resets

Final Thoughts

Coding Clean Popups: The Power of the HTML Element

Integrating HTML Element

Using JavaScript to Handle the Modal