Documentation

Read

Introduction

To add MDP to your HTML project, simply add the following code to the head of your HTML file:

Table of contents

• Inputs
• Buttons
• Titles
• Paragraphs
• Links
• Codeblocks
• Images
• Spacing
• Special attributes
• Attributes

Inputs

To create an input, you start as you would in regular HTML:

Then add the type; as I said, there are only 5 input types supported, but in this section, well focus on the first three, which are: type="text" , type="number" , and type="password"

Lastly, we can add the label; we do that with mdp-label="". By default the width is set to 100%, we can change this by adding the mdp-width="" attribute.

We will get:

Dropdowns

Dropdowns are the fourth input type, but they are special because you must add them in a different way than the other input types.

To add a dropdown, first add an element, then add the id attribute  . After that, you can also add the mdp-width attribute to change the width of the dropdown (by default, the dropdown is set to 100%). In the end, we should get something that looks like either one of these

After that we can add the options. To do that just add an element inside the . Add the value="" attribute to the . In the end we should get something that looks like this:

With the code above we get:

Pressing the button below will show the current value, the code is no different than if we were using native HTML dropdowns.

Radio buttons

Radio buttons are the fifth input type. Radio buttons function the exact same as in vanila HTML. You can also add the mdp-label for a label next to the button

Using the code above we get:

Buttons

Buttons are quite possibly the simplest thing in MDP; you just add a button as you would in HTML and thats it.

And then we can add the mdp-position property; there are four positions you can choose from: either mdp-position="left", mdp-position="middle", mdp-position="right" or mdp-position="none". The first three are self-explanatory, and the none property allows you to set your own rules using custom CSS.

Using the code above we get:

Titles

When adding a title in MDP we start off by adding an H1-H6 tags

Then we can add an mdp-position tag, which we use to align the text. The mdp-position tag works the exact same as with buttons. (You can learn how the mdp-position works here . )

Using the code above we get:

Big title

Slightly smaller title

Even smaller title

Small title

Slightly smaller title

Tiny title

Paragraphs

Paragraphs in MDP work like titles, just add a <p> tag and optionally add the mdp-position property.

Using this code we get:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa ab quasi numquam voluptates impedit. Saepe, quaerat? Aspernatur, laboriosam autem molestias ipsam, qui eaque numquam sequi eius expedita ea a ipsa?

Links

When creating links you start with the tag, then you add the href, it'll look like this:

and that is it!

This code will look like this:

If you want to add more customization you can change the mdp-position="" property but in the case of links we must first set the mdp-display="" property to block

This code will look like this:

Codeblock

Codeblock can be used to display code, with support of syntax highlighting for a wide variety of programming languages.

To add a codeblock simply add a <code> tag. Make sure you also add the mdp-language="" attribute with the language the code you want to display is written in for syntax highlighting.

So for example this code:

Would look like this:

Images

To add an image you simply add the image as you would in native HTML

Spacing

You can use the mdp-margin="" and the mdp-padding="" to set custom margins and paddings for elements. It is no different than vanila CSS margins and paddings. Here are a few examples of usage of theese properties:

Special attributes

MDP offers some attributes that aren't commonly used, here they are:

• mdp-limit-computer-width

  mdp-limit-computer-width limits the max width of the body to 1000px so text can still be easily read on big screens where the distance from the end of the line to the start of the other line are too large to easily track. This will only works if the attribute is set to the body element

• mdp-hide-on-small-screens

  mdp-hide-on-small-screens hides the element on screens smaller than 800 pixels.

• mdp-hide-on-large-screens

  mdp-hide-on-small-screens hides the element on screens larger than 800 pixels.

• mdp-show-loading-screen

  mdp-show-loading-screen can be added to the body element, it shows a loading screen while the content of the page is being loaded.

• mdp-custom-cursor

  mdp-custom-cursor can be added to the body element, it displays a custom cursor instead of the default one.

Attributes

Below is a table showing which attributes work with which elements:

Made by Marko Irić