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.
To quickly get started with Mg+, follow these steps:
<head>
section of your HTML file to apply the default
styles:<link rel="stylesheet" href="https://cdn.mgpluscss.com/$PACKAGE_VERSION/css/mgplus.css">
</body>
to enable interactive
components<script src="https://cdn.mgpluscss.com/$PACKAGE_VERSION/js/mgplus-dom.js"></script>
<button class="mg-button">Click me</button>
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);
}
By default, all available plugins are registered
<script src="https://cdn.mgpluscss.com/$PACKAGE_VERSION/js/mgplus-dom.js"></script>
Register only specific plugins by using inline query param
<script src="https://cdn.mgpluscss.com/$PACKAGE_VERSION/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-icon-dropdown" 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>
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