DEV Community: Martin Milani

rEFInd Themes Collection

Martin Milani — Thu, 21 Mar 2024 12:46:55 +0000

Frustrated by endlessly scrolling through GitHub repositories in search of the perfect rEFInd theme? I created this simple Astro webpage to streamline the process. It showcases a gallery of rEFInd theme screenshots, allowing you to effortlessly browse and choose the theme that best suits your style.

rEFInd, the popular open-source boot manager, offers a fantastic degree of customization. Themes let you change the background, icons, fonts, and more, creating a unique boot experience. But finding the perfect theme can be time-consuming.

This curated collection streamlines the process, featuring a variety of themes from GitHub repositories. Here's what you'll find:

Minimalist themes: Keep it clean and simple with themes that focus on functionality and clear iconography.
Themed experiences: Channel your inner fanboy with themes inspired by popular operating systems, games, or movies.
Colorful creations: Liven things up with vibrant themes that showcase your personality.

Exploring text-wrap: balance and text-wrap: pretty in CSS

Martin Milani — Wed, 29 Nov 2023 13:09:32 +0000

In the world of CSS, the handling of text within containers often requires careful consideration to maintain readability and aesthetics. Two lesser-known CSS properties, text-wrap: balance and text-wrap: pretty, offer intriguing solutions for text layout. Let's dive into these properties and understand their capabilities.

text-wrap: balance

Mainly use to balancing headlines text-wrap: balance attempts to distribute the text evenly across lines, reducing the unevenness often seen in standard text layouts.

Consider the following example:

.balanced {
  text-wrap: balance;
}

text-wrap: pretty

On the other hand, text-wrap: pretty will try to intelligently break the text in block elements in such a way that there wouldn’t be a single/orphan word on the last line.

Consider the following example:

p {
  text-wrap: pretty;
}

As for the browser support, the text-wrap: pretty is estimated to be landed in Chrome 117 across desktop and Android browsers.

(All images by developer.chrome.com)

Enhancing User Experience: Creating Custom Checkboxes with Tailwind CSS and React

Martin Milani — Mon, 13 Nov 2023 16:02:32 +0000

Checkboxes are a fundamental component of web forms, but their default appearance can often lack visual appeal. Thankfully, leveraging the versatility of Tailwind CSS allows you to effortlessly craft custom checkboxes, elevating the overall user experience on your website.

Prerequisites

Before diving into customization, ensure you have React and Tailwindcss installed. Additionally, incorporate the tailwindcss/forms plugin for a streamlined approach to styling form elements.



npm install -D tailwindcss/forms

Then add the plugin to your tailwind.config.js file:



// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Crafting the HTML Structure and Applying Basic Styling



<div className="relative">
          <input
            className="text-violet-500 focus:ring-violet-300 border-gray-300 peer rounded-lg w-6 h-6 "
            id="custom-checkbox"
            name="custom-checkbox"
            type="checkbox"
            value="custom-checkbox"
          />
          <label
            className="w-[400px] h-[80px] cursor-pointer flex flex-row justify-between items-center border rounded-lg p-4 "
            htmlFor="custom-checkbox"
          >
            <div className="flex flex-row justify-between items-center w-[380px] ml-10 mr-4">
              <div>
                <h3 className="font-bold">Online service</h3>
                <p className="text-sm text-gray-400">Access to multiplayer games</p>
              </div>
              <p className="font-bold text-violet-600">$10/mo</p>
            </div>
          </label>
        </div>

Understanding the Power of peer Class

To improve alignment, use the position: absolute style on the input element, ensuring it aligns correctly within the label. The peer class in Tailwind is crucial for styling an element based on the state of a sibling element. In this case, it helps manage the style of the label when the input is checked.



<div className="relative">
  <input
    className="text-violet-500 focus:ring-violet-300 border-gray-300 peer rounded-lg w-6 h-6 absolute top-7 left-4 "
    id="custom-checkbox"
    name="custom-checkbox"
    type="checkbox"
    value="custom-checkbox"
  />
  <label
    className="w-[400px] h-[80px] cursor-pointer flex flex-row justify-between items-center border rounded-lg p-4  
  active:bg-violet-700 
  peer-focus:outline-none peer-focus:ring peer-focus:ring-violet-300 
  peer-checked:border-violet-300 peer-checked:bg-violet-100
  hover:bg-violet-100"
    htmlFor="custom-checkbox"
  >
    <div className="flex flex-row justify-between items-center w-[380px] ml-10 mr-4">
      <div>
        <h3 className="font-bold">Online service</h3>
        <p className="text-sm text-gray-400">Access to multiplayer games</p>
      </div>
      <p className="font-bold text-violet-600">$10/mo</p>
    </div>
  </label>
</div>;

Now, the custom checkbox input is not only visually appealing but also properly aligned, providing a seamless user experience. 🚀

I hope this was helpful for you!