Mr.Utils includes a good preset of utility classes, for spacing, colors, sizes, components and much more. And when using it on WordPress, you and other users can even select them via the block editor.

But there might be occasions, that you need to have your own custom classes, and you might want them to be available on the editor also.

And maybe you want to use those custom classes on specific breakpoints: The 4 preset breakpoints might not be enough for you, if that’s the case, you can also create custom breakpoints.

On this tutorial, you will learn how you can add your own custom utility classes and breakpoints to Mr.Utils. There are two ways to do it:

• Using Mr.Dev.’s Framework – is the easiest way on WordPress.
• Manual implementation on Mr.Utils

Using Mr.Dev.’s Framework on WordPress

Create custom utility classes using Mr.Dev.’s Framework

1. Once on WordPress, go to “Settings” > “Mr.Dev.” (or your website name, depending of the configuration).
2. Go to the “Utilities” tab (If the tab is not available, you’ll need to enable the option on the “Configuration” tab, at “Utilities configuration”).
3. On “Default options” click on “Choose available features” and select “Custom” on each breakpoint where you’ll want your custom classes to be available.
4. Below on “Custom Utilities”, click on + to add the first class.
5. Choose the class name (the class will be generated from this name).
6. Choose the CSS property (A list of some properties will appear while you write, those properties can be used for the block editor. You can still use any CSS property you want, even the ones not listed, the only downside is those might not appear on the block editor, you’ll need to copy & paste the class).
7. Choose the CSS variable / value (If you have the “Styles” tab enabled, you can create the variables there, they will appear in here after. And you don’t have to use variables, you can also write the intended values directly here if you prefer.)

Tip: If you want a class to have multiple properties, you can do it, by having the same class name repeated multiple times.

Using the custom utility classes

Once you create the custom utility classes, you will see inputs showing how the class looks for each breakpoint (that you selected on the 3rd step). You can click on the input to copy the class and then paste into your HTML, CSS, etc.

If the option “Show utilities on the block editor” is active, you can use the block editor to use the custom classes, for options related to spacing, coloring and sizes.

Add custom breakpoints using Mr.Dev.’s Framework

1. Once on WordPress, go to “Settings” > “Mr.Dev.” (or your website name, depending of the configuration).
2. Go to the “Styles” tab (If the tab is not available, you’ll need to enable the option on the “Configuration” tab, at “Styles configuration”).
3. Scroll down to the “Breakpoints” section, where you will find 4 preset breakpoints already created, that you can change the values.
4. Click on “+” on “Number of Breakpoints” to add a custom breakpoint.
5. Choose the name for the breakpoint and define the min/max – width/height.

Using the custom breakpoints

Once you create the custom breakpoints, you can select them on the “Utilities” tab or/and on the “Files / Media” tab.

On the “Files/Media” tab, you can choose on which breakpoints each spreadsheet should load (In production, do not forget to use a cache plugin with minifying options, to combine these spreadsheets, while keeping the breakpoints and their media queries).

Manual implementation on Mr.Utils

Create custom utility classes

1. Download Mr.Utils.
2. Go to “dev/css”. Each folder located in here corresponds to one breakpoint (except for “utils” that is global).
3. Go to each folder/breakpoint where you want your custom classes to be available and create a utils_breakpoint_custom.css file on each one.
4. Open all the created files and add a class, following the utilities rules. Example: “.mr-breakpoint-fontsize10 { }“.
5. Add the intended CSS properties to each class. Example: “font-size: var(--font-size-10,60px);“.
6. Once you created all classes on all utils_custom.css, go to the main file on each folder/breakpoint, titled “utils_breakpoint.css”.
7. Add the following line: @import url("utils_breakpoint_custom.css"); Replacing “breakpoint” with the actual breakpoint name.
8. For development, you can load each of the main “dev/css/utils_breakpoint/utils_breakpoint.css” files, with media queries.
   For production, you should use your favourite compiler, to compile the main files into the main “css” folder (located in the root folder). Use media queries to load all files inside that folder and then, use a page/html minifier to join all those media queried files into one.

