Skip to content

Breakpoints

Jump to bottom
Marcos Rego edited this page Jan 1, 2023 · 25 revisions

Overview

Mr.Utils brings seven optional CSS files allowing you to use the utility classes at different breakpoints or hover state. Using extra files makes it possible to choose when and how to use those files without needing a CSS preprocessor and it also makes it easier to create new custom breakpoints.

The six breakpoint files and one hover state file have the following default names. The media queries are also a suggestion, check the "How to use" section below to know more.

default file name suggested media query
utils_phone.css (max-width: 767px)
utils_tablet.css (min-width: 768px) and (max-width: 959px)
utils_laptop.css (min-width: 960px) and (max-width: 1199px)
utils_desktop.css (min-width: 1200px)
utils_landscape.css (orientation: landscape)
utils_portrait.css (orientation: portrait)
utils_hover.css (hover: hover)

How to use

Using Mr.Dev.'s Framework

Breakpoints Utility Classes

  • Find the "Utilities" tab on the framework settings (If you can't find it, you might need to enable the option first on the configuration tab).
  • Select the options for the breakpoints that you want to use, save and start using the utility classes. You can add them on each block advanced section, on Custom HTML and more.

Changing breakpoints media query values

  • Go to the settings page of the framework and find the "Styles" tab at the top (If you can't find it, you might need to enable the option first on the configuration tab).
  • Find the breakpoints section at the end and change the values to your own.

Adding custom breakpoints

  • Go to the settings page of the framework and find the "Styles" tab at the top (If you can't find it, you might need to enable the option first on the configuration tab).
  • Find the breakpoints section at the end and increase the number of breakpoints.
  • Save and change the new created fields to your own values. The new breakpoints will now appear as options including on the "CSS Utils".

Wordpress plugin

If you install Mr.Utils as a plugin, without Mr.Dev.'s Framework, all default breakpoints and the hover state will load. However you can't create custom ones or change the media query values.

Manual usage

Adding the media queries

The easiest manual way to add media queries is not recommended unless you have a tool to unify all the CSS files (cloudflare/cache plugins). In that case, simply choose which of the below lines you want to add to the <head> section and start using the utility classes:

Hover

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_hover.css' media='(hover: hover)' />

Landscape

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_landscape.css' media='(orientation: landscape)' />

Portrait

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_portrait.css' media='(orientation: portrait)' />

Desktop

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_desktop.css' media='(min-width: 1200px)' />

Laptop

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_laptop.css' media='(min-width: 960px) and (max-width: 1199px)' />

Tablet

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_tablet.css' media='(min-width: 768px) and (max-width: 959px)' />

Phone

<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_phone.css' media='(max-width: 767px)' />

(If you want to avoid external requests, download this repository into your website and change the above href accordingly.)

Using multiple of the above without a CSS unifier increases the amount of HTTP requests. Other options to add the media queries without affecting performance are:

  • If you are using a CSS preprocessor, include the breakpoint files on your compilation wrapped by media queries.
  • If you are not using a CSS preprocessor, the only option left is to copy the content of the breakpoint files into your own CSS and wrap that with the intended media query.

Adding 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, following the methods explained above. 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)' />
Clone this wiki locally