Why Mgplus ?

Mgplus is specially designed to quickly create a website or a small page with minimal dependencies for better performance and higher productivity

Mg+ (Milligram Plus) was conceived as an enhancement to the Milligram CSS framework : Milligram

The project began in early 2021 with the goal of providing a more robust and feature-rich alternative while maintaining the minimalistic approach of Milligram.

Core concepts

Mg+ is designed to be simple and intuitive. Here are some core concepts to keep in mind:

• Minimalism: Mg+ provides only the essential styles, allowing you to build on top of it without unnecessary bloat.
• Flexibility: Mgplus is highly customizable, enabling you to tweak the styles to match your design requirements by using css variables
• Performance: Mg+ is lightweight, ensuring fast load times and optimal performance.
• Responsive: Mgplus is fully responsive, adapting to various screen sizes and devices with ease.
• Dark mode: Mg+ comes with a built-in dark mode feature, allowing you to switch between light and dark themes with a single click.
• Compatibility: Mgplus is compatible with all modern browsers, ensuring a consistent experience for all users.
• Open source: Mg+ is an open-source project, licensed under the MIT License, allowing you to use it for personal and commercial projects without any restrictions.

Components

Mg+ comes with a range of features to help you build beautiful websites quickly and easily. Some of the key features include:

• Typography: A set of typography styles to help you create beautiful and readable text.
• Responsive grid: A flexible grid system that adapts to various screen sizes.
• Forms components: Stylish form elements that are easy to customize and integrate into your design.
• Buttons: A variety of button styles to suit different use cases and design requirements.
• Alerts: Alert styles to notify users of important information or actions.
• Badges: Badges to highlight important content or provide additional context.
• Dropdowns: Dropdown menus to create interactive navigation elements.
• Colors: A range of color classes to help you style your elements with ease.
• Icons: An Icon system and included set of icons to enhance the visual appeal of your website.

Utilities

In addition to components, Mg+ provides a set of utility classes to help you quickly style your elements. These include:

• Spacing: Margin and padding utilities to control the spacing around elements.
• Typography: Text alignment, font size, and font weight utilities.
• Display: Utilities to control the display property of elements.
• Flexbox: Flexbox utilities to create flexible and responsive layouts.

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 (statics websites)

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

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 (optional)

For interactive components like dropdowns, tabs, modals, etc. You can include the Mg+ JS file in your project to enable these features. The JS file is optional and can be included based on your requirements.

Default configuration

By default, all available plugins are registered

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

Custom configuration

Register only specific plugins by using inline query param

<script src="https://cdn.mgpluscss.com/v1.3.4/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

<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>

List of available plugins

• dropdowns
• tabs
• modals
• collapses

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

Base elements

These elements include typography, colors, and other basic components that are used throughout the application.

        
          {
            "jsonSample": true,
            "jsonObject": {
              "jsonKey": "jsonValue"
            },
            "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate.",
          }
        

Alert

Alerts are used to display important information to the user. They are used to display important information to the user. They are used to display important information to the user.

Badges

Badges are used to display important information to the user. They are used to display important information to the user. They are used to display important information to the user.

Default appearance

With custom text sizing

Check

You will find examples of checkboxes in their default, checked, and disabled states.

Collapse

Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of collapsible elements in their default state, as well as examples of how to trigger the collapse and expand functionality.

Collapsible navs

Colors

These colors are used to create a cohesive and visually appealing design. Below, you will find examples of how to use these colors in various elements and components.

Dropdown

Dropdowns are used to display a list of options to the user. Below, you will find examples of dropdowns in their default state, as well as examples of how to trigger the dropdown functionality.

Forms

Forms are used to collect user information and submit it to the server. Below, you will find examples of form elements in their default state, as well as examples of how to trigger the form functionality.

Responsive Grids

Grids are used to create a responsive layout for the application. Below, you will find examples of how to use the grid system to create a variety of layouts.

Row sizing and placement

Responsibve Row sizing

Row alignment

Col alignment

Row grow

Gap

Mg+ uses a modular system to define the gap between elements with rem based unit (0 to 10rem) mg-gap[0-10] mg-row-gap[0-10] mg-row-gap[0-10]

Group

Groups are used to display a list of options to the user. Below, you will find examples of groups in their default state, as well as examples of how to trigger the group functionality.

Icons

Icon sizing (s to 5xl)

The icons are categorized into different groups based on their usage. Below, you will find examples of navigation icons and action icons, all implemented using pure CSS.

Additionally, we demonstrate the different sizes available for these icons, ranging from small (s) to 5 extra-large (5xl). This ensures that the icons can be used in a variety of contexts and maintain visual consistency across the application.

Icon integration

Buttons

We provide examples of buttons with inline icons, as well as buttons that use SVG icons. These examples demonstrate how icons can be seamlessly integrated into button elements to enhance usability and visual appeal.

Badges

We provide examples of badges with inline icons, as well as badges that use SVG icons. These examples demonstrate how icons can be seamlessly integrated into badge elements to enhance usability and visual appeal.

Inputs

Inputs are used to collect user information and submit it to the server. Below, you will find examples of inputs in their default state, as well as examples of how to trigger the input functionality.

Loader

Loaders are used to indicate that a process is in progress. Below, you will find examples of how to use the loader system to create a variety of loading states.

Modal

Modals are used to display important information to the user. Below, you will find examples of how to use the modal system to create a variety of modal states.

Combine following classes with mg-modal to define orientation: mg-top | mg-bottom | mg-right | mg-left

Navs

Navs are used to navigate through the application. Below, you will find examples of how to use the nav system to create a variety of nav states.

Progress

Progress bars are used to indicate the progress of a process. Below, you will find examples of how to use the progress system to create a variety of progress states.

Radio

Radio buttons are used to select a single option from a list of options. Below, you will find examples of radio buttons in their default state, as well as examples of how to trigger the radio button functionality.

Range

Range sliders are used to select a value from a range of values. Below, you will find examples of how to use the range system to create a variety of range states.

Responsive display

Responsive display classes allow you to show or hide elements based on the screen size. This is useful for creating a responsive layout that adapts to different screen sizes.

Hidden effect (s,m,l,xl)

Display effect (s,m,l,xl)

Select

Selects are used to select a single option from a list of options. Below, you will find examples of how to use the select system to create a variety of select states.

Tabs

Tabs are used to display a list of options to the user. Below, you will find examples of how to use the tabs system to create a variety of tab states.