Forms almost complete, documentation incomplete

README.md

@@ -5,7 +5,7 @@ A minimal, responsive CSS framework to get you started.
 
 - **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes
 - **button**: button styles `GZIPPED SIZE`: 427 bytes
-- **form**: coming soon
+- **form**: form styles `GZIPPED SIZE` 517 bytes
 - **grid**:	default 12-column grid `GZIPPED SIZE`: 447 bytes
 - **nav**: coming soon
 - **table**: coming soon

css/mini-full.css

@@ -12,7 +12,7 @@ html {
 body {
   margin: 0;
   color: #222;
-  background-color: #efefef; }
+  background-color: #f5f5f5; }
 
 /*
 	Correct display in IE 9-.
@@ -65,7 +65,7 @@ hr {
   margin: 0.7em 0;
   height: 0;
   border: 0;
-  border-top: 1px solid #c9c9c9; }
+  border-top: 1px solid #cfcfcf; }
 
 /*
 	Style for all small text and size for sub and sup.
@@ -100,10 +100,10 @@ kbd, code, pre {
   border-radius: 4px; }
 
 code, pre {
-  background-color: #d5d5d5; }
+  background-color: gainsboro; }
 
 kbd {
-  color: #f8f8f8;
+  color: #fefefe;
   background-color: #222; }
 
 pre {
@@ -252,7 +252,7 @@ button, html [type="button"], [type="reset"], [type="submit"] {
 	Style for fieldset.
 */
 fieldset {
-  border: 1px solid #c9c9c9;
+  border: 1px solid #cfcfcf;
   border-radius: 4px;
   margin: 0 2px;
   padding: 0.35em 0.65em 0.75em; }
@@ -627,3 +627,73 @@ textarea {
 
   .lg-no {
     display: none; } }
+/*
+	Mixin for the forms.
+	Parameters:
+	- $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. [1]	
+	Notes:
+	// TODO: write notes - does [1] qualify? Should I write more notes? We'll see - probably note that elements like submit and button are not styled etc.
+*/
+.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"],
+.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"],
+.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"],
+.frm select, .frm textarea {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: none; }
+.frm input:not([type]) {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: none; }
+.frm input, .frm select, .frm textarea {
+  display: block;
+  margin: 0.2em;
+  padding: 0.3em; }
+  .frm input:focus, .frm select:focus, .frm textarea:focus {
+    border-color: #2678b3; }
+  .frm input[disabled], .frm select[disabled], .frm textarea[disabled] {
+    cursor: not-allowed;
+    opacity: 0.65; }
+  .frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
+    border-color: #e9322d; }
+  .frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
+    background-color: gainsboro;
+    border-color: #b5b5b5; }
+.frm input[type="checkbox"], .frm input[type="radio"] {
+  display: inline-block; }
+.frm select {
+  height: 1.9em; }
+  .frm select[multiple] {
+    height: auto; }
+.frm label {
+  margin: 0.5em 0 0 0.2em; }
+.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label {
+  display: inline-block; }
+.frm.inline .ctrl-group {
+  display: inline-block; }
+.frm.aligned .ctrl-group label {
+  text-align: right;
+  vertical-align: middle;
+  width: 15em;
+  margin-top: 0; }
+.frm .ctrl-group {
+  margin: 0 0 0.3em 0; }

scss/mini-full.scss

@@ -11,3 +11,6 @@
 @import 'mini/grid';
 // Use grid mixin to create grid with default specs.
 @include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
+@import 'mini/form';
+// Use form mixin to create form with default specs.
+@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group,  0 0 0.3em 0, inline, aligned,15em);

scss/mini/_form.scss

@@ -0,0 +1,99 @@
+/*
+	Mixin for the forms.
+	Parameters:
+	- $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. [1]	
+	Notes:
+	// TODO: write notes - does [1] qualify? Should I write more notes? We'll see - probably note that elements like submit and button are not styled etc.
+*/
+@mixin 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){
+	.#{$frm-name}{
+		input[type="color"],	input[type^="date"],	input[type$="time"],	input[type="email"],
+		input[type="month"],	input[type="week"],		input[type="text"],		input[type="password"],
+		input[type="url"],		input[type="number"],	input[type="search"],	input[type="tel"],
+		select,	textarea{		
+			box-sizing: border-box;
+			border: $frm-border;
+			border-radius: $frm-border-radius;	
+			box-shadow: none;		
+		}
+		input:not([type]){
+			box-sizing: border-box;
+			border: $frm-border;
+			border-radius: $frm-border-radius;
+			box-shadow: none;
+		}
+		input, select, textarea{
+			display: block;
+			margin: $frm-margin;
+			padding: $frm-padding;
+			&:focus{
+				border-color: $frm-focus-color;
+			}
+			&[disabled]{
+				cursor: $frm-disabled-cursor;
+				opacity: $frm-disabled-opacity;
+			}
+			&:invalid, &:focus:invalid, &:focus:invalid:focus{
+				border-color: $frm-invalid-color;
+			}
+			&[readonly]{
+				background-color: $frm-readonly-bg-color;
+				border-color: $frm-readonly-border-color;
+			}
+		}
+		input[type="checkbox"], input[type="radio"]{
+			display: inline-block;
+		}
+		select{
+			height: $frm-select-height;
+			&[multiple]{
+				height: auto;
+			}
+		}
+		label{
+			margin: $frm-label-margin;
+		}
+		&.#{$frm-inline-name}, &.#{$frm-aligned-name}{
+			input, select, textarea, label{
+				display: inline-block;
+			}
+		}
+		&.#{$frm-inline-name}{
+			.ctrl-group{
+				display: inline-block;
+			}
+		}
+		&.#{$frm-aligned-name} .#{$frm-ctrl-group-name} label{
+			text-align: right;
+			vertical-align: middle;
+			width: $frm-aligned-label-width;
+			margin-top: 0;
+		}
+		.#{$frm-ctrl-group-name}{
+			margin: $frm-ctrl-group-margin;
+		}
+	}
+}

