From b85d2893c590a267305f5b0a90170cc4f15d91ae Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 5 May 2017 00:47:22 +0300 Subject: [PATCH] Doc housekeeping Consistent border styling, minor cleanup and layout changes. --- docs/card.html | 4 ++-- docs/contextual.html | 14 ++++++++------ docs/core.html | 2 +- docs/customization/card.html | 4 ++-- docs/customization/contextual.html | 4 ++-- docs/customization/core.html | 4 ++-- docs/customization/grid.html | 8 ++++---- docs/customization/index.html | 4 ++-- docs/customization/input_control.html | 4 ++-- docs/customization/navigation.html | 4 ++-- docs/customization/progress.html | 4 ++-- docs/customization/tab.html | 4 ++-- docs/customization/table.html | 10 ++-------- docs/customization/utility.html | 4 ++-- docs/grid.html | 12 ++++++------ docs/input_control.html | 21 +++++++++++---------- docs/navigation.html | 21 ++++++++++++--------- docs/progress.html | 4 ++-- docs/quick_reference.html | 4 ++-- docs/tab.html | 14 +++++++------- docs/table.html | 22 +++++++++++----------- docs/utility.html | 10 ++++++---- docs/v2/DEVLOG.md | 3 +++ 23 files changed, 95 insertions(+), 90 deletions(-) diff --git a/docs/card.html b/docs/card.html index de19905..f1bfbb5 100644 --- a/docs/card.html +++ b/docs/card.html @@ -19,8 +19,8 @@ .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} - .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}} .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;} .box-colored {color: #f5f5f5;} diff --git a/docs/contextual.html b/docs/contextual.html index be7adda..d3ecb53 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -19,8 +19,10 @@ .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} + .col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;} .box-colored {color: #f5f5f5;} @@ -156,14 +158,14 @@

Alerts

-
+

This is an alert

Make sure you read this!

This is an urgent alert

Make absolutely sure you read this!

This is a critical alert

Make certain you read and actually understand this!

-
+

Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <div> element, which will contain one or more elements (for example a <h3> and a <p>) and add the .alert class to it. For more urgent alerts, use the .urgent class and for critical alerts, use the .critical class.

Sample code

<div class="alert">
@@ -207,14 +209,14 @@
           

             
Animated alerts

             

-              

+              

               

                 
This is an alert
Make sure you read this!

                 
This is an urgent alert
Make absolutely sure you read this!

                 
This is a critical alert
Make certain you read and actually understand this!

               

               

-              

+              

                 
Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the .animated class on an existing .alert and it shall periodically scale up a little bit to make users notice it.

                 
Sample code

                 
<div class="alert animated">
diff --git a/docs/core.html b/docs/core.html
index 7c79c7d..27f2f8a 100644
--- a/docs/core.html
+++ b/docs/core.html
@@ -142,7 +142,7 @@
 		            
Common textual elements

 		            

 		              

-		                

This is a paragraph with some sample text. Did you know mini.css v2.1 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.

+		                
This is a paragraph with some sample text. Did you know mini.css v2 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.

 		                
function sum(num1, num2) {
     var num3 = num1 + num2;
     console.log('Result: ' + num3);
diff --git a/docs/customization/card.html b/docs/customization/card.html
index 473e4cb..3ff1792 100644
--- a/docs/customization/card.html
+++ b/docs/customization/card.html
@@ -20,8 +20,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html
index de72d82..012d9be 100644
--- a/docs/customization/contextual.html
+++ b/docs/customization/contextual.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/customization/core.html b/docs/customization/core.html
index c267077..baa67d9 100644
--- a/docs/customization/core.html
+++ b/docs/customization/core.html
@@ -20,8 +20,8 @@
 	.box-centered { text-align: center; } .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } }
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	
diff --git a/docs/customization/grid.html b/docs/customization/grid.html
index 38df404..e9330de 100644
--- a/docs/customization/grid.html
+++ b/docs/customization/grid.html
@@ -19,12 +19,12 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;} }
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5; }
-	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;margin-bottom: 16px;padding-bottom: 12px;}
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; margin-bottom: 0;}}
+	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	
diff --git a/docs/customization/index.html b/docs/customization/index.html
index 86d6899..bbb1890 100644
--- a/docs/customization/index.html
+++ b/docs/customization/index.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;}
-	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
+	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored { color: #f5f5f5;}
 	
diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html
index 21cc738..1123d8e 100644
--- a/docs/customization/input_control.html
+++ b/docs/customization/input_control.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html
index b03aec1..e3bc964 100644
--- a/docs/customization/navigation.html
+++ b/docs/customization/navigation.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;}
-	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
+	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored { color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/customization/progress.html b/docs/customization/progress.html
index 7aaad98..3637a09 100644
--- a/docs/customization/progress.html
+++ b/docs/customization/progress.html
@@ -21,8 +21,8 @@
 	.box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/customization/tab.html b/docs/customization/tab.html
index c33f9d7..8e291a9 100644
--- a/docs/customization/tab.html
+++ b/docs/customization/tab.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/customization/table.html b/docs/customization/table.html
index b581a26..f5909d9 100644
--- a/docs/customization/table.html
+++ b/docs/customization/table.html
@@ -19,16 +19,10 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5; }
-	table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; }
-	table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); }
-	table#carded tr {display: block;border: 1px solid #bdbdbd;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);background: #fafafa;margin-bottom: 10px; }
-	table#carded td {display: block;border: 0; border-bottom: 1px solid #bdbdbd; text-align: right; }
-	table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
-	table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }
 	td:first-child, td:last-child { font-family: monospace, monospace; }
 	td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
 	
