Table styles complete

README.md

@@ -5,7 +5,8 @@ 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**: form styles `GZIPPED SIZE` 517 bytes
+- **form**: form styles `GZIPPED SIZE`: 517 bytes
 - **grid**:	default 12-column grid `GZIPPED SIZE`: 447 bytes
 - **nav**: coming soon
-- **table**: coming soon
+- **table**: table styles `GZIPPED SIZE`: 243 bytes
+- **helper and utility classes**: coming soon

css/mini-full.css

@@ -698,3 +698,47 @@ textarea {
   margin-top: 0; }
 .frm .ctrl-group {
   margin: 0 0 0.3em 0; }
+
+/*
+	Mixin for the tables.
+	Parameters:
+	- $tbl-name                  :	The class name of the table.
+	- $tbl-border                :	The border of the table and cells. [1]
+	- $tbl-margin                :	The margin of the table cells.
+	- $tbl-padding               :	The padding of the table cells.
+	- $tbl-head-bg-color         :	The color of the thead background.
+	- $tbl-head-color            :	The color of the thead text.
+	- $tbl-body-bg-color         :	The color of the even-numbered rows in tbody.
+	- $tbl-body-alt-bg-color     :	The color of the odd-numbered rows in tbody.
+	- $tbl-body-color            :  The color of the text in tbody.
+	- $tbl-horizontal-name       :	The class name for the horizontal style table.
+	- $tbl-bordered-name         :	The class name for the bordered style table.
+	Notes:
+	- [1] : This style will apply to the table and cells. All styles applied to 
+		the table (horizontal, bordered) will use the same style of border.
+*/
+.tbl {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid #bdbdbd; }
+  .tbl td, .tbl th {
+    overflow: visible;
+    border-left: 1px solid #bdbdbd;
+    border-bottom: none;
+    margin: 0;
+    padding: 0.5em; }
+  .tbl thead {
+    background-color: #d9d9d9;
+    color: #111;
+    text-align: left; }
+  .tbl tbody {
+    background-color: #f5f5f5;
+    color: #111; }
+    .tbl tbody tr:nth-child(2n-1) {
+      background-color: #ececec; }
+  .tbl.hor td, .tbl.hor th {
+    border-left: none;
+    border-bottom: 1px solid #bdbdbd; }
+  .tbl.bor td, .tbl.bor th {
+    border-bottom: 1px solid #bdbdbd; }

scss/mini-full.scss

@@ -13,4 +13,7 @@
 @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);
+@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);
+@import 'mini/table';
+// Use table mixin to create table with default specs.
+@include make-tbl(tbl, 1px solid #bdbdbd, 0, 0.5em, #d9d9d9, #111, #f5f5f5, #ececec, #111, hor, bor);

scss/mini/_table.scss

@@ -0,0 +1,59 @@
+/*
+	Mixin for the tables.
+	Parameters:
+	- $tbl-name                  :	The class name of the table.
+	- $tbl-border                :	The border of the table and cells. [1]
+	- $tbl-margin                :	The margin of the table cells.
+	- $tbl-padding               :	The padding of the table cells.
+	- $tbl-head-bg-color         :	The color of the thead background.
+	- $tbl-head-color            :	The color of the thead text.
+	- $tbl-body-bg-color         :	The color of the even-numbered rows in tbody.
+	- $tbl-body-alt-bg-color     :	The color of the odd-numbered rows in tbody.
+	- $tbl-body-color            :  The color of the text in tbody.
+	- $tbl-horizontal-name       :	The class name for the horizontal style table.
+	- $tbl-bordered-name         :	The class name for the bordered style table.
+	Notes:
+	- [1] : This style will apply to the table and cells. All styles applied to 
+		the table (horizontal, bordered) will use the same style of border.
+*/
+@mixin make-tbl(	$tbl-name, $tbl-border, $tbl-margin, $tbl-padding,
+					$tbl-head-bg-color, $tbl-head-color, $tbl-body-bg-color,
+					$tbl-body-alt-bg-color, $tbl-body-color, 
+					$tbl-horizontal-name, $tbl-bordered-name				){
+	.#{$tbl-name}{
+		border-collapse: collapse;
+		border-spacing: 0;
+		empty-cells: show;
+		border: $tbl-border;
+		td, th{
+			overflow: visible;
+			border-left: $tbl-border;
+			border-bottom: none;
+			margin: $tbl-margin;	
+			padding: $tbl-padding;
+		}
+		thead {
+			background-color: $tbl-head-bg-color;
+			color: $tbl-head-color;
+			text-align: left;
+		}
+		tbody {
+			background-color: $tbl-body-bg-color;
+			color: $tbl-body-color;
+			tr:nth-child(2n-1) {
+				background-color: $tbl-body-alt-bg-color;
+			}
+		}
+		&.#{$tbl-horizontal-name}{ 
+			td,th{
+				border-left: none;
+				border-bottom: $tbl-border;
+			}
+		}
+		&.#{$tbl-bordered-name}{
+			td,th{
+				border-bottom: $tbl-border;
+			}
+		}
+	}
+}

testpage.html

@@ -59,6 +59,41 @@ Suspendisse varius turpis et dui viverra semper.</pre>
     <div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg">ut justo</a>.
     </div>
     <br>
+    <h3>TODO: Add helper class for bordered that uses 1px solid rgba(0,0,0,0.25) to add a border to elements easily</h3>
+    <table class="tbl">
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>Make</th>
+            <th>Model</th>
+            <th>Year</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        <tr>
+            <td>1</td>
+            <td>Honda</td>
+            <td>Accord</td>
+            <td>2009</td>
+        </tr>
+
+        <tr>
+            <td>2</td>
+            <td>Toyota</td>
+            <td>Camry</td>
+            <td>2012</td>
+        </tr>
+
+        <tr>
+            <td>3</td>
+            <td>Hyundai</td>
+            <td>Elantra</td>
+            <td>2010</td>
+        </tr>
+    </tbody>
+</table>
+<br>
     <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>
@@ -94,5 +129,7 @@ Suspendisse varius turpis et dui viverra semper.</pre>
         </div>
     </fieldset>
 </form>
+
+
   </body>
 </html>