Base styling for all code elements

docs/v2/DEVLOG.md

@@ -43,4 +43,7 @@
 - Change to the color of `small` elements in headers from `#555` to `#444`.
 - Built styling for horizontal rules, fixes apply as before.
 - `hr` elements get a margin for left and right (`4px`). This is a design decision for the flavor.
-- `hr` top and bottom margins changed to `0.5em` from `0.7em`.
+- `hr` top and bottom margins changed to `0.5em` from `0.7em`.
+- Removed the `font-size: 1em` for the code elements (`code`, `pre`, `kbd`, `samp`) as they should normally be styled using the first style that applies to `html` and all elements. **Highly suggested to use `$apply-defaults-to-all:	true;` always.**
+- Added variables for `code`, `pre`, `kbd`, `samp` and a flag for `samp` (`$style-samp-element`) to make sure that no unnecessary styles are added if the `samp` element is not to be used by the developer.
+- Added conditions to make sure the least amount of code is used and no defaults are redefined when styling `code`. `kbd`, `samp` and `pre`.

docs/v2/index.html

@@ -23,5 +23,12 @@
   <h5>Heading 5 <small>small text</small></h5>
   <h6>Heading 6 <small>small text</small></h6>
   <hr>
+  <p>This is some text with an inline block of <code>code</code>.</p>
+  <p>This is some text with an inline block of <kbd>input</kbd>.</p>
+  <p>Preformatted block of code:</p>
+  <pre>Line 1 {
+    Stuff here....
+}</pre>
+<hr>
   </body>
 </html>

flavors/v2/mini-default.css

@@ -51,18 +51,24 @@ hr {
   margin: 0.5em 4px;
   border-top: 1px solid #666; }
 
-/**
+code, kbd, pre, samp {
- * 1. Correct the inheritance and scaling of font size in all browsers.
+  font-family: monospace, monospace; }
- * 2. Correct the odd `em` font sizing in all browsers.
+
- */
+code {
-code,
+  border-radius: 2px;
-kbd,
+  background-color: #ddd;
-pre,
+  padding: 2px 4px; }
-samp {
+
-  font-family: monospace, monospace;
+pre {
-  /* 1 */
+  border-radius: 2px;
-  font-size: 1em;
+  background-color: #ddd;
-  /* 2 */ }
+  padding: 6px; }
+
+kbd {
+  border-radius: 2px;
+  background-color: #222;
+  color: #f9f9f9;
+  padding: 2px 4px; }
 
 /**
  * 1. Remove the gray background on active links in IE 10.

flavors/v2/mini-default.min.css

@@ -1 +1 @@
-*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}hr{box-sizing:content-box;border:0;height:0;overflow:visible;line-height:1.2em;margin:.5em 4px;border-top:1px solid #666}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}
+*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}hr{box-sizing:content-box;border:0;height:0;overflow:visible;line-height:1.2em;margin:.5em 4px;border-top:1px solid #666}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background-color:#ddd;padding:2px 4px}pre{border-radius:2px;background-color:#ddd;padding:6px}kbd{border-radius:2px;background-color:#222;color:#f9f9f9;padding:2px 4px}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}

flavors/v2/mini-default.scss

@@ -16,7 +16,7 @@ $base-font-size:				1em;											// Default font sizing for all elements
 $base-line-height:				1.5;											// Default line height for all elements.
 $body-margin:					0;												// Margin for the body
 $apply-defaults-to-all:			true;											// Should default values be applied to all 
-																				// elements? (`true` or `false`)
+																				// elements? (`true` or `false`) [1]
 $h1-font-size:					2em;											// Font size of h1
 $h2-font-size:					1.5em;											// Font size for h2
 $h3-font-size:					1.15em;											// Font size for h3
@@ -30,6 +30,36 @@ $header-smalltext-fore-color:	#444;											// <small> color in headers
 $horizontal-rule-line-height:	1.2em;											// <hr> line height
 $horizontal-rule-margin:		0.5em 4px;										// <hr> margin
 $horizontal-rule-border-style:	1px solid #666;									// Border style for horizontal rules (used 
-																				// in the <hr> element's border-top)	
+																				// in the <hr> element's border-top)
+$use-default-code-fonts:		true;											// Should default font choice (monospace) be
+																				// used for code elements? (`true`/`false`) [2]
+//$code-font-family:			monospace, monospace;							// Fonts for code elements if not default
+$code-element-padding:			2px 4px;										// Padding for <code>
+$code-element-fore-color:		$fore-color;									// Text color for <code>
+$code-element-back-color:		#ddd;											// Background color for <code>
+$code-element-border-style:		0;												// Border style for <code>
+$code-element-border-radius:	2px;											// Border radius for <code>
+$pre-element-padding:			6px;											// Padding for <pre>
+$pre-element-fore-color:		$code-element-fore-color;						// Text color for <pre>
+$pre-element-back-color:		$code-element-back-color;						// Background color for <pre>
+$pre-element-border-style:		0;												// Border style for <pre>
+$pre-element-border-radius:		2px;											// Border radius for <pre>
+$kbd-element-padding:			2px 4px;										// Padding for <kbd>
+$kbd-element-fore-color:		$back-color;									// Text color for <kbd>
+$kbd-element-back-color:		$fore-color;									// Background color for <kbd>
+$kbd-element-border-style:		0;												// Border style for <kbd>
+$kbd-element-border-radius:		2px;											// Border radius for <kbd>
+$style-samp-element:			false;											// Should styles for <samp> be included? 
+																				// (`true`/`false`)
+//$samp-element-padding:		2px 4px;										// Padding for <samp>
+//$samp-element-fore-color:		$fore-color;									// Text color for <samp>
+//$samp-element-back-color:		#2678b3;										// Background color for <samp>
+//$samp-element-border-style:	0;												// Border style for <samp>
+//$samp-element-border-radius:	2px;											// Border radius for <samp>
 //	Enable base
-@import '../../scss/v2/base';
+@import '../../scss/v2/base';
+//	Notes:
+// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling 
+//	to elements manually.
+// [2] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
+//	will apply the proper fix to use monospace font without any problems on all browsers.

scss/v2/_base.scss

@@ -1,4 +1,4 @@
-$apply-defaults-to-all:   true !default;
+$apply-defaults-to-all: true !default;
 @if $apply-defaults-to-all {
 html, * {
   font-family: #{$base-font-family};
@@ -69,17 +69,91 @@ hr {
   border-top: $horizontal-rule-border-style;
 }
 
-/**
+$use-default-code-fonts: true !default;
- * 1. Correct the inheritance and scaling of font size in all browsers.
+@if $use-default-code-fonts {
- * 2. Correct the odd `em` font sizing in all browsers.
+code, kbd, pre, samp{
- */
+  font-family: monospace, monospace;  // Applies display fix for all code elements
+}
+}
+@else {
+code, kbd, pre, samp{
+  font-family: $code-font-family;     // Display fix should be applied manually!
+}
+}
 
