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.

Auto register all plugins

Just add following script at the end of your page

Register specific plugins

Just add following script at the end of your page with required plugin names to register separated by a comma

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

        

            
              Choose a car
            
            

              

                
Audi
                
BMW
                
Citroen
              
            
          
        

List of available plugins

• navsdata-toggle="nav"
• dropdowns data-toggle="dropdown"
• tabs data-toggle="tabs"
• modals data-toggle="modal"
• collapses data-toggle="collapse"
• darkmode (enabled globally in your page)

Configure DarkMode

In your main html document page, set data theme value among those data-theme=["dark"|"light"|"auto"]

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

Customization

MgPlus provides a set of CSS variables that allow you to customize the look and feel of your application. Below is a list of all available variables and their default values.

Colors

Dark Mode Colors

Typography

Borders and Shadows

Grid

Z-Index

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

Combine the mg-alert class with other classes to create different types of alerts. You can use the mg-alert class to create a basic alert box, and then add additional classes to change its appearance. The following classes are available: mg-alert danger, mg-alert success, mg-alert warning. You can also add an icon to the alert box by using the mg-icon class. The icon can be closed by using the icon-close class.

Badges

Combine the mg-badge class with other classes to create different types of badges. You can use the mg-badge class to create a basic badge, and then add additional classes to change its appearance. The following classes are available: mg-badge danger, mg-badge success, mg-badge warning. You can also use the mg-text-s, mg-text-m, mg-text-l, and mg-text-xl classes to change the text size.

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.

Place mg-collapse class to a clickable element

Place mg-collapse--content just after the clickable element

Adding opened class to mg-collapse will toggle visibility of the collapsible content inside mg-collapse--content

Place special inline icon mg-icon-collapse to reflect state of collapsible content

Collapsible navs

Colors

MgPlus provides a set of predefined colors that you can use throughout your application. These colors can be customized for both light and dark modes

Light Mode Colors

Here are the main colors available in light mode (default)

Basic Colors

Here are some basic colors available:

Dark Mode Colors

In addition, you can customize the equivalent of these colors for dark mode:

        --mg-dark-color-initial: var(--mg-color-dark);
        --mg-dark-color-secondary: hsl(255deg 0% 80%);
        --mg-dark-color-tertiary: hsl(255deg 0% 70%);
        --mg-dark-color-quaternary: hsl(255deg 0% 50%);
        --mg-dark-color-quinary: hsl(255deg 0% 25%);
    

Dark Mode Conditional Hidden Effects

Automatically hide or show an element according to the current theme color. This is useful when you need to adapt an element or image in dark or light mode.

Dropdown

Place mg-dropdown as container class

Inside mg-dropdown place a button element with special icon mg-icon-dropdown

Place mg-dropdown--content after button element

Usualy, place a mg-nav component inside mg-dropdown--content to build a menu

Forms

Below, you will find examples of form elements in their default state, as well as examples of how to trigger the form functionality.

You can use grid system classes to create responsive form layouts.

Place mg-col class to a fieldset element to create a form section.

Place mg-inline-flex class to a div element to create inline inputs.

Place mg-row class to a div element to create a row of form elements.

Group

Place mg-group class to a div element to create a group of buttons or inputs.

Icons

Icon sizing (s to 5xl)

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

MgPlus provides a variety of input styles to enhance user experience

Different sizing and icon integration options are available to accommodate various design needs

Styled inputs

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.

Place mg-loader class to a div element to create a loader.

Place mg-loader--status just after mg-loader class to a div element to create a loading status message.

If needed place mg-loader--result class to a div element to create a loading result message after the loading process is completed.

Modal

A Modal is composed by a trigger button and a modal content window. The modal content window is hidden by default and can be displayed by clicking the trigger button.

To create a modal, you need to use the following classes: mg-modal for the modal content window, mg-modal--content for the content inside the modal, and mg-modal--body for the body of the modal.

If you use MgPlus JS plugins just add the following attributes to the trigger button to open the modal: data-toggle="modal" and data-target="id-of-modal-content"

Otherwise to toggle visibility of the modal, you need to add dynamically opened class to mg-modal element when you want to open it (usually on click) mg-modal opened

Combine following classes with mg-modal to define orientation: mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--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.

Nav buttons with custom background

• Home
• News
• Contact
• About

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

Horizontal aligment

Horizontal alignment can be set using the mg-row class. combined with mg-x--offset[1-12] mg-x--start mg-x--center mg-x--end mg-x--around

Row sizing and placement

Responsibve Row sizing

Row alignment

Vertical alignment mg-col

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-col-gap[0-10]

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.

If you use MgPlus JS plugins, just add data-target="id_of_tab_content" to tab list menu and data-toggle="tabs" to the main container (mg-tabs). This will allow you to toggle between different tab contents.

Otherwise, you need to implement the tab switching functionality manually using JavaScript by adding/removing the active class to selected item of tab menu and item to the tab content as well.