diff --git a/docs/customization/utility.html b/docs/customization/utility.html
index 4872d8f..ebbf229 100644
--- a/docs/customization/utility.html
+++ b/docs/customization/utility.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #b71c1c; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored { color: #f5f5f5;}
 	td:first-child, td:last-child { font-family: monospace, monospace; }
diff --git a/docs/grid.html b/docs/grid.html
index 4a99305..00b3ea0 100644
--- a/docs/grid.html
+++ b/docs/grid.html
@@ -19,12 +19,12 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;} }
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5; }
-	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;margin-bottom: 16px;padding-bottom: 12px;}
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; margin-bottom: 0;}}
+	.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
 	
   
   
@@ -499,7 +499,7 @@
           

             
Column reordering

             

-              

+              

                 

                 



 				

@@ -520,7 +520,7 @@
                   

                 

               

-              

+              

                 
Additionally, if you want to reorder your columns, you can do that to some extent using the .col-SCR_SZ-first, .col-SCR_SZ-last and .col-SCR_SZ-normal classes to your columns, replacing SCR_SZ with one of the available screen size names (sm, md or lg). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).

                 
Sample code

                 
<div class="container">
diff --git a/docs/input_control.html b/docs/input_control.html
index 95a2b5f..882d12f 100644
--- a/docs/input_control.html
+++ b/docs/input_control.html
@@ -19,8 +19,9 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
+	@media (max-width: 1269px) and (min-width: 768px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
@@ -98,7 +99,7 @@
           

             
Forms & input

             

-              

+              

               

               

                 Inline form (default style)
@@ -151,7 +152,7 @@
               

               

               

-              

+              

                 
Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <form> element and add your <input> elements inside. Link them to <label> elements for ease of acces and you are pretty much set. We highly recommend using the <fieldset> and <legend> elements to annotate your forms as well, but you can skip them if you wish.

                 
Forms are inline by default. Use the .input-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. You can make your .input-groups respond to viewport changes, by adding the .fluid class to them. Finally, if you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.

                 
Sample code

@@ -270,7 +271,7 @@
           

             
Checkboxes & radio buttons

             

-              

+              

                 

                   

                   

@@ -285,7 +286,7 @@
                   


                 

               

-              

+              

                 
Checkboxes and radio buttons come pre-styled, using the checkbox hack, while remaining fully accessible. To create a checkbox or radio button, start using a <div> that implements the .input-group class, and then add an <input> of the proper type inside it ("checkbox" or "radio"), followed immediately by a <label> linking to it. Remember to add tabindex="0" to your <input>, so that it will register properly for screen readers.

                 
Sample code

                 
<div class="input-group">
@@ -358,7 +359,7 @@
           

             
Buttons & button groups

             

-              

+              

                 
                 
                 
@@ -370,7 +371,7 @@
                 
Button group

                 
    

               

-              

+              

                 
All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class or the role="button" attribute for links, labels and other elements of your choice to make them look like buttons.

                 
Color variants are available in the form of the .primary, .secondary, .tertiary and .inverse classes. Size variants are available as well in the form of .small and .large classes.

                 
Finally, you can create responsive groups of buttons by wrapping them inside a <div> with the .button-group class.

@@ -439,7 +440,7 @@
           

             
File upload buttons

             

-              

+              

                 

                   

                   
@@ -447,7 +448,7 @@
                   

                 

               

-              

+              

                 
File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the <input type="file">, while maintaining accessibility and using a linked <label> of the .button class to display it in a modern way.

                 
Sample code

                 
<input type="file" id="file-input">
diff --git a/docs/navigation.html b/docs/navigation.html
index e282d0e..73a5ac2 100644
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -19,10 +19,13 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;}
-	@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
+	@media (min-width:768px) and (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored { color: #f5f5f5;}
+	.box-colored { color: #f5f5f5;} .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
+	@media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }}
 	
   
   
@@ -97,7 +100,7 @@
           

             
Header

             

-              

+              

               


                 

                    
@@ -106,7 +109,7 @@
                 
 

             

               

-              

+              

                 
The <header> HTML element is used for a page's top horizontal navigation menu. It can contain a unique .logo element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. The rest of the elements inside the <header> must be button elements (i.e. <button>, <input type="button">, role="button" or .button) in order to be styled properly. Textual separators between those can be added using <span> elements.

                 
Sample code

                 
<header>
@@ -156,7 +159,7 @@
           

             
Navigation bar

             

-              

+              

                 


                   

                 

               

-              

+              

                 
To add vertical navigation to your websites, use the <nav> HTML element. Adding links is pretty simple, just use <a> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the .sublink-1 class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the .sublink-2 class.

                 
Sample code

                 
<nav>
@@ -209,12 +212,12 @@
           

             
Footer

             

-              

+              

                 


                    

                 

               

-              

+              

                 
The <footer> element is used to create your page's footer. As normal, add the <footer> at or near the end of your <body> element and add content to it like you would otherwise.

                 
Sample code

                 
<footer>
diff --git a/docs/progress.html b/docs/progress.html
index bdb0060..ae116d5 100644
--- a/docs/progress.html
+++ b/docs/progress.html
@@ -21,8 +21,8 @@
 	.box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5;}
 	
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index f149ab8..ff263d1 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -19,8 +19,8 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } .box-left { text-align: left; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #bdbdbd;}}
+	.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}}
 	h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
 	
   