scss/mini/_variables.scss

@@ -3,7 +3,7 @@ $base-fonts:					"\"Helvetica Neue\", Helvetica, sans-serif";	// Font-family
 $base-font-size:				1em;											// Font-size
 $base-line-height:				1.5;											// Line-height
 $body-margin:					0;												// Margin for body
-$body-bg-color:					#efefef;										// Body background color
+$body-bg-color:					#f5f5f5;										// Body background color
 $body-color:					#222;											// Body text color
 $header-line-height-multiplier:	0.8;											// Multiplier for line height of headers					 
 $header-margin:					0.7em 0;										// Margin for headers
@@ -32,7 +32,7 @@ $kbd-color:						lighten($body-bg-color, 3.5%);					// Kbd text color
 $a-color:						#2678b3;										// Hyperlink text color
 $a-hover-color:					lighten($a-color, 10%);							// Hyperlink hover text color
 $a-visited-color:				darken($a-color, 10%);							// Hyperlink visited text color
-$a-visited-hover-color:			#2678b3;										// Hyperlink visited hover text color
+$a-visited-hover-color:			$a-color;										// Hyperlink visited hover text color
 $mark-bg-color:					#ffff33;										// Mark background color
 $mark-color:					$body-color;									// Mark text color
 $sub-bottom:					-0.25em;										// Sub bottom

testpage.html

@@ -62,5 +62,37 @@ Suspendisse varius turpis et dui viverra semper.</pre>
     <button type="button" class="green sm btn">Sample button</button>
     <blockquote cite="https://www.google.com">Nam non diam ante. Curabitur non enim vitae eros luctus porta.</blockquote>
     <div class="grid-container"><div class="row"><div class="col xs-4 sm-6" style="background: red;">1c</div><div class="col xs-8 sm-6" style="background: blue;">2c</div></div><div class="row"><div class="col xs-1 sm-no md-no lg-no" style="background: purple;"></div><div class="col xs-10 sm-12" style="background: yellow;">3c</div></div></div>
+    <br><br>
+    <form class="frm inline">
+    <fieldset>
+        <div class="ctrl-group">
+            <label for="name">Username</label>
+            <input id="name" type="text" placeholder="Username">
+        </div>
+
+        <div class="ctrl-group">
+            <label for="password">Password</label>
+            <input id="password" type="password" placeholder="Password">
+        </div>
+
+        <div class="ctrl-group">
+            <label for="email">Email Address</label>
+            <input id="email" type="email" placeholder="Email Address">
+        </div>
+
+        <div class="ctrl-group">
+            <label for="foo">Supercalifragilistic Label</label>
+            <input id="foo" type="text" placeholder="Enter something here...">
+        </div>
+
+        <div class="">
+            <label for="cb" class="pure-checkbox">
+                <input id="cb" type="checkbox"> I've read the terms and conditions
+            </label>
+        </div><div>
+            <button type="submit" class="btn lg blue">Submit</button>
+        </div>
+    </fieldset>
+</form>
   </body>
 </html>