Add custom breakpoints

With more files you can add more breakpoint names and media queries:

1. Start by copying one of the given breakpoint files. For this example, copy the file ‘utils_desktop.css’.
2. Change the file name to the name of your breakpoint. For this example rename it ‘utils_notmobile.css’ .
3. Use your favorite code editor to find and replace all instances of ‘-desktop-‘ with ‘-notmobile-‘.
4. Save the file next to other breakpoints and load it with your own media query. For this example, the easiest would be to add the following to the <head> section:
   <link rel='stylesheet' href='mr-utils/css/utils_notmobile.css' media='(min-width: 768px)' />

Comments

If you ever tried to change the look and feel of a HTML5 datalist but couldn’t, then this post might be your (delayed) Christmas present 🎄🎁 (I hope you had a great one and close to the ones you love the most)!

What’s the problem of styling a HTML5 datalist?

At the moment of writing, it’s not possible to style a datalist directly.

Hopefully in the future, we will be able to simply use normal CSS like this:

.mr-datalist > * {
    background-color: var(--dark);
    color: var(--light);
}

For now, if you still want to use datalist, there are two ways to do it:

• An easy way, using a class from a front-end toolkit.
• A more manual way, using Vanilla JavaScript.

The CSS code above will work after implementing any of those 2 options.

Some things that might be important to you: 

• These methods might not work on iOS versions prior to the 13th. On those devices, the datalist will not change, working as it does by default.
• Both methods should be future-proof. When HTML5 data lists become easier to style, you can remove the front-end toolkit or the JavaScript code. Just keep the classes and the CSS as is.

With that aside, let’s move on with this tutorial…

The easiest way to style a datalist

You can use a front-end toolkit such as Mr.Utils.

All you have to do is, make sure you are adding the global JavaScript file js/utils.js in your page (or if you don’t want to load the entire toolkit, you can individually add dev/js/utils/utils_components.js).

After that, you need to add the correct class .mr-datalist to your datalist (not to the input) and it will magically transform it into a “search” component.

You can then style it with a CSS code similar to the one shown before.

Style a datalist with code

I mentioned that the easiest way of implementation works like magic, but of course there’s no magic behind it at all, just the correct JavaScript code.

In this post, I’ll share a simplified version of that code with you.

You can either follow the steps or jump directly to the Gist full code.

Feel free to change it to your specific needs.

1- Transform the datalist into an element that can be styled.

