Merge branch 'master' of github.com:Slicejack/bojler

CHANGELOG.md

@@ -11,7 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Gulp task async completion signal added (#114, #116).
 - Added `:` responsive flag to utility classes (#115, #117).
 
-## [4.0.0] - 2018-09-03
+## [4.0.0] - 2018-09-04
 ### Changed
 - Updated folder structure.
 - Updated boilerplate template.

README.md

@@ -5,6 +5,7 @@
 [![Github All Releases](https://img.shields.io/github/downloads/slicejack/bojler/total.svg)](https://github.com/Slicejack/bojler/releases)
 ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/slicejack/bojler.svg)
 [![GitHub issues](https://img.shields.io/github/issues-raw/slicejack/bojler.svg)](https://github.com/Slicejack/bojler/issues)
+[![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/slicejack/bojler.svg)](https://github.com/Slicejack/bojler/issues)
 [![license](https://img.shields.io/github/license/slicejack/bojler.svg)](https://github.com/Slicejack/bojler/blob/master/LICENSE)
 
 ## What is Bojler ?
@@ -15,10 +16,10 @@ If you have experience with email template development, you know how painful it
 To make it easier for you to develop responsive and lightweight email templates we have created Bojler.
 
 ## Project documentation 📖
-Full project documentation can be found at http://bojler.slicejack.com/.
+Full project documentation can be found at https://bojler.slicejack.com/.
 
 ## Quick-start guide 🚀
-Full getting started guide can be found [here](http://bojler.slicejack.com/documentation/getting-started/).
+Full getting started guide can be found [here](https://bojler.slicejack.com/documentation/getting-started/).
 
 ### 1. Download
 - [Download source files](https://github.com/Slicejack/bojler/archive/v4.1.0.zip) or
@@ -39,7 +40,7 @@ While your development server is running, every time you make and save changes t
 ### 4. Project configuration and files editing
 You’re ready to edit bojler configuration file in `src/sass/_settings.scss`.
 
-You can take a deeper look at [documentation section](http://bojler.slicejack.com/documentation) where we examine variables and maps more carefully.
+You can take a deeper look at [documentation section](https://bojler.slicejack.com/documentation) where we examine variables and maps more carefully.
 
 Now, you can start adding HTML templates to `src/templates` folder.
 
@@ -106,4 +107,4 @@ Special thanks to:
 - [Zurb Foundation](http://foundation.zurb.com/emails.html)
 
 ## License
-All contents of this boilerplate are licensed under the [MIT license](https://github.com/Slicejack/bojler/blob/master/LICENSE).
+All contents of this boilerplate are licensed under the [MIT license](https://github.com/Slicejack/bojler/blob/master/LICENSE.md).

package.json

@@ -2,7 +2,7 @@
   "name": "@slicejack/bojler",
   "version": "4.1.0",
   "description": "Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.",
-  "homepage": "http://bojler.slicejack.com",
+  "homepage": "https://bojler.slicejack.com",
   "bugs": {
     "url": "https://github.com/Slicejack/bojler/issues"
   },

src/sass/_utilities.scss

@@ -45,22 +45,27 @@
 }
 
 @media (max-width: $breakpoint-mobile) {
+	.block\:sm,
 	.block\@sm {
 		display: block !important;
 	}
 
+	.table\:sm,
 	.table\@sm {
 		display: table !important;
 	}
 
+	.table-row\:sm,
 	.table-row\@sm {
 		display: table-row !important;
 	}
 
+	.table-cell\:sm,
 	.table-cell\@sm {
 		display: table-cell !important;
 	}
 
+	.hidden\:sm,
 	.hidden\@sm {
 		display: none !important;
 	}
@@ -110,14 +115,17 @@
 }
 
 @media (max-width: $breakpoint-mobile) {
+	.text-left\:sm,
 	.text-left\@sm {
 		text-align: left !important;
 	}
 
+	.text-center\:sm,
 	.text-center\@sm {
 		text-align: center !important;
 	}
 
+	.text-right\:sm,
 	.text-right\@sm {
 		text-align: right !important;
 	}
@@ -251,6 +259,7 @@
 
 	@each $spacer-key, $spacer-value in $spacers {
 		@if $spacer-key != 'auto' {
+			.p-#{$spacer-key}\:sm,
 			.p-#{$spacer-key}\@sm {
 				padding-top: $spacer-value !important;
 				padding-right: $spacer-value !important;
@@ -262,11 +271,13 @@
 		@each $spacing-side-key, $spacing-side-value in $spacing-sides {
 			@if $spacer-key != 'auto' {
 				@if $spacing-side-key == 'horizontal' {
+					.p#{$spacing-side-value}-#{$spacer-key}\:sm,
 					.p#{$spacing-side-value}-#{$spacer-key}\@sm {
 						padding-right: $spacer-value !important;
 						padding-left: $spacer-value !important;
 					}
 				} @else {
+					.p#{$spacing-side-value}-#{$spacer-key}\:sm,
 					.p#{$spacing-side-value}-#{$spacer-key}\@sm {
 						padding-#{$spacing-side-key}: $spacer-value !important;
 					}
@@ -282,6 +293,7 @@
 	@each $spacing-side-key, $spacing-side-value in $spacing-sides {
 		@each $spacer-key, $spacer-value in $spacers {
 			@if $spacing-side-key == 'horizontal' {
+				.m#{$spacing-side-value}-#{$spacer-key}\:sm,
 				.m#{$spacing-side-value}-#{$spacer-key}\@sm {
 					margin-right: $spacer-value !important;
 					margin-left: $spacer-value !important;