Merge pull request #110 from Slicejack/v4.0.0

v4.0.0

.travis.yml

@@ -4,6 +4,6 @@ node_js:
 install:
   - npm install
 script:
-  - npm run test:ci
+  - npm run build
 notifications:
   email: false

CHANGELOG.md

@@ -2,6 +2,31 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [4.0.0] - 2018-09-03
+### Changed
+- Updated folder structure.
+- Updated boilerplate template.
+- Updated buttons component.
+- Updated settings.
+- Updated `.package-lock.json`.
+- Updated gulp tasks.
+- Updated `config.js`.
+- Updated gutter on first and last columns.
+- Renamed `/scss` folder to `/sass`.
+- Increased grid container size.
+
+### Fixed
+- Fixed some stylint issues.
+
+### Added
+- Added boilerplate with hero template.
+- Added horizontal spacing variable for mobile devices.
+
+### Removed
+- Removed distribution, documentation and test files.
+- Removed border utilites.
+- Removed VScode snippets.
+
 ## [3.2.1] - 2018-01-23
 ### Changed
 - Added `.stylelintrc` and `.eslintrc` to npm package (#101).

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017. - Slicejack
+Copyright (c) 2018. - Slicejack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,13 +1,14 @@
-# bojler
+![Bojler Heading](https://bojler.slicejack.com/wp-content/uploads/2018/09/bojler-title-2.png "Bojler")
 
+[![GitHub release](https://img.shields.io/github/release/slicejack/bojler.svg)](https://github.com/Slicejack/bojler/releases)
 [![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/Slicejack/bojler)
-[![npm version](https://badge.fury.io/js/%40slicejack%2Fbojler.svg)](https://www.npmjs.com/package/@slicejack/bojler)
-[![npm dependecies](https://david-dm.org/slicejack/bojler/status.svg)](https://www.npmjs.com/package/@slicejack/bojler)
-[![npm devDependecies](https://david-dm.org/slicejack/bojler/dev-status.svg)](https://www.npmjs.com/package/@slicejack/bojler)
-[![npm](https://img.shields.io/npm/dt/@slicejack/bojler.svg)](https://www.npmjs.com/package/@slicejack/bojler)
+[![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)
 [![license](https://img.shields.io/github/license/slicejack/bojler.svg)](https://github.com/Slicejack/bojler/blob/master/LICENSE)
 
-Bojler is an CSS email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.
+## What is Bojler ?
+Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.
 
 If you have experience with email template development, you know how painful it is to build a perfect email template that works across all email clients.
 
@@ -17,24 +18,71 @@ To make it easier for you to develop responsive and lightweight email templates
 Full project documentation can be found at http://bojler.slicejack.com/.
 
 ## Quick-start guide 🚀
-Several quick start options are available:
-- [Download compiled CSS](https://github.com/Slicejack/bojler/releases/download/v3.2.1/bojler-3.2.1-dist.zip)
-- [Download source files](https://github.com/Slicejack/bojler/archive/v3.2.1.zip)
+Full getting started guide can be found [here](http://bojler.slicejack.com/documentation/getting-started/).
+
+### 1. Download
+- [Download source files](https://github.com/Slicejack/bojler/archive/v4.0.0.zip) or
 - Clone the repo: `git clone https://github.com/Slicejack/bojler.git`
-- Install with [NPM](https://www.npmjs.com): `npm install @slicejack/bojler`
 
-Full getting started guide can be found [here](http://bojler.slicejack.com/getting-started/).
+### 2. Install node packages: `npm install`
+Secondly, install node packages in root of your newly downloaded folder with `npm install` command.
+> [This is an example](https://asciinema.org/a/7wqe0HIwFKBHpg0xGcnx8K7VV) of what you should get after you run `npm install` command.
+
+### 3. Start development server: `npm start`
+Let's fire up our development server 🔥
+
+Run `npm start` in your project root folder.
+
+While your development server is running, every time you make and save changes they will be automatically compiled from `src/` to `dist/` folder.
+> [This is an example](https://asciinema.org/a/5EgXCtHDLCEUaRKvwzA9sG2Y3) of what you should get after you run `npm start` command and save some changes while your development server is running.
+
+### 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.
+
+Now, you can start adding HTML templates to `src/templates` folder.
+
+In `/templates` folder you can find `boilerplate.html` and `boilerplate-with-hero.html` which you can use as starting point for new templates.
+
+## Available NPM commands
+<table>
+	<thead>
+		<tr>
+			<th width="170">Command</th>
+			<th>Description</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><code>npm start</code></td>
+			<td>This command starts live development server and watch task. While your development server is running, every time you make and save changes they will be automatically compiled from <code>src/</code> to <code>dist/</code> folder. Take a look at example <a href="https://asciinema.org/a/5EgXCtHDLCEUaRKvwzA9sG2Y3" rel="noopener" target="_blank">here</a>.</td>
+		</tr>
+		<tr>
+			<td><code>npm run build</code></td>
+			<td>This command builds everything from <code>src/</code> to <code>dist/</code> folder. Take a look at example <a href="https://asciinema.org/a/UZsom1AwszWhjTcrE8dR9CbLI" rel="noopener" target="_blank">here</a>.</td>
+		</tr>
+		<tr>
+			<td><code>npm run assets</code></td>
+			<td>This command copies all the assets from <code>src/assets/</code> to <code>dist/assets/</code> folder. You have to run this command every time you add a new asset in order to see changes. Take a look at example <a href="https://asciinema.org/a/5MkMuClKGp5Xc7dZtBHyTH4Ci" rel="noopener" target="_blank">here</a>.</td>
+		</tr>
+	</tbody>
+</table>
 
 ## Features
 Quick features overview:
-- [It’s responsive 🖥️ 💻 📱](http://bojler.slicejack.com/getting-started/#its-responsive-%EF%B8%8F--)
-- [Built with SASS 🎉](http://bojler.slicejack.com/getting-started/#built-with-sass-)
-- [Inline and Embed CSS](http://bojler.slicejack.com/getting-started/#inline-and-embed-css)
-- [Reset styles](http://bojler.slicejack.com/getting-started/#reset-styles)
-- [Typography ✍️](http://bojler.slicejack.com/getting-started/#typography-%EF%B8%8F)
-- [Grid system](http://bojler.slicejack.com/getting-started/#grid-system)
-- [Utility classes 🛠️](http://bojler.slicejack.com/getting-started/#utility-classes-%EF%B8%8F)
-- [Components](http://bojler.slicejack.com/getting-started/#components)
+- It’s responsive 🖥️ 💻 📱
+- Built with SASS 🎉
+- Automated SASS to CSS transpiler 🔢 🔀 🔠
+- Automated SASS linter (With email development rules) 🖌️
+- Automated CSS inlining 🔢 🔀 📦
+- Webserver with live reload 🔃
+- Default boilerplate template included
+- Reset styles
+- Typography ✍️
+- Grid system
+- Utility classes 🛠️
+- Components
 
 ## Bugs and feature requests 🕷️
 If you find a bug or need new feature please open a [new issue](https://github.com/Slicejack/bojler/issues) and we will discuss about it.
@@ -52,7 +100,7 @@ Special thanks to:
 - [James White](https://blog.jmwhite.co.uk)
 - [Campaign Monitor](https://www.campaignmonitor.com/)
 - [MailChimp](http://www.mailchimp.com/)
-- [Email on Acid](http://www.emailology.org/#1)
+- [Email on Acid](https://www.emailonacid.com)
 - [Litmus](http://litmus.com)
 - [Bringinteraktiv](http://removebluelinks.com)
 - [Zurb Foundation](http://foundation.zurb.com/emails.html)