diff --git a/docs/tab.html b/docs/tab.html
index cc458ce..f29ce23 100644
--- a/docs/tab.html
+++ b/docs/tab.html
@@ -19,10 +19,10 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
-	.box-colored {color: #f5f5f5;}
+	.box-colored {color: #f5f5f5;} @media (max-width: 1279px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box; border: 0; border-bottom: 1px solid #c9c9c9;}}
+		@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	
   
   
@@ -97,7 +97,7 @@
           

             
Basic syntax

             

-              

+              

                 

                   
                   
@@ -113,7 +113,7 @@
                   
 
Tab 4
 
This is the fourth tab's content.
 

                 

               

-              

+              

                 
The tab container's basic sytanx is composed of two components, presented below in the order they should be added to the DOM tree:

                 
    
                   
  • At the outermost level of the tab container is a <div> element implementing the .tabs class. This serves as the wrapper of the tab container.
    • 
@@ -213,7 +213,7 @@
           
    
             
    Stacked tabs
    
             
    
-              
    
+              
    
                 
    
                   
                   
@@ -231,7 +231,7 @@
                   
     
    This is the second collapse section's content.
     
    
                 
    
               
    
-              
    
+              
    
                 
    Apart from the normal tab layout, you can make your tabs stacked instead, using the .stacked class in your .tabs container element. Stacked tabs are more versatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the aria-hidden="true" attribute to make your tabs fully accessible, as before.
    
                 
    Sample code
    
                 
    <div class="tabs stacked">
diff --git a/docs/table.html b/docs/table.html
index 15e4c43..370a7e0 100644
--- a/docs/table.html
+++ b/docs/table.html
@@ -19,16 +19,16 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
-	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
+	@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored {color: #f5f5f5; }
 	table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; }
 	table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); }
