About MDB advanced features

Hey, you've come a long way. Good job, congratulations!

We have all the most important basics covered and now we can start the real fun. It's time to get to know the advanced functionalities of the MDB environment.

Huh, this is gonna be great, can't wait to jump into the code 😎

First, however, let's answer the key question - what are these advanced features? Let's talk about them briefly one by one.

Starters / build tools

Starters a.k.a. build tools or module bundlers help developers in many things, like:

• Bundling
• ES6+ support
• SCSS Support
• Linting
• Unit Testing
• Code Formatting
• Removing unused CSS
• Deploy

Some of these terms may already be familiar to you, but if not, don't worry. We will explore them all in detail in the following lessons.

MDB provides starters for the 3 most popular build tools:

• Vite
• Webpack
• Parcel

In this tutorial, we will use the Vite starter because Vite is currently considered the fastest and easiest build tool to use.

SCSS

SCSS stands for Syntactically Awesome Style Sheet and brings many improvements to good old CSS.

You can think of SCSS as CSS on steroids.

It's hard to imagine any advanced web project these days that doesn't use SCSS, so in this tutorial you'll learn the basics and how to use it with MDB and our starters.

Optimization

MDB is a huge library with lots of components and functionality, and you'll rarely need all of them in your project at once.

That's why it's so important to optimize your project. With MDB starters, you can reduce code weight by up to 90% by removing unnecessary CSS and JavaScript.

Thanks to this, your website / application will work faster and more efficiently.

Utilities API

The utility-first approach is rapidly gaining popularity. It involves emphasizing writing code with "small" CSS classes that closely correspond to and constrained to a given CSS property (e.g. bg-red class for the background-color: red CSS property) instead of creating "big" classes that aggregate many different properties ( such as the card class aggregates multiple CSS properties that make up the card component, such as padding, shadow, display, and many more).

Bootstrap and MDB try to find a balance between these two approaches. On the one hand, they provide a wide range of predefined components, and on the other hand, an equally wide range of utilities.

An additional, extremely useful option is our Utilities API. It is a tool that allows you to easily adjust existing utilities to the needs of a given project or create new utilities if needed.

Customization

Each project is different and has unique needs, so there will never be a perfect, ultimate UI KIT / Library / Framework that perfectly meets the needs of everyone.

This is why easy customization is essential. MDB provides such capabilities and in this tutorial we will learn how to use them and how to adapt our library to the needs of the project.

• Playful
• Classic
• Extravagant

Stylish leather jacket

In stock

$119$101

---

Add to cart Buy

Luxurious watch

In stock

$55 000

---

Add to cart Buy

Well, that's a mayonnaise

In stock

$2

Internationalization

MDB is used by users all over the world, so we realize how important it is to enable easy translation into any language.

That is why we have put at your disposal the so-called i18 feature, thanks to which you can easily implement internationalization in your project.

Click the button below to see a demo of the MDB components with implemented internationalization.

(To change the language, click on the flag in the upper right corner of the screen)

RTL

Many languages, such as Arabic, Persian, Hebrew, are written from right to left.

MDB provides the RTL feature so you can easly adapt your project to the needs of users who speak one of the languages that are written from the right to the left.

Click the button below to see a demo of the MDB components in the RTL mode.

VSC snippets

Jumping between the documentation and the editor to copy the code of a given component is cumbersome.

That's why MDB provides a useful extension to the VSC editor that will give you easy access to the most important MDB components directly in your editor.

Dark mode & theming

MDB Theming system enables you to customize the appearance of all MDB components and create a famous dark-mode.

In this tutorial we will learn how to use it.

To see it just go to the homepage or any page of the documentation and click shift + d keys to toggle dark mode.

Okay, enough of the theory. Let's roll up our sleeves and start coding!