document.addEventListener("DOMContentLoaded", function () {
  const mrDataLists = document.querySelectorAll(".mr-datalist");
  for (let id = 0; id < mrDataLists.length; id++) {
    let mrDataList = mrDataLists[id];
    let mrDataListUL = "";
    let mrDataListClone = "";
 
    mrDataListClone =
      mrDataList
        .cloneNode(true)
        .innerHTML.replaceAll("<option", "<li")
        .replaceAll("</option>", "</li>");
    mrDataListUL = document.createElement("ul");
    mrDataListUL.id = mrDataList.id;
    mrDataListUL.className = mrDataList.className;
    mrDataListUL.innerHTML = mrDataListClone;
 
    mrDataList.replaceWith(mrDataListUL);
  }
}

In this first step, we grab all data lists that have the class .mr-datalist, but you can change it to your own.

You can even grab all data lists without exception, by replacing the class .mr-datalist with the property datalist, on the querySelectorAll (Don’t forget to change the CSS code accordingly at the end).

In this example, we transform the datalist into an unordered list. You can change that if you wish, but it should be an element with direct children. Each direct child will be a datalist option.

The replaceWith at the end finishes the transformation, but we are not done yet.

We need to create a similar “search” functionality to the one the HTML5 datalist has.

2- Make the input find content on the element.

document.addEventListener("keyup", function (e) {
  let mrDataListID = "mr-datalist";
  if (e.target.matches('input[list="'+mrDataListID+'"]')) {
    mrSearch(document.getElementById(mrDataListID), e.target);
  }
  e.stopPropagation();
});

In here, I’m assuming we know the ID of the datalist, and that we have it on the input “list” attribute. I’m assuming that because those are needed for the original datalist to work.
In this example, the ID is mr-datalist, set on the mrDataListID variable.

If for some reason you don’t know the ID, there are alternative ways to do it. On Mr.Utils for example, the “Search” component removes the original input, creates a new one and uses nextElementSibling. It does that for a reason, you can check that on the GitHub repository.

As you might notice, we are calling the function mrSearch, which will do the heavy work. 

Here is the function simplified, feel free to rename it to anything you want:

function mrSearch(t, e) {
  //t = Datalist
  //e = Input with list attribute
  let mrSearchChildren = t.children;
  if (mrSearchChildren) {
    if (e.value !== "") {
      t.style.removeProperty("display");
      for (let id = 0; id < mrSearchChildren.length; id++) {
        let mrSearchChild = mrSearchChildren[id];
        if (mrSearchChild.hasAttribute("value")) {
          //If the child does not contain any text, show the value as text.
          if (!mrSearchChild.innerText) {
            mrSearchChild.innerText = mrSearchChild.getAttribute("value");
          }
 
          //Change the input value when clicking on the child.
          mrSearchChild.addEventListener("click", function () {
            e.value = mrSearchChild.getAttribute("value");
          });
        }
        mrSearchChild.style.display = "none";
 
        //Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.
        if (
          mrSearchChild.outerHTML
            .toLowerCase()
            .replace(/[^a-zA-Z0-9 ]/g, "")
            .includes(e.value.toLowerCase().replace(/[^a-zA-Z0-9 ]/g, ""))
        ) {
          mrSearchChild.style.removeProperty("display");
        }
      }
    } else {
      t.style.display = "none";
    }
  }
}

Here we changed the Input value when clicking on the element child (the datalist option that we transformed) and we’ll make the search case-insensitive.

Check the comments inside the code to better understand which parts replicate which datalist “search” feature.

Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don’t have, then this code as you covered, it copies the value into the text when no text is found.

And that’s it! Now you replicated most datalists’ functionalities and can start styling the element, with a CSS code similar to the one shown before.

3- Take it to the next level (Optional and Advanced)

If you feel inspired, now that you have full control over the code, you can add extra features! Features that not even the original datalist has.

For example:

• Show a message when no result is found.
• Bold the text while it is found on the results.
• If no exact match is found, search by each keyword instead (You can also show a message in that situation).
• Show results only after a minimum number of characters (This is a good idea to avoid connection words and code properties).

I did many of those features for Mr.Utils, you can check the part of the code here.

Might also be a good idea, to track pressing keyboard arrow keys, to select the results and improve accessibility.

Gist full code on how to style a datalist

Working example of styling datalists

I did something very similar to the methods explained above for Rydoo’s Compliance Centre and Marketplace.

I hope you enjoyed this post! I’m not sure that I will be writing something more on the blog before entering the new year, so enjoy the celebrations and let’s enter 2023 with the right footer!! 🥂🎆🥳

Comments

A front-end toolkit with a syntax friendly to everyone, that gives you utility classes, custom breakpoints, css variables and javascript functions.

Utilities used on Mr.Dev.’s plugins that you can also use on your own environment.

If you are using WordPress you can even install it as a plugin. You’ll get friendly options on the block editor, which allow you or your clients to use all the features without needing to know the classes or functions.

Let your visitors turn the pages!

FlipBook Block is a simple yet effective WordPress block that shows a PDF from your Media in a Flip Book.

Mr.Dev. is your provider of developing tools!

He gives you a powerful WordPress widget to display your content with many customizable layouts and options.

Portfolio and eCommerce website developed for Itemzero, a design studio specialized in the intersection between technology, information design and editorial design.

This project is heavily powered by Mr.Dev. and it’s the perfect showcase of what is possible to do when combining his framework with his frontend toolkit.

The framework allowed the use of the block editor on WooCommerce product pages.
The frontend toolkit (Mr.Utils) allowed to make specific customizations and to easily use components such as sliders and tabs inside the block editor.

And because this website uses those plugins that I developed, some other plugins that I selected and because I manage this website’s server + domain, Itemzero’s score on Google Pagespeed Insights shows excellent results.

Fazer is a new Portuguese magazine about design, their eCommerce website was designed by Carvalho Bernau and developed by me.

The development of this project showcases perfectly the combined power of WordPress‘ block editor, with Mr.Dev.’s Framework, Mr.Dev’s Theme, Mr.Utils and some custom code.

Mr.Dev.’s Theme is a boilerplate theme, that allowed using all the features of the block editor on WooCommerce pages (including products and templates), while having the default colors managed from Mr.Dev.’s Framework.

Mr.Utils with Mr.Dev.’s Framework, added extra style options to the block editor including custom utility classes. That was very handy to define variables to all sizes (font-sizes, padding, margins, etc) and have them editable from one unique place in the backend if needed.

For all the custom code, I used the file manager of Mr.Dev.’s Framework to select where to load each CSS and JS, reducing unused code for each page. This was important for speed purposes. Some PHP custom code was also created. All files can be accessed trough the Framework and edited on the backend, using WordPress’ default plugin files editor.

The custom code was important to reach some specific needs of the design, here are some examples:

• Temporarily have the homepage redirecting to the most recent product/magazine-issue.
• Align footnotes with the text, according to the position of the note in the text (on non-mobile breakpoints).
• Automatically detect the color of the most recent product and apply it as accent color on the entire site (Products’ colors are added on Mr.Dev.’s Framework, by having the variable equal to the product slug).
• Allow different svg logos for each product (Uses safe SVG).
• Enable cache for almost all the pages, regardless of the cart item count. This was made possible by having custom javascript and cookies, to detect the number of items in cart. Also detects which products, to show a “View the cart” when a product is already in the cart.
• Detect when the scroll passes the header to change the color of the logo, menu, and “Buy” buttons from white to the accent color.
• Use the alt text of an image, to tell which should be the object-position/background-position for each breakpoint.
• Highlight the sub-menus according to the scroll on the page.
• Replace default tags taxonomy in favor of authors (multiple authors).
• Automatically create categories in Afazeres/Blog matching each WooCommerce product.

Website designed by Carvalho Bernau and developed by me, for the architecture atelier founded by Maria Cristina Campilho.

This website was made in WordPress, using plugins and tools developed by me, such as Mr.Dev.’s Framework. It uses classes and components from Mr.Utils front-end toolkit.

Thanks to that and because I manage this website’s server + domain, Atelier Campilho’s website score on Google Pagespeed Insights shows excellent results.

Website designed by Itemzero and developed by me for an architecture, engaging towards ecologic design.

In here you can see a good example of how powerful it can be to combine Mr.Utils with WordPress block editor. For the horizontal scroll/drag/swipe content, the trick was to add the class mr-swipecontent to the respective block’s advanced options.

And also for this website, Mr.Dev.’s Framework was used, with the offcanvas option active on mobile and placing reusable blocks (for logo, menu and lang switcher) on website sections (This was prior to the templates option on WP 5.8).

And because this website uses those plugins that I developed, some other plugins that I selected and because I manage this website’s server + domain, Ressano Garcia Arquitectos score on Google Pagespeed Insights shows excellent results.

Website made in partnership with NoMundo for A Junção do Bem Foundation.

This WordPress website is powered by Mr.Dev.’s Framework and Mr.Utils.

It uses the Swipe component on the “Iniciativas” page and uses pagination options on “Documentos legais” page, to create a slide with one item per page.