-code,
+code {
-kbd,
+@if $code-element-border-style != 0{
-pre,
+  border: $code-element-border-style;
-samp {
+}
-  font-family: monospace, monospace; /* 1 */
+@if $code-element-border-radius != 0{
-  font-size: 1em; /* 2 */
+  border-radius: $code-element-border-radius;
+}
+@if $code-element-back-color != $back-color{
+ background-color: $code-element-back-color;
+}
+@if $code-element-fore-color != $fore-color{
+  color: $code-element-fore-color;
+}
+@if $code-element-padding != 0{
+  padding: $code-element-padding;
+}
+}
+
+pre {
+@if $pre-element-border-style != 0{
+  border: $pre-element-border-style;
+}
+@if $pre-element-border-radius != 0{
+  border-radius: $pre-element-border-radius;
+}
+@if $pre-element-back-color != $back-color{
+ background-color: $pre-element-back-color;
+}
+@if $pre-element-fore-color != $fore-color{
+  color: $pre-element-fore-color;
+}
+@if $pre-element-padding != 0{
+  padding: $pre-element-padding;
+}
+}
+
+kbd {
+@if $kbd-element-border-style != 0{
+  border: $kbd-element-border-style;
+}
+@if $kbd-element-border-radius != 0{
+  border-radius: $kbd-element-border-radius;
+}
+@if $kbd-element-back-color != $back-color{
+ background-color: $kbd-element-back-color;
+}
+@if $kbd-element-fore-color != $fore-color{
+  color: $kbd-element-fore-color;
+}
+@if $kbd-element-padding != 0{
+  padding: $kbd-element-padding;
+}
+}
+
+$style-samp-element: false !default;
+@if $style-samp-element {
+samp{
+@if $samp-element-border-style != 0{
+  border: $samp-element-border-style;
+}
+@if $samp-element-border-radius != 0{
+  border-radius: $samp-element-border-radius;
+}
+@if $samp-element-back-color != $back-color{
+ background-color: $samp-element-back-color;
+}
+@if $samp-element-fore-color != $fore-color{
+  color: $samp-element-fore-color;
+}
+@if $samp-element-padding != 0{
+  padding: $samp-element-padding;
+}
+}
 }
 
 /**