From 2863dd5f517e002ddddda9ba511ff888560435c5 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 24 Aug 2016 10:10:35 +0300
Subject: [PATCH] Created Forms (markdown)

---
 Forms.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 Forms.md

diff --git a/Forms.md b/Forms.md
new file mode 100644
index 0000000..b4a58e3
--- /dev/null
+++ b/Forms.md
@@ -0,0 +1,56 @@
+The form styling provided allows you to easily style forms to your liking. Most elements inside a form will be styled using the values provided, however some inputs (ones that look and behave like buttons, checkboxes and radios) might not be styled the same way. This is intentional and can be resolved using the provided button styles and mixins to complement the form styles.
+
+To customize your form styling, use the **mixin** provided in the [_form.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini/_form.scss) partial file.
+
+##Definition
+
+	make-frm(
+		$frm-name, 
+		$frm-border, 
+		$frm-border-radius, 
+		$frm-margin, 
+		$frm-padding, 
+		$frm-focus-color, 
+		$frm-invalid-color, 
+		$frm-disabled-cursor, 
+		$frm-disabled-opacity,
+		$frm-readonly-bg-color, 
+		$frm-readonly-border-color,
+		$frm-select-height, 
+		$frm-label-margin, 
+		$frm-ctrl-group-name,
+		$frm-ctrl-group-margin, 
+		$frm-inline-name, 
+		$frm-aligned-name, 
+		$frm-aligned-label-width)
+
+##Variables
+
+- $frm-name                  :	The class name of the form.
+- $frm-border                :	The border of the form elements.
+- $frm-border-radius         :	The border-radius of the form elements.
+- $frm-margin                :	The margin of the form elements.
+- $frm-padding               :	The padding of the form elements.
+- $frm-focus-color           :	The color used to mark the focused form element.
+- $frm-invalid-color         :	The color used to mark an invalid form element.
+- $frm-disabled-cursor       :	The cursor style when hovering over disabled form elements.
+- $frm-disabled-opacity      :	The opacity of the form elements when disabled.
+- $frm-readonly-bg-color     :  The background color of the form elements when they are readonly.
+- $frm-readonly-border-color :	The border color of the form elements when they are readonly.
+- $frm-select-height         :	The height for non-multiline select elements in the form.
+- $frm-label-margin          :	The margin for the form's label elements.
+- $frm-ctrl-group-name       :	The class name of the control groups in the form.
+- $frm-ctl-group-margin      :	The margin for control groups inside the form.
+- $frm-inline-name           :	The class name for forms with inline style.
+- $frm-aligned-name          :	The class name for forms with aligned style.
+- $frm-aligned-label-width   :	The width of labels in forms with aligned style.
+
+**Notes:**
+
+- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling. Please use the button styles and mixins provided to properly style them to your liking.
+
+##Remarks
+
+- The default form styling is `stacked`. To change this styling, additional classes are provided for inline and aligned styles.
+- Parts of the form styling can be stripped manually, like the extra styles for inline and aligned, or the control groups system. 
+- The form styling mixin can be tweaked to apply to all forms by default. This can be done by modifying the SCSS file to apply to all `form` elements instead of elements with the specified class.
\ No newline at end of file