Created Progress Bars (markdown)

Progress-Bars.md

@@ -0,0 +1,61 @@
+The progress bar styles allow you to easily create and customize lightweight progress bars on the fly. In the [_progress.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_progress.scss) file, you can find two **mixins** that can be used to create your own progress bars and style them the way you want. 
+
+## Making a progress bar wrapper and base style
+
+To make a new wrapper for progress bars as well as a base style for them, use the `make-progress` **mixin**.
+
+### Definition
+
+	make-progress(
+		$progress-name, 
+		$progress-height, 
+		$progress-border-radius, 
+		$progress-bg-color,
+		$progress-font-size, 
+		$progress-bar-color, 
+		$progress-bar-bg-color)
+
+### Parameters
+
+- $progress-name          : The class name of the progress wrapper.
+- $progress-height        :	The height of the progress wrapper.
+- $progress-border-radius :	The border radius of the progress wrapper.
+- $progress-bg-color      :	The background color of the progress wrapper. [1]
+- $progress-font-size     : The font size of the progress bar's text (if any).
+- $progress-bar-color     : The progress bar's text color.
+- $progress-bar-bg-color  :	The progress bar's background color.
+
+**Notes:**
+
+- [1] : The background color of the progress wrapper should be a different color than the page's background to make sure that it is visible. 
+- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
+
+## Adding custom styles
+
+To add a new custom style class, use the `make-progress-bar-variant` **mixin**.
+
+### Definition
+
+	make-progress-bar-variant(
+		$progress-name, 
+		$progress-bar-variant-name, 
+		$progress-bar-variant-color, 
+		$progress-bar-variant-bg-color)
+
+### Parameters
+
+- $progress-name                : 	The class name of the progress wrapper. [1]
+- $progress-bar-variant-name    :	The class name of the progress bar variant.
+- $progress-bar-variant-color   :	The progress bar variant's text color.
+- $progress-bar-variant-bg-coor :	The progress bar variant's background color.
+
+**Notes:**
+
+- [1] : The name of $progress-name should match the one specified in `make-progress` for the progress bar variant to work correctly.
+- [2] : This mixin should be used in combination with `make-progress` and is suggested that you  use it after `make-progress`.
+
+## Remarks
+
+- After creting a base progress style with `make-progress`, multiple styles can be defined using the other mixin.
+- Please exercise caution when naming style classes, especially if the names are the names of web-safe colors. For example if you want to create the `.progress.red` class, pass the name *red* in quotation marks like `'red'` to avoid automatic conversion.
+- There is no mixin that allows users to alter the size of their progress bars. If such a functionality is needed, you can add a custom class that affects the height of the wrapper as well as the font-size of the progress bars.