Material design for bootstrap basics (MDB) - You should know

U

MATERIAL DESIGN FOR BOOTSTRAP BASICS (MDB)

by Aishwarya Kumar Singh | Aug 28, 2017 | Mobile development, Web Development | 0 comments

Before we proceed to know how to work in MDB, we must know what is MDB i.e Material Design for Bootstrap or in short sometimes it is just called Material Design Bootstrap.

a

It is a Bootstrap overlay, which provides a marvelous appearance consistent with the standards of Material Design by Google.

You may say that it is a theme for Bootstrap which allows you to use the Google Material Design for the best output in your most loved front-end framework.

The term overlay that we used above simply refers to MATERIAL DESIGN for BOOTSTRAP.

Let’s know what actually Material Design for Bootstrap is?

There is a very famous designing standard that was developed by Google which has a good reputation amongst the web designers and developers. Google coined a term for it which is known as Google Material Design.

There is another framework of HTML, CSS and Javascript which is popularly known as BOOTSTRAP which follows grid system and special design patterns.

Bootstrap was developed by Twitter.

Now both of these were having their own advantages for front end web development and designing.

So, Material Design for Bootstrap took features from both of these and combined them with new features and components resulting in a separate framework.

Why use Material Design Bootstrap(MDB)?

1. It has maximum features free to use.

2. It contains 400+ UI components.

3. It contains 600+ useful icons.

4. It is fully responsive.

5. It provides 700+ CSS animations.

6. It also provides plenty of useful templates.

7. It is easy to install.

8. It has cross browser compatibility.

9. And most important it is easy to use and customize.

Now that you have got to know so many advantages of MDB, so let’s proceed to learn how actually we can use MDB.

How to use MDB? The rst step, to start with Material Design for Bootstrap(MDB), just visit the o cial website and go to the download link.

The download link is given below. https://mdbootstrap.com/getting-started/ Although you will get links to proceed with GitHub, for ease of understanding, we will go with “DIRECT DOWNLOAD” link.

Just click the ‘DIRECT DOWNLOAD’ link.

Now after downloading is complete, you will get to see a zipped folder.

Simply unzip it to your desired location and hence you will have your MDB starting contents inside it.

Now, we will explore a little bit of the downloaded folder. The downloaded folder is actually the structure in which essential libraries, les and info based documents will be there.

1. css: This folder consists the les which de ne the styles and lookups of the pages that we design in our project. In this folder, you would nd the following les:

1. bootstrap.css: This is the le which includes the prede ned classes of bootstrap (which we discussed in the starting of this article).

2. bootstrap.min.css: This le is also the same as the above le but it is the mini ed version of it (it means all the styling code will not have spaces and extra lines. It takes lesser space in memory with the same functionality as the bootstrap.css le).

3. mdb.css: It is the le which includes the prede ned classes and the design patterns of the MDB. 4. mdb.min.css: This is the le which is similar to mdb.css but it is the mini ed version of it.

5. style.css: This is the le which helps you to put your own customized styling code that is required in the project. Â

2. js: Here we will keep all java script related les. As we know there are various components that need some functionality and for this, we need java script. This indeed makes it be called as a library that will help you cut short your code to some small lines.

The JS folder has following les: 1. bootstrap.js: This le will include the bootstrap related js into the project.

2. bootstrap.min.js: This le is same as above but it is the mini ed version of it that takes less space in memory.

3. jquery-2.2.3.js: This le will include the compatible version of jquery code that you need in your code (version here may be the latest one. Here we have 2.3).

4. jquery-2.3.3.min.js: This le is similar to the above le but it is the mini ed version of it.

5. mdb.js: This le will contain all java script and jquery code related to MDB that you will need in your project.

6. mdb.min.js: This le is same as above le but it is also the mini ed form of that le.

7. tether.js: Tether is a JavaScript library for making an absolutely positioned element stay next to another element on the page.

8. tether.min.js: It is same as above le but is the mini ed version of it. Â

3. font:

This folder is mainly for the fonts that we need to include in the project. The default font that is provided with the download is Roboto. The basic font formats that it includes are: 1. .ttf: TRUE TYPE FONT (developed by Apple and Microsoft) 2. .otf: OPEN TYPE FONT (result of a joint e ort between Adobe and Microsoft) 3. .wo : WEB OPEN FONT FORMAT (the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software.)

4. .wo 2: WEB OPEN FONT FORMAT 2.0 (second version of wo ) 5. .eot: EMBEDDED OPEN TYPE (designed by Microsoft to be the fonts used on the web.)

4. img: This is the folder where you will keep your images that you need in your project.

This folder is needed for keeping all the images in a well-arranged way.

In your index le, this folder’s path will be needed to refer to the images that you want to show on the web pages.

NOTE: This is the default image folder that comes along with the MDB. You may change your location as per the needs and preferences of the project.

5. sass: This is the folder which contains the most modular and maintainable CSS which is adaptive and shareable in every environment.

Sass is used to giving the output in a very powerful manner. This provides more productivity.

We generally use simple CSS instead of sass but this folder is there to help you to make styling work in an advance way if you really want to implement it.

Â

6. License.pdf: This is the le that contains the information regarding the product use and the license. This le tells the features that you will get under free and pro versions of the MDB (Material Design for Bootstrap).

The image below shows some part of it:

7. README.txt: This is another important le that you will get inside the downloaded MDB (Material Design for Bootstrap) folder.

It includes the information regarding the essential links that may be important for you to consider. This le includes the FAQs, support, tutorials, templates and many such other links that are useful to learn, practice, raise queries and do some other relevant stu in Material Design for Bootstrap community.

Contact Us

We are offline Leave us a Message

î¤

Now that we have learned a lot regarding the les and folders or we can say the folder structure of the MDB (Material Design Bootstrap), it is the time to know how actually we can include them in our project.

Let us make a folder for our demo project naming it demoMDB. Now cut everything inside the downloaded MDB folder (generally it has a name of MDB Free after extracting the downloaded folder) and paste them inside the demoMDB folder that we just created.

Now there must be a le with name index.html inside demoMDB folder, which is nothing but a demo page.

Now that we have everything inside our demoMDB folder and every le is present inside it and we have a demo page known as index.html, so we need to tell index.html le from where to include the important les.

The index.html le will look like the below code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <link href="css/mdbStyle.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body> <!—actual body content code goes here --> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/tether.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script>

25 26 27 28

<!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>

The thing here that must be kept in mind is the sequence of the les in which they are included.

It is very important to follow the order, because higher in the order means that the le has dependencies needed by the next listed le and if we change the order, then there may be some unwanted errors and warnings that can come up in the console and can block any major functionality that was needed.

Material Design for Bootstrap(MDB) has all the essential components that can make a website very attractive and good looking.

It has buttons, tags, navbars, models, cards, date-pickers and many other features that are fully organized and compatible with the properties of bootstrap and other major libraries.

Let us make a very basic example with the features of material design for bootstrap(MDB): In place of <!—actual body content code goes here –> just replace with the below code in index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="container text-center mainButtonDiv"> <h1 class="text-center maintainSpaces inputHeader">BASIC BUTTONS USED IN MDB</h1> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-default">Default</button> <!-- Secondary, outline button --> <button type="button" class="btn btn-secondary">Secondary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button>

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

</div> <div class="inputTute z-depth-4 hoverable"> <h1 class="inputHeader">INPUT FIELD EXAMPLES </h1> <br/> <h3> BASICS INPUT FIELD </h3> <div class="md-form"> <input type="text" id="form1" class="form-control"> <label for="form1" class="prefilled">Example label</label> </div> <h3> SMALL INPUT </h3> <div class="md-form form-sm"> <input type="text" id="form2" class="form-control"> <label for="form2" class="prefilled">Example label</label> </div> <h3> ICON PREFIXES </h3> <div class="md-form"> <input type="text" id="form3" class="form-control"> <label for="form3" class="prefilled">Example label</label> </div> <h3> PLACEHOLDER </h3> <div class="md-form"> <input placeholder="Placeholder" type="text" id="form4" class="form-control"> <label for="form4" class="prefilled">Example label</label> </div> <h3> PREFILLED INPUT FIELD </h3> <div class="md-form prefilled"> <input value="Habilelabs Pvt. Ltd." type="text" id="form5" class="form-control"> <label class="active prefilled" for="form5">Example label</label> </div> <h3> MESSAGES OF ERROR AND SUCCESS </h3> <!--Email validation--> <div class="md-form"> <input type="email" id="form6" class="form-control validate"> <label for="form6" data-error="wrong" data-success="right" class="prefilled">Type your email</label> </div> <!--Password validation--> <div class="md-form"> <input type="password" id="form7" class="form-control validate"> <label for="form7" data-error="wrong" data-success="right" class="prefilled">Type your password</label </div> <h3> DISABLED INPUT </h3> <div class="md-form"> <input type="text" id="form8" class="form-control" disabled> <label for="form8" class="disabled prefilled">Example label</label> </div> </div>

After doing this, there is some sort of css needed to give example a better look.So include the following css in style.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/* YOUR CUSTOM STYLES */ .backInput { /*background: url("../img/inputBG.jpg");*/ background-size: cover; } .inputTute { width: 85%; margin: 40px auto; padding: 30px; background: #fff; border-radius: 5px; position:relative; font-weight: bold; background-color:rgba(212,212,212,.2); -moz-transition:background-color 1.5s ease; -webkit-transition:background-color 1.5s ease; transition:background-color 1.5s ease; }

.inputHeader { font-weight: 700; }

.prefilled { margin-top: 5px; }

After all this has been done, you will get the following look in the web browser for the same page that we have written code for.

That was a very basic example for just a feel of material design for bootstrap(MDB). Know HTML and CSS guidelines for front end development.

MDB has many more features to be explored. You may consider going to the o cial website for more examples and tutorials.

Hope, this may have given you the basic idea of what Material Design for Bootstrap is and how it is used in any project.

Many of the big companies are now making their best components using MDB, so it must have given you the curiosity to use it your project as well.

We will explain MDB components in upcoming blogs. Share your views in the comment, what components you want to discuss about.

Share on Facebook

Share on Twitter

Share on Google+

ď&#x2020;&#x2026; Post Views: 15

Recent Posts Material design for bootstrap basics (MDB) 13 JavaScript Techniques to Improve Your Code 13 Basic Linux Commands for Beginners to Know 4 Bene ts to Use Angular JS With Salesforce Learning of Less CSS Variables Creation and Uses What is Meteor.js, a complete tutorial for beginners

Categories

Share on Linkedin