diff --git a/demo/sections/form-section.html b/demo/sections/form-section.html
index 2c431fa9..0e35de53 100644
--- a/demo/sections/form-section.html
+++ b/demo/sections/form-section.html
@@ -19,12 +19,12 @@
Forms
- Include the Mg+ CSS file in the
<head>
section of your HTML file to apply the default
styles:
- <link rel="stylesheet" href="https://cdn.mgpluscss.com/v1.3.0/css/mgplus.css">
+ <link rel="stylesheet" href="https://cdn.mgpluscss.com/$PACKAGE_VERSION/css/mgplus.css">
- Include the Mg+ JavaScript file before the closing
</body>
to enable interactive
components
- <script src="https://cdn.mgpluscss.com/v1.3.0/js/mgplus-dom.js"></script>
+ <script src="https://cdn.mgpluscss.com/$PACKAGE_VERSION/js/mgplus-dom.js"></script>
- Start using the predefined classes in your HTML elements. For example, to create a button, you can use:
<button class="mg-button">Click me</button>
@@ -35,13 +35,13 @@ 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>
+ <script src="https://cdn.mgpluscss.com/$PACKAGE_VERSION/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>
+ <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
@@ -50,7 +50,7 @@
Custom configuration
Example:
<div class="mg-dropdown">
- <button title="choose a car" class="mg-dropdown--icon" data-toggle="dropdown">
+ <button title="choose a car" class="mg-icon-dropdown" data-toggle="dropdown">
Choose a car
</button>
<div class="mg-dropdown--content">
diff --git a/demo/sections/grid-section.html b/demo/sections/grid-section.html
index 2335e835..c7b20cde 100644
--- a/demo/sections/grid-section.html
+++ b/demo/sections/grid-section.html
@@ -1,10 +1,10 @@
- Flex Grids
+ Responsive Grids
This section showcases the functionality of grid elements in our design system. 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
-
+
x4
x3
@@ -18,7 +18,7 @@
Row sizing and placement
-
+
@@ -27,17 +27,54 @@
Row sizing and placement
+
Responsibve Row sizing
+
+
Hidden effect (s,m,l,xl)
-
-
hidden until small screen
-
hidden until medium screen
-
hidden until large screen
-
hidden until extra large screen
-
display until small screen
-
display until medium screen
-
display until large screen
-
display until extra large screen
+
+
mg-s--hidden
hidden for small screen
+
mg-m--hidden
hidden until medium screen
+
mg-l--hidden
hidden until large screen
+
mg-xl--hidden
hidden until extra large screen
+
+
Display effect (s,m,l,xl)
+
+
mg-s--display
display for small screen
+
mg-m--display
display until medium screen
+
mg-l--display
display until large screen
+
mg-xl--display
display until extra large screen
+
+
Progressive display example
+
+
Exclusive display example
+
+
+
Row alignment
diff --git a/demo/sections/group-section.html b/demo/sections/group-section.html
index 4fd87f46..61c72ddd 100644
--- a/demo/sections/group-section.html
+++ b/demo/sections/group-section.html
@@ -5,7 +5,7 @@
Group
to trigger the group functionality.
-