-	table#carded tr {display: block;border: 1px solid #bdbdbd;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);background: #fafafa;margin-bottom: 10px; }
-	table#carded td {display: block;border: 0; border-bottom: 1px solid #bdbdbd; text-align: right; }
+	table#carded tr {display: block;border: 1px solid #c9c9c9;box-shadow: none;background: #fafafa; margin-bottom: 0.625rem; }
+	table#carded td {display: block;border: 0; border-bottom: 1px solid #c9c9c9; text-align: right; }
 	table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
-	table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }
+	table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;} @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
 	
   
   
@@ -103,7 +103,7 @@
           
    
             
    Basic syntax & responsiveness
    
             
    
-              
    
+              
    
               
    
                 
    Medium/Large screen layout
    
                 
@@ -133,7 +133,7 @@
               
    
-              
    
+              
    
                 
    Table layout utilizes the <table> HTML element with the following structure (usual tabular structure):
    
                 
      
                   
    1. On the outermost level, there is the <table> element.
      2. 
@@ -232,7 +232,7 @@
               
      Horizontal tables
      
             
    
             
    
-              
    
+              
    
                 
    
                 
    
             
               
    
@@ -248,7 +248,7 @@
               
    
                 People

    
                 
    
               
    
-              
    
+              
    
                 
    Horizontal tables can be created, by simply adding the .horizontal class to the root element of your table (i.e. the <table> element). Horizontal tables are flexible, so they can accommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the data-label attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that .horizontal tables do not support the <tfoot> element.
    
                 
    Sample code
    
                 
    <table class="horizontal">
@@ -307,7 +307,7 @@
           
    
             
    Table variants & matrices
    
             
    
-              
    
+              
    
               

    
                 
@@ -320,7 +320,7 @@
             
    
               Star Wars Character Alignment Table

    
               
    
               
    
-              
    
+              
    
                 
    Tables are responsive by default, however you can disable this functionality for one or more tables (normal or .horizontal), using the .preset class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <th> elements inside the <tbody> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the .striped class.
    
                 
    Sample code
    
                 
    The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.

    
diff --git a/docs/utility.html b/docs/utility.html
index a56f789..c5362fe 100644
--- a/docs/utility.html
+++ b/docs/utility.html
@@ -19,8 +19,10 @@
 	.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #b71c1c; }
 	.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
 	[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
-	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
-	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
+	.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
+	.col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; }
+	@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
 	.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
 	.box-colored { color: #f5f5f5;}
 	
@@ -249,12 +251,12 @@
           
    
             
    Breadcrumbs
    
             
    
-              
    
+              
    
                 

    
                   
    
                 
    
               
    
-              
    
+              
    
                 
    Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a <ul> element that implements the .breadcrumbs class. Inside this unordered list, add as many <li> elements as needed to show your hierarchy. You can add links to the list elements, as necessary.
    
                 
    Sample code
    
                 
    <ul class="breadcrumbs">
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index ffff647..27ea7f2 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -1086,3 +1086,6 @@
 - Fixed a typo in `core`'s code, nothing was really affected, but it's nice to have it fixed.
 - Optimized certain pieces of code in the `grid` module, including the pre-defined layouts in shared rules, actually saving a little bit of space. Size is now `6.50KB`, a noticeable improvement over the previous size.
 - Dramatically improved `input_control`'s `.button-group` styling, by reworking the way the combinatory selectors (`element + element`) inside it work, based on the fact that we are just styling the last element and we don't care about what the previous one was. This shaved off quite a lot of size, shrinking `mini-default` down to `6.37KB`. **Hugging cat** is especially happy with this.
+- Tried improving `:checked` styling for checkboxes, radios and `.tabs`, but decided it was not worth the lack of specificity due to very little space saved in reality.
+- Updated doc layout for consistency and better display on most screens.
+- Updated custom `border` styling for docs to be consistent in terms of coloring.