Merge branch 'release/0.1.14'

bootstrap/_layout.scss

@@ -10,47 +10,56 @@ body,
 	background-color: $body-bg;
 }
 
+table[class^=body] {
+	@media only screen and (max-width: $layout-width) {
+		.container, #header, #footer,
+		.container > tbody > tr > td.content-inner {
+			width: 100% !important;
+			min-width: 100% !important;
+		}
+	}
+}
+
 //
 // Email default structure
 //
 // body > table.body > tbody > tr > td.content-wrapper > table#content.container > tbody > tr > td.content-inner
 //
 //---------------------------------
 
-.content-wrapper {
+#content-wrapper {
 	margin: 0;
 	padding: 0;
 	vertical-align: top;
 }
 
 table#content {
 	background-color: $bg-color;
+
+	// this is the table#content > tr > td
+	.content-inner {
+		text-align: left;
+		font-family: $font-family;
+		font-size: $font-size-base;
+	}
 }
 
-table.container {
+// can be applied on div and table
+.container {
 	width: $layout-width;
-	-premailer-width: strip-unit($layout-width);
 	max-width: $layout-width;
 	min-width: $layout-width;
 	margin: 0 auto;
 	padding: 0;
-	table-layout: fixed;
-	font-family: $font-family;
-	font-size: $font-size-base;
-
-	table {
-		width: 100%;
-	}
+}
 
-	td {
-		margin: 0;
-		padding: 0;
-		border: 0;
-		vertical-align: top;
-		text-align: left;
-	}
+// extend the .container for tables
+table.container {
+	-premailer-width: strip-unit($layout-width);
+	table-layout: fixed;
 }
 
+// not shure for this one, maybe make a specific class to not apply this on every p
 p {
 	box-sizing: border-box;
 }

bootstrap/_reset.scss

@@ -10,29 +10,27 @@ body,
 	padding: 0;
 }
 
-
+// reset tables to take 100% of width and remove space between tables
 table {
+	width: 100%;
 	border: 0;
 	border-collapse: collapse;
 	mso-table-lspace: 0pt;
 	mso-table-rspace: 0pt;
-
-	td {
-		box-sizing: border-box;
-		vertical-align: top;
-	}
 }
 
-table[class=body] {
-	@media only screen and (max-width: $layout-width) {
-		.container, #header, #footer,
-		.container > tbody > tr > td.content-inner {
-			width: 100% !important;
-			min-width: 100% !important;
-		}
-	}
+// reset all td
+td {
+	box-sizing: border-box;
+	vertical-align: top;
+
+	// reset all tds padding and margins
+	margin: 0;
+	padding: 0;
+	border: 0;
 }
 
+// reset all images
 img {
 	margin: 0;
 	padding: 0;
@@ -42,6 +40,7 @@ img {
 	-ms-interpolation-mode: bicubic;
 }
 
+// remove the blue link border from images inside a <a> tag
 a img {
 	border: none;
 }

bootstrap/_table-grid.scss

@@ -13,9 +13,16 @@ div.responsive-table {
 table.responsive-table,
 div.responsive-table {
 	table-layout: fixed;
+
+	div.column {
+		display: table-cell;
+		box-sizing: border-box;
+	}
 }
 
 .column {
+	box-sizing: border-box;
+
 	@if $grid-gutter != 0 {
 		padding-right: $grid-gutter/2;
 		padding-left: $grid-gutter/2;
@@ -32,7 +39,7 @@ div.responsive-table {
 			padding-right: 0;
 		}
 	}
-	@media (max-width: $layout-width){
+	@media (max-width: $layout-width) {
 		box-sizing: border-box;
 		@if $grid-gutter != 0 {
 			padding-right: $grid-gutter/2 !important;
@@ -41,23 +48,10 @@ div.responsive-table {
 	}
 }
 
-div.column.responsive {
-	display: table-cell;
-}
-
+// TODO: is this still usefull ?
 div.row {
 	width: 100%;
 	&.responsive {
 		display: table-row;
 	}
-}
-
-// TODO: test without it
-//@media all and (max-width: $layout-width) {
-	//div.column.responsive.col-sm-12 {
-	//	display: block !important;
-	//	width: 100% !important;
-	//}
-//}
-
-
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcode-mail-bootstrap",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Default CSS tructure for DcodeMail grunt",
   "main": "index.js",
   "scripts": {

readme.md

@@ -1,5 +1,11 @@
-# Bootstrap style for emails
+# Mail Bootstrap by Dcode
 
-Inspired by the well know CSS framework but this is not the same
+Inspired by the famous CSS framework, this "framework" tends to provide something global and reusable to build emails
+faster.
 
-"bootstrap" is for "origin", this is not the same framework
+## WIKI
+- [Layout](wiki/Layout)
+- [Buttons](wiki/Buttons)
+- Grid system
+- Utilities
+- Resets