Created Utilities and helper classes (markdown)

Utilities-and-helper-classes.md

@@ -0,0 +1,184 @@
+The provided utilities and helper classes give the users full control over their naming and styling and can be easily toggled on or off, as they are all built using **mixins**. All of these can be found in the [_utility.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini/_utility.scss) partial file.
+
+## Image styling
+
+Images can be styled with a custom class to allow them to look like thumbnails.
+
+### Definition
+
+	make-thumb(
+		$thumb-name, 
+		$thumb-padding, 
+		$thumb-border, 
+		$thumb-border-radius)
+
+### Parameters
+
+- $thumb-name          : 	The class name for the thumbnail style.
+- $thumb-padding       :	The padding between the image and the border.
+- $thumb-border	       :	The style of the thumbnail's border.
+- $thumb-border-radius :	The border radius of the thumbnail.
+
+**Notes:**
+
+- [1] : This style only applies to `img` elements with the class specified in `$thumb-name`.
+
+## Border styling
+
+Custom borders can be added to any element using the provided mixins that generate custom classes for generic borders and border radiuses.
+
+### Generic border definition
+
+	make-border-generic(
+		$border-generic-name)
+
+### Parameters
+
+- $border-generic-name :	The class name for the generic border.
+
+**Notes:**
+
+- [1] : The border style uses rgba to create a 1px solid border with 0.25 opacity around an element, which makes it look properly bordered. Might be incompatible with older browsers.
+- [2] : The border style overwrites any border style as it uses `!important`, exercise caution when using.
+
+### Generic border radial defintion
+
+	make-border-radial-style(
+		$border-style-name, 
+		$border-style-radius)
+
+### Parameters
+
+- $border-style-name   :	The class name for the generic border radius style.
+- $border-style-radius :	The radius for the generic border radius style.
+
+**Notes:**
+
+- [1] : The border style overwrites any border style as it uses `!important`, exercise caution when using.
+
+## Text styling
+
+Contextual text or contextual backgrounds can be generated using the provided mixins.
+
+### Contextual text defintion
+
+	make-colored-text(
+		$colored-text-name, 
+		$colored-text-color)
+
+
+### Parameters
+
+- $colored-text-name  :	The class name for the contextual color text style.
+- $colored-text-color :	The color for the contextual color text style.
+
+**Notes:**
+
+- [1] : The contextual color text style overwrites any text color as it uses `!important`, exercise caution when using.
+
+### Contextual background definition
+
+	make-colored-bg-text(
+		$colored-bg-text-name, 
+		$colored-bg-text-color)
+
+### Parameters
+
+- $colored-bg-text-name  :	The class name for the contextual background text style.
+- $colored-bg-text-color :	The background color for the contextual background text style.
+
+**Notes:**
+
+- [1] : The contextual background text style overwrites any text color as it uses  `!important`, exercise caution when using.
+
+## Utility symbols
+
+Carets and close signs can be easily created using the provided mixins.
+
+### Caret definition
+
+	make-caret-down(
+		$caret-name, 
+		$caret-size, 
+		$caret-color)
+
+### Parameters
+
+- $caret-name  :	The class name for caret utility class.
+- $caret-size  :	The size of the caret utility element. [1]
+- $caret-color :	The color of the caret utility element.
+
+**Notes:**
+
+- [1] : The caret is built using the border trick. Sizes can be specified in either `px` or `em`, but they might take a bit of tweaking to get right.
+
+### Close definition
+
+	make-close(
+		$close-name, 
+		$close-color, 
+		$close-cursor, 
+		$close-font-size, 
+		$close-font-weight, 
+		$close-hover-color)
+
+### Parameters
+
+- $close-name        :	The class name for close utility class.
+- $close-color       :	The color of the close utility element.
+- $close-cursor      :	The cursor for the close utility element.
+- $close-font-size   :	The font-size for the close utility element.
+- $close-font-weight :	The font-weight for the close utility element.
+- $close-hover-color :	The color of the close utility element when hovering over it.
+
+## Helper classes
+
+**mini.css** provides a handful of helper classes for quick floats, centering content blocks, clearfix and hidden elements.
+
+
+### Quick floats definition
+
+	make-drags(
+		$drag-left-name, 
+		$drag-right-name)
+
+### Parameters
+
+- $drag-left-name  :	The class name for left drags.
+- $drag-right-name :	The class name for right drags.
+
+**Notes:**
+
+- [1] : These classes use `!important` to set the float properties, exercise caution when using.
+
+### Center content block definition
+
+	make-center-block($center-block-name)
+
+### Parameters
+
+- $center-block-name :	The class name for center block class.
+
+### Clearfix definition
+
+	 make-clearfix($clearfix-name)
+
+### Parameters
+
+- $clearfix-name :	The class name for the clearfix class.
+
+### Hidden definition
+
+	make-hidden($hidden-name)
+
+### Parameters
+
+- $hidden-name :	The class name for hidden elements.
+
+**Notes:**
+
+- [1] : This class uses `!important` to set the display property, exercise caution when using.
+
+## Remarks
+
+- Many of the classes created by the above mixins use `!important` to overwrite other attributes, be very careful when using them.