-
Notifications
You must be signed in to change notification settings - Fork 0
Home
A front-end toolkit with a syntax friendly to everyone, that gives you utility classes, custom breakpoints, css variables and javascript functions. It’s used on Mr.Dev.’s plugins and you can also use on your own environment.
| Utility Classes | Variables |
|---|---|
| Easy HTML classes that help to implement and maintain common layouts or make structural changes, with possibility to target different devices with each action and using custom breakpoints. The classes were made to be easily understandable to designers and end-users but still friendly to developers by using a prefix. | CSS variables that allow to change the default values used on the classes margin, padding, sizes, transition duration, container, offcanvas colors and more. |
| Know more... | Know more... |
| Animations | Functions |
|---|---|
| CSS animations for fade, slide, scale and zoom. | Vanilla Javascript functions to do the most common dynamic tasks such as getting a cookie, check if an element is in view, make the page scroll to an element, parallax effect, switch color scheme body classes, copy to clipboard and more. |
| Know more... | Know more... |
| Offcanvas | Parallax | Copy | Toggles |
|---|---|---|---|
| A combination of CSS classes with an HTML checkbox input, to easily create a simple yet effective offcanvas section and a hamburger button to toggle it without needing Javascript. The same used on Mr.Dev.'s Framework. | A CSS class that triggers a javascript function to add a parallax effect to an image. | A CSS class that triggers a javascript function to copy the value of an input while doing a small animation. | CSS classes to add to a link or button to toggle body classes via javascript, such as color scheme classes. |
Mr.Utils is already built-in on the framework, all you need to do is to make sure its active on the options:
- Go to "Settings > Mr.Dev. (Or you website name depending of the configuration)".
- Find the tab "Utilities" (If you don't see it, you might need to enable it first on the "Configuration" tab)
- Select the options you want to use and save.
If you want an interface on the Wordpress' block editor to easily use Mr.Utils, without needing to know the classes or functions, you can install Mr.Utils as a plugin from Wordpress' Plugin Repository.
Add the below lines of code into the <head> section of your website:
<link rel='stylesheet' href='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils.css'/>
<script src='https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/js/utils.js'></script>
If you want to avoid external requests, download this repository into your website and change the above href accordingly.
If you want to use CSS utility classes with breakpoints, follow the simple steps given here
To manually add the above lines of code into the <head> section of a Wordpress website, you'll need to use wp_enqueue_style and wp_enqueue_script, unless you are using a specific framework/plugin that gives you another method.