Getting Started

To get started with Mg+, include this CSS file from our CDN in your project and start using the predefined classes to style your elements. You can also customize the styles to fit your needs.

Quick start

To quickly get started with Mg+, follow these steps:

  1. Include the Mg+ CSS file in the <head> section of your HTML file to apply the default styles:
  2. <link rel="stylesheet" href="https://cdn.mgpluscss.com/v1.3.0/css/mgplus.css">
  3. Include the Mg+ JavaScript file before the closing </body> to enable interactive components
  4. <script src="https://cdn.mgpluscss.com/v1.3.0/js/mgplus-dom.js"></script>
  5. Start using the predefined classes in your HTML elements. For example, to create a button, you can use:
  6. <button class="mg-button">Click me</button>

Customizable css variables

To customize Mg+ variables, just override the root variables. For example:

:root {
    --mg-primary-color: #3498db;
    --mg-secondary-color: #2ecc71;
    --mg-control-radius: 1.5rem;
    --mg-input-radius: 1.5rem;
    --mg-control-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
}

JS Plugin configuration

Default configuration

By default, all available plugins are registered

<script src="https://cdn.mgpluscss.com/v1.3.0/js/mgplus-dom.js"></script>

Custom configuration

Register only specific plugins by using inline query param

<script src="https://cdn.mgpluscss.com/v1.3.0/js/mgplus-dom.js?register_plugins=dropdowns,tabs,modals,collapses"></script>

To allow plugin works for your mgplus css components Add html attribute data-toggle=["plugin_name"] in your html components

Example:
<div class="mg-dropdown">
        <button title="choose a car" class="mg-dropdown--icon" data-toggle="dropdown">
            Choose a car
        </button>
        <div class="mg-dropdown--content">
            <div class="mg-nav">
                <ul>
                    <li data-value="audi">Audi</li>
                    <li data-value="bmw">BMW</li>
                    <li data-value="toyota">Toyota</li>
                </ul>
            </div>
        </div>
    </div>

List of available plugins

Configure DarkMode

In your main html document page, add attribute data-theme="dark" or data-theme="light" or data-theme="auto"

<html lang="en" data-theme="auto">...

"auto" mode will use your system browser preference to choose dark or light mode

Js extensions are required only to handle interactions with dom events for navs, tabs, dropdowns, modals, etc. It could be replaced by creating a wrapped UI components with react, angular or other any UI framework