Created Modals (markdown)

Modals.md

@@ -0,0 +1,66 @@
+The modal dialog module allows you to create customized modal dialogs with very little effort. In the [_modal.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_modal.scss) file, you can find two **mixins** that can be used to create your own modal dialogs, along with support for a *close* sign from the utilities module.
+
+## Making a modal dialog
+
+To make a modal dialog style, use the `make-modal` **mixin**.
+
+### Definition
+
+	make-modal(	
+		$modal-name, 
+		$modal-color, 
+		$modal-bg-color, 
+		$modal-transition-enabled, 					
+		$modal-shadow-enabled, 
+		$modal-border, 
+		$modal-border-radius, 
+		$modal-padding, 
+		$modal-top-margin, 
+		$modal-width)
+
+### Parameters
+
+- $modal-name               :	The class name for the modal dialog.
+- $modal-color              :	The text color of the modal dialog.
+- $modal-bg-color           :	The background color of the modal dialog.
+- $modal-transition-enabled :	Determines if a transition style will be applied when the modal changes states. [1]
+- $modal-shadow-enabled     :	Determines if a shadow should be cast from the modal dialog. [1]
+- $modal-border             :	The border style of the modal dialog.
+- $modal-border-radius      :	The border radius of the modal dialog's border.
+- $modal-padding            :	The padding of the modal dialog's contents.
+- $modal-top-margin         :	The distance of the modal dialog from the top of the parent container. [2]
+- $modal-width              :	The width of the modal dialog. [2]
+
+**Notes:**
+
+- [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be `enabled` or `disabled`. If an invalid value is supplied, the mixin will act as if it was `disabled`.
+- [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale on all devices. However, there are no restrictions.
+
+## Adding support for a close button
+To add support for a close button, use the `make-modal-close-support` **mixin**.
+
+### Definition
+
+	make-modal-close-support(
+		$modal-name, 
+		$close-name, 
+		$modal-padding)
+
+### Parameters
+- $modal-name    :	The class name for the modal dialog. [1]
+- $close-name    :	The class name for the close sign utility class. [2]
+- $modal-padding :	The padding of the close button. [3]
+
+**Notes:**
+
+- [1] : The value of $modal-name should match the value specified in the modal dialog's mixin, in order for this to work correctly.
+- [2] : The value of $close-name should match the value specified in the close sign utility's mixin, in order for this to work correctly.
+- [3] : The close button will be placed at the top right of the modal dialog. Its padding should be similar to the value specified for padding in the modal dialog itself, however it could vary based on personal preference.
+
+## Remarks
+
+- Some styling decisions have been hardcoded into the modals module (i.e. shadows and transitions). You can toggle those styles using the provided variables, however, you can entirely change them manually.
+- The `z-index` of modal dialogs has been set to lower than that of the navigation bar. This is done in order to allow the menu to be displayed in mobile devices even with a modal opened.
+- The first `div` element of a modal dialog's structure will always act as a container to fill the viewport, so no styling is applied directly to it, except for displaying and transitions.
+- The modal dialog's class is assumed to be applied on a checkbox and the whole structure of the modal must precede any other elements in the HTML page (except possibly for navigation elements) so that it can use the whole viewport for better results. Use inside grids is possible, but not adviced.
+- For the close button to work, it needs to be wrapped in a label referencing the modal dialog's checkbox.